RequireJS使用注意地方

使用RequireJS做異步模塊加載，有幾點值得注意的地方：

1.模塊定義兩種寫法

1. 存在依賴的函數式定義

如果模塊存在依賴：則第一個參數是依賴的名稱數組；第二個參數是函數，在模塊的所有依賴加載完畢后，該函數會被調用來定義該模塊，因此該模塊應該返回一個定義了本模塊的object。依賴關系會以參數的形式注入到該函數上，參數列表與依賴名稱列表一一對應。

define(['a'], function(aJ) {
     var hello = function(){
          aJ.hello('i am c.js');
     }
 
    return {
          hello : hello
     }
});

PS: 對模塊的返回值類型並沒有強制為一定是個object，任何函數的返回值都是允許的。

2. CommonJS模塊格式定義

require ： 用來引入依賴其他模塊方法。

exports ： 導出模塊變量或方法的對象。

module ：包含該模塊的信息。

require.config({
    baseUrl: "",
    config: {
        'b': {
            size: 'large'
        }
    },
     paths: {
          a : 'base/a',
          b : 'base/b',
          c : 'base/c'
     }
});

define(function(require, exports, module) {
     var aJ = require("a");
 
     var hello = function(){
          aJ.hello('i am b.js');
     }
     var hello2 = function(){
          aJ.hello('i am b.js22');
     }
     exports.hello = hello;
     console.log("b.js : exports",  exports);
     console.log("b.js : module", module);
     console.log("b.js : config", module.config());
     //不能一起用，return會覆蓋調前面的exports
     /*return {
          hello : hello2
     }*/
});

PS：return 對象和exports不能一起用，return會覆蓋調前面的exports。

下面是調用后打印的信息：

exports：可以看出exports是module的一個屬性。

module ：里面包括了該模塊的別名、uri、導出對象、config信息方法。

config ：我們常常需要將配置信息傳給一個模塊。這些配置往往是application級別的信息，需要一個手段將它們向下傳遞給模塊。

在RequireJS中，基於requirejs.config()的config配置項來實現。

2. 警惕單例變量

警惕單例里變量，因為RequireJS在require一次后，之后的require都是使用之前的緩存。所以當模塊里面定義了一個變量后，只要在此require改變后，其他require也是保持一致的。

define(function() {
 
     var index = 0;
     var hello = function(msg){
          console.log(msg);
     }
 
     var addIndex = function(){
          index++;
     }
     var getIndex = function(){
          return index;
     }
     return {
          hello : hello,
          addIndex : addIndex,
          getIndex : getIndex
     }
});

調用：

require(['a',], function (A) {
     require(['a'], function (A) {
          console.log(A.getIndex());
          A.addIndex();
          A.addIndex();
     });
     require(['a'], function (A) {
          console.log(A.getIndex());
     });
});

上面分別打印的是：

0
2

這例子可以看出這幾個require都是共用一個index變量。

3. 清除緩存

因為RequireJS有緩存的功能，但是在開發的時候我們不希望它緩存，就可以在require.config設置urlArgs。

urlArgs：RequireJS獲取資源時附加在URL后面的額外的query參數。

示例：

urlArgs: "bust=" +  (new Date()).getTime()

在開發中這很有用，但記得在部署到生成環境之前移除它。

4. 從其他包中加載模塊

RequireJS支持從CommonJS包結構中加載模塊，但需要一些額外的配置。

package config可為特定的包指定下述屬性：

1. name : 包名（用於模塊名/前綴映射）。

2. location : 磁盤上的位置。位置是相對於配置中的baseUrl值，除非它們包含協議或以“/”開頭。

3. main : 當以“包名”發起require調用后，所應用的一個包內的模塊。

              默認為“main”，除非在此處做了另外設定。

              該值是相對於包目錄的。

例子：

main.js

require.config({
     baseUrl: "",
     packages: [{
          name: "student",
          location: "package-stu"
     },{
          name: "teacher",
          location: "package-tea"
     }],
     urlArgs: "bust=" +  (new Date()).getTime()
});
require(["student/store", "teacher/tea"], function (Sto, Tea) {
     Sto.hello();    
     Tea.hello();    
});

tea.js：

define(function(require, exports, module) {
     exports.hello = function(){
          console.log('i am a teacher.');
     }
});

stu.js:

define(function(require, exports, module) {
     exports.name = '海角';    
});

store.js:

define(function(require, exports, module) {
     var stu = require("student/stu"); 
     exports.hello = function(){
          console.log('i am ' + stu.name);
     }
});

這種從其他包加載模塊的方式，我感覺有兩個怪異地方（我不是很明白，例子雖然調通）：

1. 其他包里面的模塊引用其他模塊的寫法，使用者反而影響模塊的寫法？

2. 其他包里面的main.js好像沒有用了，沒內容都沒問題。

參考文獻

1. RequireJS 中文網

 

本文為原創文章，轉載請保留原出處，方便溯源，如有錯誤地方，謝謝指正。

本文地址 ：http://www.cnblogs.com/lovesong/p/5495177.html