require模塊化 AMD和CMD
在CommonJS中，有一個全局性方法require()，用于加載模塊。假定有一個數學模塊math.js，就可以像下面這樣加載。
|
1
|
var math = require('math');
|
然后，就可以調用模塊提供的方法：
|
1
2
|
var math = require('math');
math.add(2,3); // 5
|
AMD是”Asynchronous Module Definition”的縮寫，意思就是”異步模塊定義”。它采用異步方式加載模塊，模塊的加載不影響它后面語句的運行。所有依賴這個模塊的語句，都定義在一個回調函數中，等到加載完成之后，這個回調函數才會運行。
模塊必須采用特定的define()函數來定義。
|
1
|
define(id?, dependencies?, factory)
|
- id:字符串，模塊名稱(可選)
- dependencies: 是我們要載入的依賴模塊(可選)，使用相對路徑。,注意是數組格式
- factory: 工廠方法，返回一個模塊函數
如果一個模塊不依賴其他模塊，那么可以直接定義在define()函數之中。
|
1
2
3
4
5
6
7
8
9
|
// math.js
define(function (){
var add = function (x,y){
return x+y;
};
return {
add: add
};
});
|
如果這個模塊還依賴其他模塊，那么define()函數的第一個參數，必須是一個數組，指明該模塊的依賴性。
|
1
2
3
4
5
6
7
8
|
define(['Lib'], function(Lib){
function foo(){
Lib.doSomething();
}
return {
foo : foo
};
});
|
當require()函數加載上面這個模塊的時候，就會先加載Lib.js文件。
AMD也采用require()語句加載模塊，但是不同于CommonJS，它要求兩個參數：
|
1
|
require([module], callback);
|
第一個參數[module]，是一個數組，里面的成員就是要加載的模塊；第二個參數callback，則是加載成功之后的回調函數。如果將前面的代碼改寫成AMD形式，就是下面這樣：
|
1
2
3
|
require(['math'], function (math) {
math.add(2, 3);
});
|
math.add()與math模塊加載不是同步的，瀏覽器不會發生假死。所以很顯然，AMD比較適合瀏覽器環境。
目前，主要有兩個Javascript庫實現了AMD規范：require.js和curl.js。
CMD規范
CMD (Common Module Definition), 是seajs推崇的規范，CMD則是依賴就近，用的時候再require。它寫起來是這樣的：
|
1
2
3
4
|
define(function(require, exports, module) {
var clock = require('clock');
clock.start();
});
|
CMD與AMD一樣，也是采用特定的define()函數來定義,用require方式來引用模塊
|
1
|
define(id?, dependencies?, factory)
|
- id:字符串，模塊名稱(可選)
- dependencies: 是我們要載入的依賴模塊(可選)，使用相對路徑。,注意是數組格式
- factory: 工廠方法，返回一個模塊函數
|
1
2
3
4
5
|
define('hello', ['jquery'], function(require, exports, module) {
// 模塊代碼
});
|
如果一個模塊不依賴其他模塊，那么可以直接定義在define()函數之中。
|
1
2
3
|
define(function(require, exports, module) {
// 模塊代碼
});
|
注意：帶 id 和 dependencies 參數的 define 用法不屬于 CMD 規范，而屬于 Modules/Transport 規范。
CMD與AMD區別
AMD和CMD最大的區別是對依賴模塊的執行時機處理不同，而不是加載的時機或者方式不同，二者皆為異步加載模塊。
AMD依賴前置，js可以方便知道依賴模塊是誰，立即加載；
而CMD就近依賴，需要使用把模塊變為字符串解析一遍才知道依賴了那些模塊，這也是很多人詬病CMD的一點，犧牲性能來帶來開發的便利性，實際上解析模塊用的時間短到可以忽略。
使用require.config()方法，我們可以對模塊的加載行為進行自定義。require.config()就寫在主模塊（main.js）的頭部。參數就是一個對象，這個對象的paths屬性指定各個模塊的加載路徑。
require.config({
paths: {
"jquery": "jquery.min",
"underscore": "underscore.min",
"backbone": "backbone.min"}
});
上面的代碼給出了三個模塊的文件名，路徑默認與main.js在同一個目錄（js子目錄）。如果這些模塊在其他目錄，比如js/lib目錄，則有兩種寫法。一種是逐一指定路徑。
require.config({
paths: {
"jquery": "lib/jquery.min",
"underscore": "lib/underscore.min",
"backbone": "lib/backbone.min"}
});
另一種則是直接改變基目錄（baseUrl）。
require.config({
baseUrl: "js/lib",
paths: {
"jquery": "jquery.min",
"underscore": "underscore.min",
"backbone": "backbone.min"}
});
如果某個模塊在另一臺主機上，也可以直接指定它的網址，比如：
require.config({
paths: {
"jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min"
}
});
require.js要求，每個模塊是一個單獨的js文件。這樣的話，如果加載多個模塊，就會發出多次HTTP請求，會影響網頁的加載速度。因此，require.js提供了一個優化工具，當模塊部署完畢以后，可以用這個工具將多個模塊合并在一個文件中，減少HTTP請求數。
六、加載非規范的模塊
理論上，require.js加載的模塊，必須是按照AMD規范、用define()函數定義的模塊。但是實際上，雖然已經有一部分流行的函數庫（比如jQuery）符合AMD規范，更多的庫并不符合。那么，require.js是否能夠加載非規范的模塊呢？
回答是可以的。
這樣的模塊在用require()加載之前，要先用require.config()方法，定義它們的一些特征。
舉例來說，underscore和backbone這兩個庫，都沒有采用AMD規范編寫。如果要加載它們的話，必須先定義它們的特征。
require.config({
shim: {
'underscore':{
exports: '_'
},'backbone': {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
}}
});
require.config()接受一個配置對象，這個對象除了有前面說過的paths屬性之外，還有一個shim屬性，專門用來配置不兼容的模塊。具體來說，每個模塊要定義（1）exports值（輸出的變量名），表明這個模塊外部調用時的名稱；（2）deps數組，表明該模塊的依賴性。
比如，jQuery的插件可以這樣定義：
shim: {
'jquery.scroll': {
deps: ['jquery'],
exports: 'jQuery.fn.scroll'
}
}
七、require.js插件
require.js還提供一系列插件，實現一些特定的功能。
domready插件，可以讓回調函數在頁面DOM結構加載完成后再運行。
require(['domready!'], function (doc){
// called once the DOM is ready
});
text和image插件，則是允許require.js加載文本和圖片文件。
define([
'text!review.txt',
'image!cat.jpg'
],
function(review,cat){console.log(review);
document.body.appendChild(cat);
}
);
類似的插件還有json和mdown，用于加載json文件和markdown文件。
浙公網安備 33010602011771號