转换大型现有base2 javascript应用程序代码库以使用RequireJS

时间:2012-11-30 10:05:35

标签: javascript jquery architecture requirejs dependency-management

我已经在javascript应用程序上工作了很长时间,它起初很小,我是唯一一个正在研究它的人。然而,它变得非常大。我想引进另一位开发人员加快工作。

问题是,这个应用程序只包含一个js文件(15000行代码),在当前情况下在这个应用程序上一起工作会在合并我的工作时给我带来很多痛苦(我正在使用git)。

该应用程序基于Douglas Crockford的base2库。它还使用jQuery进行DOM操作,jQuery UI,Modernizr和其他一些操作。

它的结构如下:

App = {};
App.model = {};
App.view = {};
App.controller = {};

App.main = base2.Base.extend({
    // uses models, views, controllers
});

App.model.AbstractModel = base2.Base.extend({
    constructor: function(){ ... },
    someMethod: function(){ ... }
    // etc.
});

App.model.AModel = App.model.AbstractModel.extend({
    // override some method
    someMethod: function(){ ... }
});

现在我的问题是,正如标题所述:(如何)我可以使用RequireJS使这个应用程序模块化,包含单独的文件,并着眼于与其他开发人员更容易合作? RequireJS是一个不错的选择,还是应该走另一条路?

1 个答案:

答案 0 :(得分:1)

是的,我认为这是一条很好的选择途径,它会提高代码的质量和可维护性。

  1. 您将模块拆分为单独的文件
  2. 对于每个模块,您可以找出其他模块之间的依赖关系
  3. 您更改模块中的代码,如下所示
  4. App.model.AModel = App.model.AbstractModel.extend({
        // override some method
        someMethod: function(){ ... }
    });
    

    // I'm using shortened syntax here 
    // http://requirejs.org/docs/api.html#modulenotes
    define(function (require) {
      // here you are listing dependencies as local closure variables
      var AbstractModel = require('model/AbstractModel');
    
      var AModel = AbstractModel.extend({
        // override some method
        someMethod: function(){ ... }
      });
    
      // here you are returning the module
      return AModel;
    });
    

    对于像jQuery这样的依赖,在SoundCloud中,我们决定将它们缩小并连接为全局(它们使用常规脚本标记的方式),而不将它们包装在AMD模块定义中。

    你也可能有主app.js需要所有这些模块并启动应用程序:

    require(
      ['models/amodel', 'views/main'/*, 'more', 'modules', … */], 
      function (Amodel, Main /*, more, modules */) {
        new Main({
           model: Amodel
        });
      }
    );