JS(11)——.模組化
1.模組化實現歷程
一個模組就是實現特定功能的檔案,就如同java中的packag,有了模組,就可以更方便地使用別人的程式碼,想要什麼功能,就載入什麼模組。遺憾的是JavaScript在設計時定位原因,沒有提供類似的功能,開發者需要模擬出類似的功能,來隔離、組織複雜的JavaScript程式碼,我們稱為模組化。
1、函式封裝
函式就是實現特定邏輯的一組語句打包,而且JavaScript的作用域就是基於函式的,所以把函式作為模組化的第一步是很自然的事情,在一個檔案裡面編寫幾個相關函式就是最開始的模組了。
function fn1(){ statement } function fn2(){ statement }
這樣定義函式後,在函式所在檔案呼叫函式就可以了。這種做法的缺點很明顯:汙染了全域性變數,無法保證不與其他模組發生變數名衝突,而且模組成員之間沒什麼關係。
2、物件
為了解決上面問題,物件的寫法應運而生,可以把所有的模組成員封裝在一個物件中
var myModule = {
var1: 1,
var2: 2,
fn1: function(){
},
fn2: function(){
}
}
這樣我們在希望呼叫模組的時候,引用對應檔案,然後myModule.fn2(); 這樣避免了變數汙染,只要保證模組名唯一即可,同時同一模組內的成員也有了關係。看似不錯的解決方案,但是也有缺陷,外部可以隨意修改內部成員
3、立即執行函式
可以通過立即執行函式,來達到隱藏細節的目的:
var myModule = (function(){
var var1 = 1;
var var2 = 2;
function fn1(){
}
function fn2(){
}
return {
fn1: fn1,
fn2: fn2
};
})();
這樣在模組外部無法修改我們沒有暴露出來的變數、函式。上述做法就是模組化的基礎。
目前,通行的JavaScript模組規範主要有
2. CommonJS
雖然JavaScript在web端發展這麼多年,第一個流行的模組化規範卻由伺服器端的JavaScript應用帶來,CommonJS規範是由NodeJS發揚光大,這標誌著JavaScript模組化程式設計正式登上舞臺。
1、模組定義
根據CommonJS規範,一個單獨的檔案就是一個模組。每一個模組都是一個單獨的作用域,也就是說,在該模組內部定義的變數,無法被其他模組讀取,除非定義為global物件的屬性。
2、模組輸出
模組只有一個出口,module.exports物件,我們需要把模組希望輸出的內容放入該物件。
3、模組載入
載入模組使用require方法,該方法讀取一個檔案並執行,返回檔案內部的module.exports物件。
例如:
//模組定義 myModel.js
var name = 'Byron';
function printName(){
console.log(name);
}
function printFullName(firstName){
console.log(firstName + name);
}
module.exports = {
printName: printName,
printFullName: printFullName
}
//載入模組
var nameModule = require('./myModel.js');
nameModule.printName();
不同的實現對require時的路徑有不同要求,一般情況可以省略js拓展名,可以使用相對路徑,也可以使用絕對路徑,甚至可以省略路徑直接使用模組名(前提是該模組是系統內建模組).
仔細看上面的程式碼,會發現require是同步的。模組系統需要同步讀取模組檔案內容,並編譯執行以得到模組介面。這在伺服器端實現很簡單,也很自然,然而, 想在瀏覽器端實現問題卻很多。
瀏覽器端,載入JavaScript最佳、最容易的方式是在document中插入script 標籤。但指令碼標籤天生非同步,傳統CommonJS模組在瀏覽器環境中無法正常載入。 解決思路之一是,開發一個伺服器端元件,對模組程式碼作靜態分析,將模組與它的依賴列表一起返回給瀏覽器端。 這很好使,但需要伺服器安裝額外的元件,並因此要調整一系列底層架構。
3. AMD
AMD 即Asynchronous Module Definition(非同步模組定義)。它是一個在瀏覽器端模組化開發的規範,由於不是JavaScript原生支援,使用AMD規範進行頁面開發需要用到對應的庫函式,也就是大名鼎鼎RequireJS,實際上AMD 是 RequireJS 在推廣過程中對模組定義的規範化的產出。
requireJS主要解決兩個問題:
1、多個js檔案可能有依賴關係,被依賴的檔案需要早於依賴它的檔案載入到瀏覽器。
2、js載入的時候瀏覽器會停止頁面渲染,載入檔案越多,頁面失去響應時間越長。
例:
// 定義模組 myModule.js
define(['dependency'], function(){
var name = 'Byron';
function printName(){
console.log(name);
}
return {
printName: printName
};
});
// 載入模組
require(['myModule'], function (my){
my.printName();
});
1、模組定義:
define(id, dependencies, factory);
id:可選引數,用來定義模組的標識,如果沒有提供該引數,指令碼檔名(去掉拓展名)。
dependencies:是一個當前模組依賴的模組名稱陣列。
factory:工廠方法,模組初始化要執行的函式或物件。如果為函式,它應該只被執行一次。如果是物件,此物件應該為模組的輸出值。
2、模組載入: require([dependencies], function(){});
require()函式接受兩個引數。第一個引數是一個數組,表示所依賴的模組。第二個引數是一個回撥函式,當前面指定的模組都載入成功後,它將被呼叫。載入的模組會以引數形式傳入該函式,從而在回撥函式內部就可以使用這些模組。
require()函式在載入依賴的函式的時候是非同步載入的,這樣瀏覽器不會失去響應,它指定的回撥函式,只有前面的模組都載入成功後,才會執行,解決了依賴性的問題。
4. CMD
CMD 即Common Module Definition(通用模組定義),CMD規範是國內發展出來的,就像AMD有個requireJS,CMD有個瀏覽器的實現SeaJS,SeaJS要解決的問題和requireJS一樣,只不過在模組定義方式和模組載入(可以說執行、解析)時機上有所不同。
Sea.js 推崇一個模組一個檔案,遵循統一的寫法。
1、模組定義:define(id, deps, factory)
因為CMD推崇一個檔案一個模組,所以經常就用檔名作為模組id。CMD推崇依賴就近,所以一般不在define的引數中寫依賴,在factory函式中寫。
factory函式有三個引數:function(require, exports, module)。
require 是一個方法,接受模組標識作為唯一引數,用來獲取其他模組提供的介面。
exports 是一個物件,用來向外提供模組介面。
module 是一個物件,上面儲存了與當前模組相關聯的一些屬性和方法。
例:
// 定義模組 myModule.js
define(function(require, exports, module) {
var $ = require('jquery.js')
$('div').addClass('active');
});
// 載入模組
seajs.use(['myModule.js'], function(my){
});
5. AMD與CMD區別
1、模組定義時對依賴的處理不同
AMD推崇依賴前置,在定義模組的時候就要宣告其依賴的模組,CMD推崇就近依賴,只有在用到某個模組的時候再去require。這種區別各有優劣,只是語法上的差距,而且requireJS和SeaJS都支援對方的寫法。
2、對依賴模組的執行時機處理不同
注意不是載入的時機或者方式不同。很多人說requireJS是非同步載入模組,SeaJS是同步載入模組,這麼理解實際上是不準確的,其實載入模組都是非同步的,只不過AMD依賴前置,js可以方便知道依賴模組是誰,立即載入,而CMD就近依賴,需要把模組變為字串解析一遍才知道依賴了那些模組,這也是很多人詬病CMD的一點,犧牲效能來帶來開發的便利性,實際上解析模組用的時間短到可以忽略。
為什麼我們說兩個的區別是依賴模組執行時機不同,為什麼很多人認為ADM是非同步的,CMD是同步的(除了名字的原因。。。)。同樣都是非同步載入模組,AMD在載入模組完成後就會執行改模組,所有模組都載入執行完後會進入require的回撥函式,執行主邏輯,這樣的效果就是依賴模組的執行順序和書寫順序不一定一致,看網路速度,哪個先下載下來,哪個先執行,但是主邏輯一定在所有依賴載入完成後才執行。CMD載入完某個依賴模組後並不執行,只是下載而已,在所有依賴模組載入完成後進入主邏輯,遇到require語句的時候才執行對應的模組,這樣模組的執行順序和書寫順序是完全一致的。這也是很多人說AMD使用者體驗好,因為沒有延遲,依賴模組提前執行了,CMD效能好,因為只有使用者需要的時候才執行的原因。