代码之家  ›  专栏  ›  技术社区  ›  Morteza Milani

有人能为大规模web应用程序提供一个好的客户端架构和结构吗?

client-side architecture design-patterns javascript
  •  3
  • Morteza Milani  · 技术社区  · 15 年前

    我正在构建一个大规模的web应用程序。它将在未来发展,因此我需要一个好的后端和前端架构,以我的应用程序。在站点的后面,我使用了Zend框架,所以架构对我来说还可以。但是在前面,在没有良好架构的情况下使用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应用程序的前端部分提供一个好的结构(比如我们在后端拥有的、好的文件结构和面向对象的方法)?

    3 回复  |  直到 15 年前
        1
  •  4
  •   Paul D. Waite    15 年前

    对于大型应用程序,很多人都希望使用Dojo或YUI。它们是诚实的框架,你能找到的大部分东西都是一个库。

    就我个人而言,我倾向于使用jQuery。我根据需要创建jQuery插件或jQueryUI小部件。我已经把jQueryUI推得很远了。

    所有的东西都在其中 $.fn.myPlugin 或 $.ui.myWidget . 对我来说,这还有一个额外的好处,那就是促使您保持代码非常模块化和可移植(假设您遵守jQuery/jQueryUI约定)。 

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

$.upload(args);
        2
  •  7
  •   David Bradshaw    5 年前

    到2020年,这个问题的最新答案是 React + GraphQL + Styled-Components . 最好从官方开始 Create React App 工具。它们是一些不同的GraphQL实现;在客户方面,明确的领导者是 Apollo . 在服务器上,您有更多的选择,甚至可以很容易地推出您自己的服务器实现,因此请使用最适合您当前后端的方法。样式化组件在JS中提供CSS,就像React在JS中提供HTML一样。

    要获得更完整、更坚定的体验,请看 Gatsby

    在过去的几年里 functional 编写JavaScript的风格已经很流行。如果你不习惯函数式编程,那么一开始学习它可能有点困难,但首先要学习一个名为 Ramda

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

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

    最后,要想得到更深刻的答案,请看《成楼》杂志上的这篇文章 Spectrum of Abstraction .

        3
  •  6
  •   Bot élecul    5 年前

    大多数答案都是这样的 jQuery , React , Angular , Vue.js 已经 高级语言!

    既然问题是关于 ,我想说前面的答案都不能解决这个问题,这是有原因的:

    对于前端JavaScript源代码组织,目前还没有新兴的或普遍接受的体系结构。

    • 前端JS代码相对于后端源代码来说相当小,大多数开发人员不需要可伸缩的架构。
    • 执行是短暂的,JS的生命周期与web页面的生命周期相同。

    我真的希望有一天,有人会提出第一个真正的JS架构(比如MVC)。但在我看来,这种体系结构更多的是关于事件回调,而不是MVC。在结束之前,我将向您推荐以下资源:

    最后,我强烈建议考虑那些潜力被低估的JS模块。这不完全是一个体系结构,但是:

    • JS模块组织你的代码
    • JS模块是可伸缩的
    • 易于维护
    • JS模块是可重用的

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

    对智者说!

        4
  •  3
  •   Hasith    13 年前

    事实上,我一直在为同一个问题苦苦挣扎。。在做了几个大型项目之后,我想把我学到的东西作为参考体系结构来分享,以防别人发现它有用。

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

        5
  •  3
  •   Shashidhar Reddy    5 年前

    根据我对前端的理解,我将要求您使用仅使用HTML、CSS和JS的web组件。 不需要花太多时间去理解其他语言。如果您采用最新的UI框架或库,比如Angular,那么它们是基于web组件构建的。

    您可以自定义您自己的组件和用例,这些组件和用例您希望在您的应用程序中使用项目。什么时候如果您使用的是框架,则需要一些时间来加载和跟踪一些正在使用的lib。

    看看网络组件 https://www.webcomponents.org/introduction

        6
  •  2
  •   John Cargo Salil    5 年前

    拥有在我的应用程序中为百万观众缩放部分内容的经验。但后来我不得不关闭应用程序,以减少利润,增加管理压力(虽然不是成本,但利润不足以保持动力)

    我的架构是:

    1. Mithril.js.org 库-签出 mithril here 用于前端
    2. Twitter引导前端框架
    5. 在我关闭应用程序之前,我几乎要把我的存储移到s3了。

    我发现mithril比react或angular更有趣,它很容易开始,我在学习的时候就在构建,这非常简单,他们声称,他们比react、vue和angular在尺寸和性能上都要好。

        7
  •  -1
  •   drekka    15 年前

    我的回答是问你为什么需要这个?我已经研究过很多使用javascript的应用程序,但我学到的一点是,最好的办法是将javascript,尤其是面向对象的javascript最小化到绝对最小。使用大型复杂javascript的Web页面往往速度慢、内存消耗大,而且在所有浏览器变体中都很难进行调试。

    推荐文章
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号