JS模組化開發(requireJS)

JS模組化開發(requireJS)

使用模組化開發的好處：
通過 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/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檔案。<喎?http://www.bkjia.com/kf/ware/vc/" target="_blank" class="keylink">vcD4NCjxwPjxzdHJvbmc+vNPU2LfHuea3trXExKO/6Twvc3Ryb25nPjwvcD4NCjxwPsDtwtvJz6OscmVxdWlyZS5qc7zT1Ni1xMSjv+mjrLHY0OvKx7C01dVBTUS55re2oaLTw2RlZmluZSgpuq/K/bao0uW1xMSjv+mho7WrysfKtbzKyc+jrMvkyLvS0b6t09DSu7K/t9bB99DQtcS6r8r9v+KjqLHIyOdqUXVlcnmjqbf7us9BTUS55re2o6y4/LbgtcS/4rKisru3+7rPLnJlcXVpcmUuanPE3Lm7vNPU2LfHuea3trXExKO/6aOst723qMrHo6zU2tPDcmVxdWlyZSgpvNPU2Naux7CjrNKqz8jTw3JlcXVpcmUuY29uZmlnKCm3vbeotqjS5cv8w8e1xNK70KnM2NX3oaM8YnIgLz4NCr7ZwP3AtMu1o6x1bmRlcnNjb3Jlus1iYWNrYm9uZdXiwb249r/io6y2vMO709CyydPDQU1Euea3trHg0LSho8jnufvSqrzT1NjL/MPHtcS7sKOssdjQ68/ItqjS5cv8w8e1xMzY1fehozxiciAvPg0KPGltZyBhbHQ9"這裡寫圖片描述" src="http://www.bkjia.com/uploads/allimg/160414/04502520Y-14.png" title="\" />
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 等庫及其外掛程式