前面的話

　　由CommonJS組織提出了許多新的JavaScript架構(gòu)方案和標(biāo)準(zhǔn)，希望能為前端開(kāi)發(fā)提供統(tǒng)一的指引。AMD規(guī)范就是其中比較著名一個(gè)，全稱是Asynchronous Module Definition，即異步模塊加載機(jī)制。完整描述了模塊的定義，依賴關(guān)系，引用關(guān)系以及加載機(jī)制。而AMD規(guī)范的作者親自實(shí)現(xiàn)了符合AMD規(guī)范的requireJS。本文將詳細(xì)介紹AMD及requireJS

AMD規(guī)范

　　AMD(Asynchronous Module Definition)翻譯為異步模塊定義。異步強(qiáng)調(diào)的是，在加載模塊以及模塊所依賴的其它模塊時(shí)，都采用異步加載的方式，避免模塊加載阻塞了網(wǎng)頁(yè)的渲染進(jìn)度

　　AMD作為一個(gè)規(guī)范，只需定義其語(yǔ)法API，而不關(guān)心其實(shí)現(xiàn)。AMD規(guī)范簡(jiǎn)單到只有一個(gè)API，即define函數(shù)

define([module-name?], [array-of-dependencies?], [module-factory-or-object]);

　　module-name: 模塊標(biāo)識(shí)，可以省略

　　array-of-dependencies: 所依賴的模塊，可以省略

　　module-factory-or-object: 模塊的實(shí)現(xiàn)，或者一個(gè)JavaScript對(duì)象

　　define函數(shù)具有異步性。當(dāng)define函數(shù)執(zhí)行時(shí)，首先會(huì)異步的去調(diào)用第二個(gè)參數(shù)中列出的依賴模塊，當(dāng)所有的模塊被載入完成之后，如果第三個(gè)參數(shù)是一個(gè)回調(diào)函數(shù)則執(zhí)行；然后告訴系統(tǒng)模塊可用，也就通知了依賴于自己的模塊自己已經(jīng)可用

加載

　　使用require.js的第一步，是先去官方網(wǎng)站下載最新版本。下載后，假定把它放在js子目錄下面，就可以加載了

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

　　HTML中的script標(biāo)簽在加載和執(zhí)行過(guò)程中會(huì)阻塞網(wǎng)頁(yè)的渲染，所以一般要求盡量將script標(biāo)簽放置在body元素的底部，以便加快頁(yè)面顯示的速度，還有一種方式就是通過(guò)異步加載的方式來(lái)加載js文件，這樣可以避免js文件對(duì)html渲染的阻塞

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

入口文件

　　require.js在加載的時(shí)候會(huì)檢查data-main屬性，當(dāng)requireJS自身加載執(zhí)行后，就會(huì)再次異步加載data-main屬性指向的main.js。這個(gè)main.js是當(dāng)前網(wǎng)頁(yè)所有邏輯的入口，理想情況下，整個(gè)網(wǎng)頁(yè)只需要這一個(gè)script標(biāo)記，利用requireJS加載依賴的其它文件

<script data-main="scripts/main" src="js/require.js"></script>

　　[注意]在main.js中所設(shè)置的腳本是異步加載的。所以如果在頁(yè)面中配置了其它JS加載，則不能保證它們所依賴的JS已經(jīng)加載成功

<script data-main="scripts/main" src="js/require.js"></script> <script src="js/other.js"></script>

【內(nèi)部機(jī)制】

　　在RequireJS內(nèi)部，會(huì)使用head.appendChild()將每一個(gè)模塊依賴加載為一個(gè)script標(biāo)簽。RequireJS等待所有的依賴加載完畢，計(jì)算出模塊定義函數(shù)正確調(diào)用順序，然后依次調(diào)用它們

模塊

　　模塊不同于傳統(tǒng)的腳本文件，它良好地定義了一個(gè)作用域來(lái)避免全局名稱空間污染。它可以顯式地列出其依賴關(guān)系，并以函數(shù)(定義此模塊的那個(gè)函數(shù))參數(shù)的形式將這些依賴進(jìn)行注入，而無(wú)需引用全局變量。RequireJS的模塊是模塊模式的一個(gè)擴(kuò)展，其好處是無(wú)需全局地引用其他模塊

