模塊加載器的概念可能稍微接觸過前端開發的童鞋都不會陌生，通過模塊加載器可以有效的解決這些問題：

JS文件的依賴關系。

通過異步加載優化script標簽引起的阻塞問題

可以簡單的以文件為單位將功能模塊化并實現復用

主流的JS模塊加載器有requireJS，SeaJS等，加載器之間可能會因為遵循的規范不同有微妙的差別，從純用戶的角度出發，之所以選requireJS而不是SeaJS主要是因為：

功能實現上兩者相差無幾，沒有明顯的性能差異或重大問題。

文檔豐富程度上，requireJS遠遠好于SeaJS，就拿最簡單的加載jQuery和jQuery插件這回事，雖然兩者的實現方法相差無幾，但requireJS就有可以直接拿來用的Demo，SeaJS還要讀文檔自己慢慢折騰。一些問題的解決上，requireJS為關鍵詞也更容易找到答案。

requireJS 加載jQuery + jQuery插件

可能對于一般Web App來說，引入jQuery及相關插件的概率是最大的，requireJS也親切的給出了相應的解決方案及動態加載jQuery及插件的文檔及實例代碼。

在最新的jQuery1.9.X中，jQuery已經在最后直接將自己注冊為一個AMD模塊，即是說可以直接被requireJS作為模塊加載。如果是加載舊版的jQuery有兩種方法：

1. 讓jQuery先于requireJS加載

2. 對jQuery代碼稍做一點處理，在jQuery代碼包裹一句：

define(["jquery"], function($) {

// $ is guaranteed to be jQuery now */

});

requireJS的示例中，直接將requireJS與jQuery合并為一個文件，如果是采用jQuery作為核心庫的話推薦這種做法。

同樣對于jQuery插件來說也有兩種方法

1. 在插件外包裹代碼

define(["jquery"], function($){

// Put here the plugin code.

});

2. 在使用reuqireJS代碼加載前注冊插件(比如在main.js)中

requirejs.config({

"shim": {

"jquery-cookie" : ["jquery"]

}

});

requireJS加載第三方類庫

在實例的App中還用到了jQuery以外的第三方類庫，如果類庫不是一個標準的AMD模塊而又不想更改這些類庫的代碼，同樣需要提前進行定義：

require.config({

paths: {

'underscore': 'vendor/underscore'

},

shim: {

underscore: {

exports: '_'

}

}

});

CSS文件的模塊化處理

在requireJS中，模塊的概念僅限于JS文件，如果需要加載圖片、JSON等非JS文件，requireJS實現了一系列加載插件。

但是遺憾的是requireJS官方沒有對CSS進行模塊化處理，而我們在實際項目中卻往往能遇到一些場景，比如一個輪播的圖片展示欄，比如高級編輯器等等。幾乎所有的富UI組件都會由JS與CSS兩部分構成，而CSS之間也存在著模塊的概念以及依賴關系。

為了更好的與requireJS整合，這里采用require-css來解決CSS的模塊化與依賴問題。

require-css是一個requireJS插件，下載后將css.js與normalize.js放于main.js同級即可默認被加載，比如在我們的項目中需要加載jQuery Mobile的css文件，那么可以直接這樣調用：

require(['jquery', 'css!../css/jquery.mobile-1.3.0.min.css'], function($) {

});

不過由于這個CSS本質上是屬于jQuery Mobile模塊的一部分，更好的做法是將這個CSS文件的定義放在jQuery Mobile的依賴關系中，最終我們的requireJS定義部分為：

require.config({

paths: {

'jquerymobile': 'vendor/jquery.mobile-1.3.0',

'jstorage' : 'vendor/jstorage',

'underscore': 'vendor/underscore'

},

shim: {

jquerymobile : {

deps: [

'css!../css/jquery.mobile-1.3.0.min.css'

]

},

underscore: {

exports: '_'

}

}

});

在使用模塊時，只需要：

require(['jquery', 'underscore', 'jquerymobile', 'jstorage'], function($, _) {

});

jQuery Mobile的CSS文件就會被自動加載，這樣CSS與JS就被整合為一個模塊了。同理其他有復雜依賴關系的模塊也可以做類似處理，requireJS會解決依賴關系的邏輯。

數據源的加載與等待

Web App一般都會動態加載后端的數據，數據格式一般可以是JSON、JSONP也可以直接是一個JS變量。這里以JS變量為例：

var restaurants = [

{

"name": "KFC"

},

{

"name": "7-11"

},

{

"name": "成都小吃"

}

]

載入這段數據：

$.getScript('data/restaurants.json', function(e){

var data = window.restaurants;

alert(data[0].name); //KFC

});

單一的數據源確實很簡單，但是往往一個應用中會有多個數據源，比如在這個實例App中UI就需要載入用戶信息、餐廳信息、訂餐信息三種數據后才能工作。如果僅僅靠多層嵌套回調函數的話，可能代碼的耦合就非常重了。

為了解決多個數據加載的問題，我習慣的解決方法是構造一個dataReady事件響應機制。

var foodOrder = {

//數據載入后要執行的函數暫存在這里

dataReadyFunc : []

//數據源URL及載入狀態

, dataSource : [

{ url : 'data/restaurants.json', ready : false, data : null },

{ url : 'data/users.json', ready : false, data : null },

{ url : 'data/foods.json', ready : false, data : null }

]

//檢查數據源是否全部載入完畢

, isReady : function(){

var isReady = true;

for(var key in this.dataSource){

if(this.dataSource[key].ready !== true){

isReady = false;

}

}

return isReady;

}

//數據源全部加載完畢，則逐一運行dataReadyFunc中存放的函數

, callReady : function(){

if(true === this.isReady()){

for(var key in this.dataReadyFunc){

this.dataReadyFunc[key]();

}

}

}

//供外部調用，會將外部輸入的函數暫存在dataReadyFunc中

, dataReady : function(func){

if (typeof func !== 'function') {

return false;

}

this.dataReadyFunc.push(func);

}

, init : function(){

var self = this;

var _initElement = function(key, url){

$.getScript(url, function(e){

//每次載入數據后，將數據存放于dataSource中，將ready狀態置為true，并調用callReady

self.dataSource[key].data = window[key];

self.dataSource[key].ready = true;

self.callReady();

});

}

for(var key in this.dataSource){

_initElement(key, this.dataSource[key].url);

}

}

}

用法為：

foodOrder.dataReady(function(){

alert(1);

});

foodOrder.init();

dataReady內的alert將會在所有數據載入完畢后開始執行。

這段處理的邏輯并不復雜，將所有要執行的方法通過dataReady暫存起來，等待數據全部加載完畢后再執行，更加復雜的場景此方法仍然通用。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。