0

我已经在一个 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 是一个不错的选择还是我应该走另一条路？

4

1 回答 1

1

是的，我认为这是一个很好的选择，它将提高代码的质量和可维护性。

  1. 您将模块拆分为单独的文件
  2. 对于每个模块，您要弄清楚其他模块之间的依赖关系是什么
  3. 您更改模块中的代码，如下所示

从

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需要所有这些模块并启动应用程序的 main：

require(
  ['models/amodel', 'views/main'/*, 'more', 'modules', … */], 
  function (Amodel, Main /*, more, modules */) {
    new Main({
       model: Amodel
    });
  }
);
于 2012-11-30T10:15:58.250 回答