　　RequireJS的模塊語(yǔ)法允許它盡快地加載多個(gè)模塊，雖然加載的順序不定，但依賴的順序最終是正確的。同時(shí)因?yàn)闊o(wú)需創(chuàng)建全局變量，甚至可以做到在同一個(gè)頁(yè)面上同時(shí)加載同一模塊的不同版本

　　一個(gè)文件應(yīng)該只定義1個(gè)模塊。多個(gè)模塊可以使用內(nèi)置優(yōu)化工具將其組織打包

　　如果我們的代碼不依賴任何其他模塊，那么可以直接寫入javascript代碼

//main.js
console.log(1);

　　但這樣的話，就沒(méi)必要使用require.js了。真正常見(jiàn)的情況是，主模塊依賴于其他模塊，這時(shí)就要使用AMD規(guī)范定義的的require()函數(shù)

// main.js require(['moduleA'], function(a){ 　　console.log(a); }); //moduleA.js define(function(){     return 1; })

　　這里拋出一個(gè)問(wèn)題，為什么主模塊使用的是require()函數(shù)，而模塊moduleA使用define()函數(shù)呢？因?yàn)閐efine()定義的模塊可以被調(diào)用，而require()不可以。主模塊main.js是入口文件，需要調(diào)用別的模塊，而不需要被別的模塊調(diào)用，所以使用require()或define()都可以。而moduleA需要被調(diào)用，所以只能使用define()

　　如果把moduleA.js中的define()方法改為require()方法，則返回undefined

// main.js require(['moduleA'], function(a){ 　　console.log(a); }); //moduleA.js require(function(){     return 1; })

【簡(jiǎn)單的值對(duì)】

　　上面的模塊moduleA中，回調(diào)函數(shù)返回了一個(gè)數(shù)字。而實(shí)際上，模塊可以有多種形式，比如一個(gè)簡(jiǎn)單的值對(duì)

define({     color: "black",     size: "unisize" });

　　返回的結(jié)果如下：

【函數(shù)式定義】

　　如果一個(gè)模塊沒(méi)有任何依賴，但需要一個(gè)做setup工作的函數(shù)，則在define()中定義該函數(shù)，并將其傳給define()

define(function () {     //Do setup work here     return {         color: "black",         size: "unisize"     } });

　　返回的結(jié)果如下：

【存在依賴的函數(shù)式定義】

　　如果模塊存在依賴：則第一個(gè)參數(shù)是依賴的名稱數(shù)組；第二個(gè)參數(shù)是函數(shù)，在模塊的所有依賴加載完畢后，該函數(shù)會(huì)被調(diào)用來(lái)定義該模塊，因此該模塊應(yīng)該返回一個(gè)定義了本模塊的object。依賴關(guān)系會(huì)以參數(shù)的形式注入到該函數(shù)上，參數(shù)列表與依賴名稱列表一一對(duì)應(yīng)

//moduleA.js define(['moduleB'], function(b) {     var num = 10;     return b.add(num);     } ); ////moduleB.js define({     add: function(n){         return n+1;     } });

【命名模塊】

　　define()中可以包含一個(gè)模塊名稱作為首個(gè)參數(shù)

//moduleA.js define("moduleA",['moduleB'], function(b) {     var num = 10;     return b.add(num);     } );

　　這些常由優(yōu)化工具生成。也可以自己顯式指定模塊名稱，但這使模塊更不具備移植性——就是說(shuō)若將文件移動(dòng)到其他目錄下，就得重命名。一般最好避免對(duì)模塊硬編碼，而是交給優(yōu)化工具去生成。優(yōu)化工具需要生成模塊名以將多個(gè)模塊打成一個(gè)包，加快到瀏覽器的載入速度

路徑配置

　　html中的base元素用于指定文檔里所有相對(duì)URL地址的基礎(chǔ)URL，requireJS的baseUrl跟這個(gè)base元素起的作用是類似的，由于requireJS總是動(dòng)態(tài)地請(qǐng)求依賴的JS文件，所以必然涉及到一個(gè)JS文件的路徑解析問(wèn)題，requireJS默認(rèn)采用一種baseUrl + moduleID的解析方式，requireJS對(duì)它的處理遵循如下規(guī)則：

　　1、在沒(méi)有使用data-main和config的情況下，baseUrl默認(rèn)為當(dāng)前頁(yè)面的目錄

　　2、在有data-main的情況下，main.js前面的部分就是baseUrl，比如上面的js/

　　3、在有config的情況下，baseUrl以config配置的為準(zhǔn)

　　上述三種方式，優(yōu)先級(jí)由低到高排列

　　RequireJS以一個(gè)相對(duì)于baseUrl的地址來(lái)加載所有的代碼。頁(yè)面頂層script標(biāo)簽含有一個(gè)特殊的屬性data-main，require.js使用它來(lái)啟動(dòng)腳本加載過(guò)程，而baseUrl一般設(shè)置到與該屬性相一致的目錄

<script data-main="js/main.js" src="scripts/require.js"></script>

　　在模塊章節(jié)的示例中，代碼如下所示

// main.js require(['moduleA'], function(a){ 　　console.log(a); }); //moduleA.js define(function(){     return 1; })

　　入口文件main.js依賴于moduleA，直接寫成['moduleA']，默認(rèn)情況下，require.js假定moduleA與main.js在同一個(gè)目錄，即'js/moduleA.js'，文件名為moduleA.js，然后自動(dòng)加載

　　使用require.config()方法，我們可以對(duì)模塊的加載行為進(jìn)行自定義。require.config()就寫在主模塊（main.js）的頭部。參數(shù)就是一個(gè)對(duì)象，這個(gè)對(duì)象的paths屬性指定各個(gè)模塊的加載路徑

　　下面在demo文件夾下新建一個(gè)test文件夾，并在test文件夾下新建一個(gè)moduleA.js文件，內(nèi)容如下

//moduleA.js define(function(){     return 2; })

　　而在原來(lái)的js文件夾下，依然存在一個(gè)moduleA.js文件，內(nèi)容如下

//moduleA.js define(function() {     return 1; });

　　當(dāng)js文件夾下的main.js進(jìn)行config配置時(shí)

// main.js require.config({     baseUrl: 'test' }) require(['moduleA'], function(a){     console.log(a); });

　　 結(jié)果為2，說(shuō)明識(shí)別的是'test/moduleA.js'文件

　　當(dāng)js文件夾下的main.js不進(jìn)行config配置時(shí)

// main.js require(['moduleA'], function(a){     console.log(a); });

　　結(jié)果為1，說(shuō)明識(shí)別的是'js/moduleA.js'文件

　　RequireJS默認(rèn)假定所有的依賴資源都是js腳本，因此無(wú)需在module ID上再加".js"后綴，RequireJS在進(jìn)行module ID到path的解析時(shí)會(huì)自動(dòng)補(bǔ)上后綴 

　　如果一個(gè)模塊的路徑比較深，或者文件名特別長(zhǎng)，比如'js/lib/moduleA.min.js'，則可以使用config配置對(duì)象中的paths屬性

// main.js require.config({     paths:{         'moduleA':'lib/moduleA.min'     } }) require(['moduleA'], function(a){     console.log(a); }); //moduleA-min.js define(function(){     return 3; })

　　結(jié)果為3

　　要注意的是，這里的paths的'moduleA'設(shè)置的是'lib/moduleA.min'，而不是'js/lib/moduleA.min'，是因?yàn)閞equireJS中的文件解析是一個(gè)"baseUrl + paths"的解析過(guò)程

　　在index.html的入口文件設(shè)置的是'js/main'，所以baseURL是'js'。因此'baseUrl + paths' = 'js/lib/moduleA.min'

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

　　如果在config配置對(duì)象中設(shè)置了baseUrl，則以此為準(zhǔn)

// main.js require.config({     baseUrl: 'js/lib',     paths:{         'moduleA':'moduleA.min'     } }) require(['moduleA'], function(a){     console.log(a); });

　　結(jié)果同樣為3，baseURL是'js/lib'，paths是'moduleA.min'。因此'baseUrl + paths' = 'js/lib/moduleA.min'

　　如果一個(gè)module ID符合下述規(guī)則之一，其ID解析會(huì)避開(kāi)常規(guī)的"baseUrl + paths"配置，而是直接將其加載為一個(gè)相對(duì)于當(dāng)前HTML文檔的腳本：1、以 ".js" 結(jié)束；2、包含 URL 協(xié)議，如 "http:" or "https:"

　　如下所示，require()函數(shù)所依賴的模塊路徑為'js/moduleA.js'

// main.js require.config({     baseUrl: 'js/lib',     paths:{         'moduleA':'moduleA.min'     } }) require(['js/moduleA.js'], function(a){     console.log(a); });

　　而該文件的代碼如下，路徑為'js/moduleA.js'，而不是'js/lib/moduleA.min'，所以，最終結(jié)果為1

//moduleA.js define(function() {     return 1; });

　　一般來(lái)說(shuō)，最好還是使用baseUrl及"paths" config去設(shè)置module ID。它會(huì)帶來(lái)額外的靈活性，如便于腳本的重命名、重定位等。 同時(shí)，為了避免凌亂的配置，最好不要使用多級(jí)嵌套的目錄層次來(lái)組織代碼，而是要么將所有的腳本都放置到baseUrl中，要么分置為項(xiàng)目庫(kù)/第三方庫(kù)的一個(gè)扁平結(jié)構(gòu)，如下

www/     index.html     js/         app/             sub.js         lib/             jquery.js             canvas.js         main.js

CommonJS

　　前面提到過(guò)，commonJS主要應(yīng)用于服務(wù)器端編程，如nodejs。使用打包工具Browserify可以對(duì)CommonJS進(jìn)行格式轉(zhuǎn)換，使其可以在瀏覽器端進(jìn)行

　　而requireJS支持一種簡(jiǎn)單包裝CommonJS的方式，只要在commonJS代碼的外層簡(jiǎn)單包裹一層函數(shù)，就可以在瀏覽器端直接運(yùn)行

define(function(require, exports, module) { });

　　如果該模塊還依賴其他模塊，如依賴模塊moduleA，則代碼如下

define(['moduleA'],function(require, exports, module) { });

　　a.js和b.js的commonJS形式的代碼如下

// a.js var a = 100; module.exports.a = a; // b.js var result = require('./a'); console.log(result.a);

　　index.html直接引用b.js會(huì)報(bào)錯(cuò)，提示require沒(méi)有被定義

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

　　將a.js和b.js進(jìn)行改造之后，代碼如下

// a.js define(function(require, exports, module) {     var a = 100;     module.exports.a = a; }); // b.js define(function(require, exports, module) {     var result = require('./a');     console.log(result.a); });

　　index.html將入口文件設(shè)置為'js/b'，則結(jié)果為100

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

其他配置

　　在requireJS中，除了路徑配置之外，還有一些其他配置

【配置設(shè)置】

　　在前面的例子中，我們配置requireJS中的路徑是通過(guò)入口文件main.js中的config對(duì)象來(lái)配置的。實(shí)際上，不通過(guò)入口文件，也可以進(jìn)行requireJS的配置

　　1、在index.html文件嵌入javascript代碼

　　在HTML文件中，加載requireJS文件之后，立即對(duì)requireJS進(jìn)行配置，相當(dāng)于將main.js文件變?yōu)閮?nèi)嵌的javascript文件

