轉換現有的大型base2 javascript應用程序代碼庫以使用RequireJS

Question

我從事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是一個不錯的選擇，還是我應該走另外一條路？

Answer 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 ，它將需要所有這些模塊並啟動該應用：

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