RequireJS和JS模塊模式

Question

我目前正在使用多個JavaScript文件和「模塊模式」的JavaScript應用程序。 像這樣：

var app = app || {}; 
app.moduleName = app.moduleName || {}; 

app.moduleName = function() { 

    // private property 
    var someProp = null; 

    return { 
     // public method 
     init: function() { 
      return "foo"; 
     } 
    }; 
}(); 

之所以使用這個即時通訊是structurize我的代碼。例如，我可以通過調用app.moduleName.init（）來調用方法或屬性。

這樣做的一個缺點是我必須在我的HTML中包含很多<script src="app.moduleName.js"> ..等等。

爲了解決這個問題，我遇到了RequireJS，我閱讀了文檔。但是我不太清楚如何在現有的結構中合併這個結構，而無需在現有的JavaScript文件中添加一堆代碼。

有人有任何建議如何做到這一點？

Answer 1

您可以使用require.js像這樣構建模塊樹。

// in main.js 
require.config({/*...*/}); 
require(
    ['app'], 
    function (app) { 
     // build up a globally accessible module tree 
     window.app = app; 
     var foo = window.app.moduleName.init(); // returns "foo" 
    } 
); 

// in app.js 
define(
    ['moduleName'], 
    function(moduleName){ 
     return { 
      moduleName: moduleName; 
     } 
    } 
); 

// in moduleName.js 
define(function(){ 
    // private property 
    var someProp = "foo"; 
    return { 
     // public method 
     init: function() { 
      return someProp; 
     } 
    } 
}); 

然而，隨着require.js你可以建立你的應用程序沒有一個全球性的模塊樹這樣的...即使你很容易可以。您可以單獨訪問模塊的所有部分，只需要它們即可。無論您在定義/要求回調中返回什麼，都將通過require.js存儲爲參考。這是重要的知道。因此，可以在應用程序中包含兩次腳本並擁有相同的對象或實例。例如，如果你有這樣的

// in SomeClass.js 
define(function() { 
    function SomeClass() { 
     this.myValue = true; 
    } 
    return new SomeClass(); 
}); 

// app.js 
define(
    ['SomeClass', 'someComponent'], 
    function (SomeClass, someComponent) { 
     return { 
      init: function() { 
       SomeClass.myValue = false; 
       someComponent.returnClassValue(); // logs false 
      } 
     }; 
    } 
); 

// someComponent.js 
define(
    ['SomeClass'], 
    function (SomeClass) { 
     return { 
      returnClassValue: function() { 
       console.log(SomeClass.myValue); // false 
      } 
     }; 
    } 
); 

模塊SomeClass.myValue的價值將在所有包括模塊一樣...