Question

我正在制作一个javascript应用程序。通常我所做的是制作不同的模块，并在$(document).ready();函数中获取用户输入或点击事件。这适用于小型应用程序。但是，当我遵循相同的模式时，我的意思是在$(document).ready();中获取点击事件然后它会变得混乱。

那么如何为庞大的应用程序组织此文件呢？

提前致谢

Answer 1

我在这个主题上找到的最好的资源是Addy Osmani的创意公共书籍Patterns for Large-Scale JavaScript Application Architecture。它基于Nicholas Zakas'Scalable JavaScript Application Architecture的一部分，使其适应经典设计模式和现代工作流程。

一旦达到适度的复杂程度，您将受益于使用使用MVC架构模式的变体构建的框架。 Backbone.js是领先者，是一个微观框架，意味着它比其他人更少掌握。其他受欢迎的选择是Ember.js，KnockoutJS。

扩展和样板也构建在这些框架上，以处理重复性任务，如数据/模型绑定和脚手架。对于Backbone，请查看Derick Bailey的Backbone.Marionette和Backbone Aura，这是一个非常适合生产的Osmani / Zakas建筑模型的改编版，它使用Backbone作为其......骨干。

Answer 2

作为一种脚本语言，结构是大型Javascript项目中最重要的问题之一。重要的是应用程序的各个部分很好地解耦并且“自包含”。例如，您可以在单个文件夹中创建自己的UI组件，其中包含自己的模板，逻辑，样式，本地化等。这种自我遏制将让您以可管理的方式组织复杂的前端代码。

一旦您的代码组织完毕且自包含，您还需要解决其他问题。

这些松散耦合的组件如何与紧密耦合相互作用
如何优化这些单独的部件以便在我的生产环境中快速加载

我是大型应用程序的BoilerplateJS参考架构的作者。

http://boilerplatejs.org

它结合了尼古拉斯扎卡斯的陈述中讨论的大多数最佳实践。您还可以在代码中找到模块化产品套件的示例实现。看一下，您将了解在使用JavaScript进行大规模应用程序时需要注意的问题。

Answer 3

假设我们进行如下所示的跨平台应用程序

很抱歉删除脏内容。

我们希望它跨平台，所以我们用JavaScript编写。我们希望我们的语法聪明，优雅，简洁，因此我们使用jQuery。

我们的源代码结构如下

在js文件夹中，我们有三个文件夹：controller，model，view。我们将应用程序分为三个（可能更多）部分：主要，菜单和导航栏。

对于每个部分，我们都有...Ctrl.js和...View.js。我们只有一个模型mainModel.js（以防万一）。

Ctrl.js是您的处理程序以及将它们附加到控件的位置。例如mainCtrl.js：

app.mainCtrl = {
   model: app.mainModel,
  init: function(){

     $('#addButton').click(function(){
         this.model.addToFavorites();
     });
     $('#removeButton').click(function(){
         this.model.removeFromFavorites();
     });
  }
};

（以上屏幕截图右侧的小星星实际上是添加/删除按钮）

控制器可以保存对视图和模型的引用，也可以仅包含对模型的引用（如上例所示）。

Model.js是我们更新后端和视图的地方。例如mainModel.js：

app.mainModel = {

  view: app.mainView,
  all: {},
  favorites: {},
  init: function(){
   /* for example
   this.all = $.parseJSON ($.load('url'));
   this.favorites = $.parseJSON ($.load('url')); 
    */
      this.showAll();


  },
  showAll: function(){
       this.view.show(this.all);
  },
  showFavorites: function(){
       this.view.show(this.favorites);
  },
  addToFavorites: function(item){
      //add item to favorites
  },
  removeFromFavorites: function(item){
      //remove item from favorites
  }
};

View.js是我们实际更新视图的地方（通过直接操作DOM）。视图的方法可以由相关的控制器和/或模型调用。例如mainView.js：

app.mainView = {
   show: function (items){
       //create new element for each item
   }
};

最后我们有了app.js文件，用于初始化应用程序：

var app = {
  init: function(){
      this.mainCtrl.init();
      this.menuCtrl.init();
      this.navbarCtrl.init();
      this.mainModel.init();
      this.navbarView.init();
  }  
};

我们的应用程序中只有一个全局变量app。在 app 名称空间内创建的所有视图，控制器和模型。

最后，最后是导入顺序。您应该先导入app.js，因为它定义了app变量。

    <script src="vendor/js/jquery.min.js"/></script>
    <script src="js/app.js"/></script>
    <script src="js/controller/mainCtrl.js"></script>
    <script src="js/controller/menuCtrl.js"></script>
    <script src="js/controller/navbarCtrl.js"></script>
    <script src="js/view/mainView.js"></script>
    <script src="js/view/menuView.js"></script>
    <script src="js/view/navbarView.js"></script>
    <script src="js/model/mainModel.js"></script>

    <script>
        $(function(){
            app.init();
        });

    </script>    
   </body>
</html>

组织JavaScript代码

3 个答案: