RequireJS ve JS Modülü Kalıbı

Question

Şu anda bir "modül kalıbı" olan birden çok javascript dosyası kullanan bir Javascript uygulaması üzerinde çalışıyorum. böylece gibi:

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

app.moduleName = function() { 

    // private property 
    var someProp = null; 

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

bu kullanarak im kodumu yapılandırılmakta arasında olmasının nedeni. Örneğin, app.moduleName.init() yöntemini çağırarak bir yöntemi veya özelliği çağırabilirim.

Bunun bir dezavantajı, HTML'ime çok sayıda <script src="app.moduleName.js"> .. vb. Eklemem gerekmesidir.

Bu sorunu çözmek için RequireJS ile karşılaştım, belgeleri okudum. Ancak mevcut javascript dosyalarına kod eklemeden bunu mevcut yapmamla nasıl birleştireceğimi tam olarak bilmiyorum.

Birinin bunu nasıl başaracağı konusunda herhangi bir öneri var mı?

Answer 1

Modül ağacınızı bunun gibi require.js ile oluşturabilirsiniz.

// 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; 
     } 
    } 
}); 

Ancak require.js ile sen bile kolayca yapabilirsiniz ... Böyle bir küresel modül ağaç olmadan uygulamanızı oluşturabilirsiniz. Modülünüzün tüm parçalarına tek tek erişmeniz yeterlidir. Tanımla/gereksinim isteğinde geri döndüğünüz her şey, require.js tarafından bir referans olarak saklanacaktır. Bu bilmek önemli bir şey. Dolayısıyla, uygulamanıza iki kez bir komut dosyası eklemek ve aynı nesneye veya örneğe sahip olmak mümkündür. Örneğin SomeClass.myValue değeri ...

tüm dahil modüllerde aynı olacaktır bu

// 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 
      } 
     }; 
    } 
); 

gibi bir modül eklerseniz