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

JS文件的依賴關(guān)系。 通過異步加載優(yōu)化script標簽引起的阻塞問題 可以簡單的以文件為單位將功能模塊化并實現(xiàn)復(fù)用

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

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

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

requireJS 加載jQuery + jQuery插件

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

在最新的jQuery1.9.X中，jQuery已經(jīng)在最后直接將自己注冊為一個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實現(xiàn)了一系列加載插件。

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