requireJS學習筆記

一、常用的方法與命令

• require
• define
  其中define是用于定義模塊，而require是用于載入模塊以及載入配置文件。
  通過 <script> 標簽，將require.js 文件引入到當前的 HTML 頁面中
  <script src="js/require.js"></script>

二、參數配置
在requireJS中一個文件就是一個模塊，其表現則是以key/value的鍵值對格式，key即模塊的名稱（模塊ID），而value則是文件（模塊）的地址

基本參數配置：

//index.html
<script>
require.config({
    baseUrl:'js/',
    paths:{
        'jquery':'http://xxxx.xxx.com/js/jquery.min',
        'index':'index'
    },
        shim:{

        }
});

require(['index']);
</script>

require.config() 是用于配置參數的核心方法，它接收一個有固定格式與屬性的對象作為參數，這個對象便是我們的配置對象。

在配置對象中 baseUrl 定義了基準目錄，它會與 paths中模塊的地址自動進行拼接，構成該模塊的實際地址，并且當配置參數是通過script標簽嵌入到html文件中時，baseUrl默認的指向路徑就是該html文件所處的地址。

paths 屬性的值也是一個對象，該對象保存的就是模塊key/value值。其中key便是模塊的名稱與ID，一般使用文件名來命名，而value則是模塊的地址，在requireJS中，當模塊是一個JS文件時，是可以省略 .js 的擴展名，比如 “index.js” 就可以直接寫成 “index” 。而當定義的模塊不需要與 baseUrl 的值進行拼接時，可以通過 "/" 與 http:// 以及 .js 的形式來繞過 baseUrl的設定。

shim 屬性
它的值是一個對象，可以用于聲明非標準模塊的依賴和返回值。
所謂的 “非標準模塊” 指的是那些不符合AMD規范的JS插件。

require.config({
    baseUrl:'js/',
    paths:{
        'jquery':'http://xxx.xxxx.com/js/jquery.min',
        'index':'index',
        'say':'say',
        'bar':'bar',
        'tools':'tools'
    },
    shim:{
        'tools':{
            deps:['bar'],
            exports:'tool'
        },
        'say':{
            deps:['./a','./b'],
            init:function(){
                return {
                    'sayBye':sayBye,
                    'sayHellow':sayHellow
                }
            }
        }
    }
});

require(['index']);

這里需要注意的是如果所加載的模塊文件是符合AMD規范，比如通過 define 進行定義的，那么require默認的優先級將是標準的，只有在不符合標準的情況下才會采用shim中定義的參數。

在 index 模塊執行時：

define(['jquery','tool','say'],function($,tool,say){
    tool.drag();
    say.sayHellow();
    say.sayBye();
})

上面的示例中，關于 shim 中有三個重要的屬性，它們分別是：

• deps: 用于聲明當前非標準模塊所依賴的其它模塊，值是一個數組，數組元素是模塊的名稱或者是ID。
• exports:用于定義非標準模塊的全局變量或者方法。值一般是一個字符串。
• init:用于初始，處理，非標準模塊的全局變量或者是方法，常用于當非標準模塊存在多個全局變量以及方法，值是一個函數。

//示例：
require.config({
    baseUrl:'js/',
    paths:{
        'jquery':'http://xxx.xxxx.com/js/jquery.min',
        'index':'index'
    }
});
require(['index']);

三、加載配置文件

<script src="js/require.js"></script>

四、定義模塊
在我們選擇requireJS來模塊化開發我們的項目或者頁面時，就要明確的知道我們以后所編寫的代碼或者是某段功能，都是要放在一個個定義好的模塊中。
下面是requireJS定義模塊的方法格式：

define([id,deps,] callback);

• ID:模塊的ID，默認的便是文件名，一般無需使用者自己手動指定。
• deps:當前模塊所以依賴的模塊數組，數組的每個數組元素便是模塊名或者叫模塊ID。
• callback:模塊的回調方法，用于保存模塊具體的功能與代碼，而這個回調函數又接收一個或者多個參數，這些參數會與模塊數組的每個數組元素一一對應，即每個參數保存的是對應模塊返回值。

//示例
//index.js
define(['jquery','./utils'], function($) {
    $(function() {
        alert($);
    });
});

從上面的示例中我們可以看出 index 模塊中，依賴了 'jquery' 模塊，并且在模塊的回調函數中，通過 $ 形參來接收 jquery模塊返回的值，除了 jquery 模塊，index模塊還依賴了 utils 模塊，因為該模塊沒有在配置文件中定義，所以這里以附加路徑的形式單獨引入進來的。

五、載入模塊
在說載入模塊之前，我們先聊聊“模塊依賴”。模塊與模塊之間存在著相互依賴的關系，因此就決定了不同的加載順序，比如模塊A中使用到的一個函數是定義在模塊B中的，我們就可以說模塊A依賴模塊B，同時也說明了在載入模塊時，其順序也是先模塊A，再模塊B。
在require中，我們可以通過 require() 方法去載入模塊。其使用格式如下：

require(deps[,callback]);

• deps:所要載入的模塊數組。
• callback:模塊載入后執行的回調方法。

require.config({
        paths:{
                'index':'index'
        }
});
require(['index']);

requireJS 通過 require([]) 方法去載入模塊，并執行模塊中的回調函數，其值是一個數組，數組中的元素便是要載入的模塊名稱也就是模塊ID，這里我們通過 require(['index']) 方法載入了 index 這個模塊，又因為該模塊依賴了 jquery 模塊，所以接著便會繼續載入jquery模塊，當jquery模塊加載完成后，便會將自身的方法傳遞給形參 $ 最后執行模塊的回調方法，alert出$參數具體內容

六、模塊的返回值
require中定義的模塊不僅可以返回一個對象作為結果，還可以返回一個函數作為結果。

// utils.js
define(function(require,exports,modules){
    function sayHellow(params){
        alert(params);
    }

    return sayHellow
});

// index.js
define(function(require,exports,modules){
    var sayHellow = require('utils');
    sayHellow('hellow World');
})

如果通過return 返回多種結果的情況下：

// utils.js
define(function(require,exports,modules){
    function sayHellow(params){
        alert(params);
    }

    function sayBye(){
        alert('bye-bye！');
    }

    return {  //return一個對象出來
        'sayHellow':sayHellow,
        'sayBye':sayBye
    }
});

// index.js
define(function(require,exports,modules){
    var utils = require('utils');
    utils.sayHellow('hellow World');
})

這里有一個注意的地方，那就是非依賴性的模塊，可以直接在模塊的回調函數中，加入以下三個參數：

• require:加載模塊時使用。
• exports:導出模塊的返回值。
• modules:定義模塊的相關信息以及參數。

總結：
1、在首頁通過<script src="js/require.js"></script>引入require.js
2、通過define([id,deps,] callback);定義模塊，

• ID:模塊的ID，默認的便是文件名，一般無需使用者自己手動指定。即ID不用管
• deps:當前模塊所以依賴的模塊數組，數組的每個數組元素便是模塊名或者叫模塊ID。
• callback:模塊的回調方法，用于保存模塊具體的功能與代碼，而這個回調函數又接收一個或者多個參數，這些參數會與模塊數組的每個數組元素一一對應，即每個參數保存的是對應模塊返回值。
• 模塊的返回值

3、通過require.config配置模塊的路徑，
4、通過require(deps[,callback]);引入模塊

• deps:所要載入的模塊數組。
• callback:模塊載入后執行的回調方法。