13

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

那么如何为一个巨大的应用程序组织这个文件呢？

提前致谢

4

3 回答 3

12

我在这个主题上找到的最好的资源是 Addy Osmani 的知识共享书，大型 JavaScript 应用程序架构模式。它基于 Nicholas Zakas 的Scalable JavaScript Application Architecture的一部分，使其适应经典设计模式和现代工作流程。

一旦您达到即使是中等程度的复杂性，您将受益于使用使用 MVC 架构模式的变体构建的框架。Backbone.js是领先者，并且是一个微型框架，这意味着它比其他人更少牵手。其他流行的选择是Ember.js、KnockoutJS。

扩展和样板也建立在这些框架上，以处理重复性任务，例如数据/模型绑定和脚手架。对于Backbone，请查看来自 Derick Bailey 和Backbone Aura的 Backbone.Marionette ，这是对 Osmani/Zakas 架构模型的尚未完全投入生产的改编，使用 Backbone 作为其......好吧，主干。

于 2012-08-07T09:39:24.153 回答
6

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

一旦您组织好代码并自包含，您还需要解决其他问题。

  • 这些松耦合的组件应该如何与非紧耦合交互
  • 我应该如何优化这些单独的部分以在我的生产环境中快速加载

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

http://boilerplatejs.org

它包含了 Nicholas Zakas 演讲中讨论的大部分最佳实践。您还将在代码中找到模块化产品套件的示例实现。看一看，你就会明白在用 JavaScript 做大规模应用程序时需要注意的问题。

于 2012-08-28T05:57:56.987 回答
1

假设我们制作如下所示的跨平台应用程序 在此处输入图像描述

很抱歉删除了脏内容。

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

我们的源码结构会是这样的

在此处输入图像描述

在js文件夹中，我们有三个文件夹：controller, model, view. 我们将应用程序分为三个（可以更多）部分：main、menu和navbar。

对于这些部分中的每一个，我们都有...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.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>
于 2019-05-13T15:37:07.960 回答