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

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

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

当前没有针对前端JavaScript源代码组织的新兴或通用架构。

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

关于后端源代码，前端JS代码很小，大多数开发人员不需要可伸缩的体系结构。
执行是短暂的，JS的生存期与网页的生存期相同。
对于许多开发人员而言，问题更多是关于操纵DOM而不是构造大型JS代码。这就是为什么人们的答案是关于库而不是框架的原因。

我真的希望有一天，有人会提出第一个真正的JS架构（例如MVC）。但是我认为，这种体系结构将更多地涉及事件回调，而不是MVC。在结束之前，我将建议您使用以下资源：

Imperative或procedural编程。
Functionnal programming（可能是模块的最佳线索）
Fun Fun Function的精彩视频
JavaScript modules

总而言之，我强烈建议考虑具有很大被低估潜力的JS模块。这不完全是一种体系结构，但是：

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

上一个列表不是您需要组织代码的主要原因吗？

明智的话！

Answer 2

很多人为大型应用程序推送Dojo或YUI。它们是诚实的框架，其中您发现的大多数其他内容都是库。

就个人而言，我倾向于坚持使用jQuery。我根据需要创建jQuery插件或jQueryUI Widgets。我已经成功推出了jQueryUI。

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

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

$.upload(args);

Answer 3

根据我对前端的理解，我将要求您使用仅使用HTML，CSS和JS的Web组件。无需花费大量时间来理解其他语言。如果您使用的是最新的UI框架或库（例如Angular），则React是基于Web组件构建的。

您可以自定义自己的组件和要在项目中使用的用例。使用框架时，加载和跟踪一些正在使用的库会花费一些时间。

您可以使用JS任意方式使用它。创建后，您可以在任何数量的项目中重复使用这些组件。

只要研究一下webcomponents https://www.webcomponents.org/introduction，您就会有一个清晰的主意。希望对您有所帮助。

Answer 4

我实际上有时候正在努力解决同样的问题..在做了一些大型项目之后，我想把我的学习分享为参考架构，以防其他人发现它有用。

看看http://boilerplatejs.org。它不是一个库，而是一个框架，它将一些行业领先的库与用于大规模JavaScript开发的架构模式集成在一起。

Answer 5

具有在我的应用程序中为数百万观看者扩展我的某些内容的经验。但是后来我不得不关闭应用程序，以减少利润并增加管理压力（虽然不是成本，但利润不足以保持动力）

我的体系结构是：

Mithril.js.org库-前端结帐intersectionObserver API^MDN
Twitter引导程序前端框架
带有“ Laravel的后端，并开始将一些繁重的写入数据迁移到nodejs”
Redis作为内存存储。
在关闭应用程序之前，我几乎处于将存储设备移至s3的境地。

没有jQuery -我保持我的应用程序不使用jQuery（我听说在某个大应用程序中避免使用jQuery，因此我自己不做进一步调查，我计划也保持不使用jQuery，尽管我有没有可靠或防弹的理由避免使用jquery）

我发现秘银比起反应性或棱角性更有趣，它是如此容易启动，我在学习的同时就开始构建，那真是简单，他们声称，就大小和大小而言，它们比起反应性，vue和棱角性要好。性能。

Answer 6

我的回答是问你为什么需要这个？我已经研究了许多使用javascript的应用程序，但我学到的一件事是，最好的办法是尽量减少javascript，尤其是面向对象的javascript到最低限度。具有大量复杂javascript的网页往往速度慢，内存耗尽，并且很难通过所有浏览器变体进行调试。

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

6 个答案: