requireJS

RequireJS是一個(gè)工具庫(kù)，主要用于客戶(hù)端的模塊管理。它可以讓客戶(hù)端的代碼分成一個(gè)個(gè)模塊，實(shí)現(xiàn)異步或動(dòng)態(tài)加載，從而提高代碼的性能和可維護(hù)性。它的模塊管理遵守AMD規(guī)范。

使用requireJS的好處

• 異步加載
• 按需加載
• 模塊依賴(lài)管理
• 版本管理
  ... ...

requireJS的用法

一、加載require.js

首先是去官網(wǎng)下載require.js最新版本，在頁(yè)面上引入

xxx.html

<script src="js/require.js" defer async="true" data-main="js/main"></script>

1. async屬性表明這個(gè)文件需要異步加載，避免網(wǎng)頁(yè)失去響應(yīng)。IE不支持這個(gè)屬性，只支持defer，所以把defer也寫(xiě)上。
2. data-main屬性指定的js文件會(huì)在require.js加載成功后第一個(gè)加載，是網(wǎng)頁(yè)的入口代碼。它一般用來(lái)對(duì)requirejs進(jìn)行配置，并且載入真正的程序模塊。
3. require.js默認(rèn)的文件后綴名是js，所以可以把main.js簡(jiǎn)寫(xiě)成main。

二、全局配置

main.js

require.config({
    paths : {
        "jquery" : ["https://cdn.bootcss.com/jquery/1.12.4/jquery.min", "js/jquery"],     // 如果第一個(gè)cdn文件加載失敗，就會(huì)加載第二個(gè)本地文件
        "a" : "js/a",
        "b" : "js/b"
    },
    shim : {
        "bootstrap": ["jquery"],        
        "bootstrapTable": {
            deps: ["bootstrap"],         // deps數(shù)組，表明該模塊的依賴(lài)性。
            exports: "bootstrapTable"    // exports值（輸出的變量名），表明這個(gè)模塊外部調(diào)用時(shí)的名稱(chēng)；
        }
    }
})

require.config 常用配置參數(shù)選項(xiàng):

• baseUrl: 用于加載模塊的根路徑。(require會(huì)默認(rèn)的將data-main指定的js為根路徑)
• paths: 聲明模塊名稱(chēng)和文件路徑
• shim: require.js加載的模塊，必須是按照AMD規(guī)范、用define()函數(shù)定義的模塊。但是有時(shí)候需要加載非AMD規(guī)范的js，shim參數(shù)能夠幫助我們以AMD模塊的方式，使用那些不符合AMD規(guī)范的模塊。

三、定義模塊

define方法用于定義模塊，requireJS要求每個(gè)模塊放在一個(gè)單獨(dú)的文件里。

獨(dú)立模塊

如果被定義的模塊是一個(gè)獨(dú)立模塊，不需要依賴(lài)任何其他模塊，可以直接用define方法生成。

//定義對(duì)象
define({
    num: 0,
    method: function() {}
});

// 定義方法
define(function () {
    return {
        method1: function() {},
        method2: function() {},
    };
});

非獨(dú)立模塊

如果被定義的模塊需要依賴(lài)其他模塊，則define方法必須采用下面的格式。

define(['a'], function(a){
　　　　function foo(){
　　　　　　a.fn();
　　　　}
　　　　return {
　　　　　　foo : foo
　　　　};
});

define()函數(shù)的第一個(gè)參數(shù)，必須是一個(gè)數(shù)組，指明該模塊的依賴(lài)性。當(dāng)require()函數(shù)加載上面這個(gè)模塊的時(shí)候，就會(huì)先加載a.js文件。

命名模塊

前面兩個(gè)都是匿名模塊，可以在 requirejs.config 里，使用任意一個(gè)模塊名來(lái)引用它。某些庫(kù)（例如jquery）已經(jīng)聲明了一個(gè)確定的模塊名:

define('jquery', [], function() { ... });

所以在 requirejs.config 里配置模塊名時(shí)，只能用申明好的模塊名。

自定義命名模塊

define('myMod',['jquery', 'bootstrap'], function($, undefined){
　　　　var Controller = {
            method1: function() {},
            method2: function() {},
            method3: function() {}
       }
　　　　return Controller;
});

四、加載模塊

require方法用于調(diào)用模塊。

require( ['myMod'], function( mod ) {
    mod.method1();
});