<!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title>Document</title> </head> <body> <script src="require.js"></script> <script> require.config({     baseUrl: 'js/lib',     paths:{         'moduleA':'moduleA.min'     } })     require(['moduleA'], function(a){     console.log(a); }); </script> </body> </html>

　　2、將配置作為全局變量"require"在require.js加載之前進(jìn)行定義，它會(huì)被自動(dòng)應(yīng)用

　　這里有一個(gè)問(wèn)題是，如果require作為全局變量被提前定義，則data-main入口文件，是以baseUrl為基礎(chǔ)進(jìn)行設(shè)置的

　　[注意]使用 var require = {} 的形式而不是 window.require = {}的形式。后者在IE中運(yùn)行不正常

<!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title>Document</title> </head> <body> <script> var require = {     baseUrl: 'js/lib',     paths:{         'moduleA':'moduleA.min'     }     }     </script> <script src="require.js" data-main="../main"></script> </body> </html>

【shim】

　　shim屬性為那些沒(méi)有使用define()來(lái)聲明依賴關(guān)系、設(shè)置模塊的"瀏覽器全局變量注入"型腳本做依賴和導(dǎo)出配置，即加載非規(guī)范的模塊

　　舉例來(lái)說(shuō)，underscore和backbone這兩個(gè)庫(kù)，都沒(méi)有采用AMD規(guī)范編寫。如果要加載它們的話，必須先定義它們的特征。具體來(lái)說(shuō)，每個(gè)模塊要定義（1）exports值（輸出的變量名），表明這個(gè)模塊外部調(diào)用時(shí)的名稱；（2）deps數(shù)組，表明該模塊的依賴性

