**使用模塊化開發的好處：**? **通過 exports 暴露接口**。這意味著不需要命名空間了，更不需要全局變量。這是一種徹底的命名沖突解決方案。? **通過 require 引入依賴。**這可以讓依賴內置，開發者只需關心當前模塊的依賴，其他事情 Sea.js/ Require.js 都會自動處理好。對模塊開發者來說，這是一種很好的 關注度分離，能讓程序員更多地享受編碼的樂趣 實現JS模塊化開發，目前有兩個規范，一個是AMD規范，一個是CMD規范。? RequireJS遵循的是AMD規范。AMD推崇依賴前置。? SeaJS遵循的CMD規范。CMD推崇依賴就近(按需加載)? AMD:API根據使用范圍有區別，但使用同一個api接口? CMD:每個API的職責單一 **AMD規范的模塊風格**? 1、 定義模塊用module變量，它有一個方法declare? 2、 declare接受一個函數類型的參數，如稱為factory? 3、 factory有三個參數分別為require、exports、module,factory使用返回值和exports導出API. factory如果是對象類型，則將該對象作為模塊輸出 ~~~ define(function(require, exports, module) { var base = require('base'); exports.show = function() { // todo with modulebase } }); ~~~ 使用require獲取依賴模塊，使用exports導出API。? 除了require之外，AMD還保留了一個關鍵字require。require作為規范保留的全局標識符，可以實現為modile loader.? AMD的庫有RequireJS、curl、Dojo、Nodules等 requireJS和seaJS應該是各有千秋，但是因為我之前的一個項目中使用到了requireJS，所以我選擇對requireJS進行深入研究。? **requireJs**? （1）實現js文件的異步加載，避免網頁失去響應；? （2）管理模塊之間的依賴性，便于代碼的編寫和維護。 RequireJS用法介紹。? requirejs官網是：?[http://requirejs.org/](http://requirejs.org/)? 官方下載地址：[http://requirejs.org/docs/release/2.1.20/minified/require.js](http://requirejs.org/docs/release/2.1.20/minified/require.js)? 先下載require.js. require.config是用來定義別名的，在paths屬性下配置別名。然后通過requirejs(參數一，參數二)；參數一是數組，傳入我們需要引用的模塊名，第二個參數是個回調函數，回調函數傳入一個變量，代替剛才所引入的模塊。? require.js的加載? 1、在頁面底部加載。? 2、`<script src="js/require.js" defer async="true" ></script>`? async屬性表面這個文件需要異步加載，避免網頁失去響應，IE不支持async，需要使用defer屬性。? 加載require.js以后，下一步就要加載我們自己的代碼了。 ~~~ <script src="js/require.js" data-main="js/main"></script> ~~~ data-main屬性的作用是，指定網頁程序的主模塊。? **main.js文件**? ? 引入模塊也可以只寫require()。requirejs通過define()定義模塊，定義的參數上同。在此模塊內的方法和變量外部是無法訪問的，只有通過return返回才行.? require的項目中，所有需要引入的文件都不要寫.js的后綴名，因為requirejs會自動添加.js的后綴名。? **define 模塊**? ? 將該模塊命名為math.js保存。? define 定義模塊方法只能用在獨立的js文件中，不能在頁面中直接使用。? 否則會報 Mismatched anonymous define() module 錯誤。? **沒有依賴**? 如果定義的模塊不依賴其他模塊，則可以：? ? AMD推薦的風格通過返回一個對象做為模塊對象，CommonJS的風格通過對module.exports或exports的屬性賦值來達到暴露模塊對象的目的。? 當寫一個沒有任何依賴的模塊，并且只是返回一個對象包含一些功能函數? ? **循環依賴**? 在一些情況中，我們可能需要模塊moduleA和moduleA中的函數需要依賴一些應用。這就是循環依賴。? ? **math.js引入模塊方法**?  AMD規范定義的require()函數: ~~~ require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){ 　　　　// some code here 　　}); ~~~ require()函數接受兩個參數。第一個參數是一個數組，表示所依賴的模塊，上例就是[‘moduleA’, ‘moduleB’, ‘moduleC’]，即主模塊依賴這三個模塊；第二個參數是一個回調函數，當前面指定的模塊都加載成功后，它將被調用。加載的模塊會以參數形式傳入該函數，從而在回調函數內部就可以使用這些模塊。? require()異步加載moduleA，moduleB和moduleC，瀏覽器不會失去響應；它指定的回調函數，只有前面的模塊都加載成功后，才會運行，解決了依賴性的問題。? 假定主模塊依賴jquery、underscore和backbone這三個模塊，main.js就可以這樣寫： ~~~ require(['jquery', 'underscore', 'backbone'], function ($, _, Backbone){ 　　　　// some code here 　　}); ~~~ require.js會先加載jQuery、underscore和backbone，然后再運行回調函數。主模塊的代碼就寫在回調函數中。 **模塊的加載** 主模塊的依賴模塊是[‘jquery’, ‘underscore’, ‘backbone’]。默認情況下，require.js假定這三個模塊與main.js在同一個目錄，文件名分別為 jquery.js，underscore.js和backbone.js，然后自動加載。? 使用require.config()方法，我們可以對模塊的加載行為進行自定義。require.config()就寫在主模塊（main.js）的頭部。參數就是一個對象，這個對象的paths屬性指定各個模塊的加載路徑。? ? 上面的代碼給出了三個模塊的文件名，路徑默認與main.js在同一個目錄（js子目錄）。如果這些模塊在其他目錄，比如js/lib目錄，則有兩種寫法。一種是逐一指定路徑。? ? 另一種則是直接改變基目錄（baseUrl）。? ? 如果某個模塊在另一臺主機上，也可以直接指定它的網址，比如：? ? require.js要求，每個模塊是一個單獨的js文件。這樣的話，如果加載多個模塊，就會發出多次HTTP請求，會影響網頁的加載速度。因此，require.js提供了一個優化工具，當模塊部署完畢以后，可以用這個工具將多個模塊合并在一個文件中，減少HTTP請求數。? 在代碼中require一個文件多次，不會導致瀏覽器反復加載，即使反復require它，它也只加載一次。? CDN回退，當CDN加載不正確時，回退到本地相應的庫2，通過require.config實現。?  **AMD模塊的寫法** require.js加載的模塊，采用AMD規范。也就是說，模塊必須按照AMD的規定來寫。? 具體來說，就是模塊必須采用特定的define()函數來定義。如果一個模塊不依賴其他模塊，那么可以直接定義在define()函數之中。? //math.js? ? 加載方法如下：? ? 如果這個模塊還依賴其他模塊，那么define()函數的第一個參數，必須是一個數組，指明該模塊的依賴性。? ? 當require()函數加載上面這個模塊的時候，就會先加載myLib.js文件。 **加載非規范的模塊** 理論上，require.js加載的模塊，必須是按照AMD規范、用define()函數定義的模塊。但是實際上，雖然已經有一部分流行的函數庫（比如jQuery）符合AMD規范，更多的庫并不符合.require.js能夠加載非規范的模塊，方法是，在用require()加載之前，要先用require.config()方法定義它們的一些特征。? 舉例來說，underscore和backbone這兩個庫，都沒有采用AMD規范編寫。如果要加載它們的話，必須先定義它們的特征。? ? require.config()接受一個配置對象，這個對象除了有前面說過的paths屬性之外，還有一個shim屬性，專門用來配置不兼容的模塊。具體來說，每個模塊要定義（1）exports值（輸出的變量名），表明這個模塊外部調用時的名稱；（2）deps數組，表明該模塊的依賴性。?  **得到模塊的地址** ~~~ var path = require.toUrl("./style.css"); ~~~ **JSONP**  **require.js插件** require.js還提供一系列插件，實現一些特定的功能。? domready插件，可以讓回調函數在頁面DOM結構加載完成后再運行。? text和image插件，則是允許require.js加載文本和圖片文件? ? 類似的插件還有json和mdown，用于加載json文件和markdown文件。 **r.js壓縮** Require.js 提供一個腳本 r.js ，可以將所有使用到的模塊壓縮成一個腳本文件，r.js 可以使用node.js 來執行。? 在壓縮模塊前，需要寫一個配置文件，說明主模塊名，壓縮后的文件名，哪些模塊不要壓縮? 沒有使用 define 定義的模塊都不要壓縮，包括 jquery，backbone 等庫及其插件