任何人都可以为大型 Web 应用程序推荐一个好的客户端架构和结构吗？

Question

我正在构建一个大型 Web 应用程序。它将在未来增长，因此我的应用程序需要一个良好的后端和前端架构。在网站的后面，我使用 Zend Framework，因此该架构对我来说还可以。但是在前面，在没有良好架构的情况下使用 javascript 和 ajax 会使以后的更改变得困难和混乱。

现在，我正在使用我自己的架构。我有一个用于整个应用程序的大对象，比如 BigObject。当模块添加到站点时，我会扩展它。说我有一个上传模块。我用这个：

BigObject.upload={
    //initialization
    init:function(){
    },
    //I tried to use what I named semi-MVC architecture!!!
    controllers:{
        //index is a controller
        someController:{
            init:function(){
                //initialization
            },
            someAction:function(){
                //Code goes here
                //call a model if necessary
                //call view script
                BigObject.upload.views.someController.someAction();
            }
        }
    },
    models:{
        //models required for this module like loading contents with ajax.
        loadContent:function(part,callback){
        }
    }
    views:{
        init:function(){
            //initialize view
        },
        someController:{
            someAction:function(){
            }
        }
    }
}

你怎么认为？这个问题有没有更好的解决方案？有没有人想过 Web 应用程序前端部分的良好结构（例如我们在后端拥有的结构、良好的文件结构和面向对象的方法）？

Answer 1

2020 年对这个问题的最新答案是使用React + GraphQL + Styled-Components。开始使用 React 的最佳位置是官方的Create React App工具。它们是 GraphQL 的几种不同实现；在客户端，明显的领导者是Apollo。在服务器上，您有更多选择，甚至可以轻松实现自己的服务器实现，因此请选择最适合您当前后端的方法。Styled-Components 在 JS 中为你提供 CSS，就像 React 在 JS 中为你提供 HTML 一样。

要获得更完整和自以为是的体验，请查看Gatsby，它将上述所有内容整合到一个框架中。

在过去的几年里，编写 JavaScript 的一种更具功能性的风格变得流行起来。如果您不习惯函数式编程，那么一开始可能会有点陡峭的学习曲线，但首先要学习一个名为Ramda的库。

这里有几个链接可以让你开始使用函数式 JS

• JavaScript 函数式编程简介
• 在 Ramda 中思考
• 缩进是敌人：编写不太复杂的 JavaScript
• 函数式编程的大部分指南

在测试方面，Jest结合Enzyme是目前最好的选择。

最后，要获得更深入的答案，请查看 Cheng Lou 关于抽象光谱的演讲。

Answer 2

大多数答案都提出了像jQuery、React、Angular、Vue.js 之类的东西……它们不是框架，也不是架构。所有这些库都是 JavaScript 之上的层。我只是提醒你，JavaScript已经是一门高级语言了！

由于问题是关于大型 Web 应用程序的良好客户端架构和结构，我想说之前的答案都没有解决问题，这是有原因的：

目前没有用于前端 JavaScript 源代码组织的新兴或普遍接受的架构。

我已经阅读了数十篇博客文章、Stackoverflow 问题、Youtube 视频……我从未找到详细介绍通用、通用和可扩展架构的人。主要原因是：

• 前端 JS 代码相对后端源代码很少，大多数开发人员不需要可扩展的架构。
• 执行是短暂的，JS 的生命周期与网页生命周期相同。
• 许多开发人员的问题更多是操作 DOM，而不是构建大型 JS 代码。这就是为什么人们的答案是关于库而不是框架的原因。

我真的期待有一天，有人会提出第一个真正的 JS 架构（例如 MVC）。但在我看来，这种架构将更多地关注事件回调而不是 MVC。在结束之前，我会建议您使用以下资源：

• 命令式或过程式编程。
• 函数式编程（可能是模块的最佳领导者）
• Fun Fun Function的精彩视频
• JavaScript 模块

总而言之，我强烈建议考虑那些潜力被大大低估的 JS 模块。这不完全是一种架构，而是：

• JS 模块组织你的代码
• JS 模块是可扩展的
• 可维护性很容易
• JS 模块可重用

以前的列表不是您需要组织代码的主要原因吗？

对智者说！

Answer 3

对于大型应用程序，很多人都提倡使用 Dojo 或 YUI。它们是诚实的框架，您会发现的大多数其他内容都是一个库。

就我个人而言，我倾向于坚持使用 jQuery。我根据需要创建 jQuery 插件或 jQueryUI 小部件。我已经成功地推动了 jQueryUI 的发展。

一切都属于$.fn.myPlugin或$.ui.myWidget。对我来说，这还有一个额外的好处，那就是促使您保持代码非常模块化和可移植（假设您遵守 jQuery/jQueryUI 约定）。

$(element).myWidget({
    color:'eggplant',
    someValue:42
});

$.upload(args);