　　通過(guò)如下配置后，現(xiàn)在可以通過(guò)_調(diào)用underscore的api，使用Backbone來(lái)調(diào)用backbone的api

　　require.config({ 　　　　shim: { 　　　　　　'underscore':{ 　　　　　　　　exports: '_' 　　　　　　}, 　　　　　　'backbone': { 　　　　　　　　deps: ['underscore', 'jquery'], 　　　　　　　　exports: 'Backbone' 　　　　　　} 　　　　} 　　});

　　jQuery的插件可以如下這樣定義，現(xiàn)在可以通過(guò)jQuery.fn.scroll來(lái)調(diào)用該插件的api

　　shim: { 　　　　'jquery.scroll': { 　　　　　　deps: ['jquery'], 　　　　　　exports: 'jQuery.fn.scroll' 　　　　} 　　}

插件

　　require.js還提供一系列插件，實(shí)現(xiàn)一些特定的功能

【dom ready】　

　　RequireJS加載模塊速度很快，很有可能在頁(yè)面DOM Ready之前腳本已經(jīng)加載完畢。需要與DOM交互的工作應(yīng)等待DOM Ready?，F(xiàn)代的瀏覽器通過(guò)DOMContentLoaded事件來(lái)知會(huì)

　　但是，不是所有的瀏覽器都支持DOMContentLoaded。domReady模塊實(shí)現(xiàn)了一個(gè)跨瀏覽器的方法來(lái)判定何時(shí)DOM已經(jīng)ready

// main.js require(['domready!'], function(){     console.log('ready'); });

【text】

　　text插件可以用來(lái)加載如.html、.css等文本文件，可以通過(guò)該插件來(lái)實(shí)現(xiàn)完整組件(結(jié)構(gòu)+邏輯+樣式)的組件化開(kāi)發(fā)

require(["some/module", "text!some/module.html", "text!some/module.css"],     function(module, html, css) {     } );

http://www.cnblogs.com/xiaohuochai/p/6847942.html

延伸閱讀

• 學(xué)會(huì)用requirejs，5分鐘足矣 2017-07-25
• requireJS 源碼（三） data-main 的加載實(shí)現(xiàn) 2017-07-19
• 基于requirejs和angular搭建spa應(yīng)用 2017-07-18
• 從 RequireJs 源碼剖析腳本加載原理 2017-07-14
• ASP.NET MVC Bundling and RequireJS 2017-07-04
• requireJS 從概念到實(shí)戰(zhàn) 2017-06-29
• 關(guān)于前后端同構(gòu)，我的一點(diǎn)思路和心得（vue、nodejs、react、模版、amd） 2017-06-15
• 使用RequireJS并實(shí)現(xiàn)一個(gè)自己的模塊加載器 (一) 2017-04-13
• 使用grunt完成requirejs的合并壓縮和js文件的版本控制 2017-03-02
• angularJS+requireJS實(shí)現(xiàn)controller及directive的按需加載 2017-02-20

requireJS 源碼（三） data-main 的加載實(shí)現(xiàn)