[前端] 模組化那些事02
模組化那些事02
轉自:https://www.cnblogs.com/huiguo/p/7967189.html
所謂的模組化程式設計就是封裝細節,提供使用介面,彼此之間互不影響,每個模組都是相互獨立,實現某一特定的功能。如果其他模組想呼叫的時候,可以暴露我們所希望對外的公開的方法與資料。
函式寫法
function f1(){
var value=1;
//...
}
function f2(){
var value=2;
//...
}
這裡定義了f1跟f2,每個函式相當於一個模組,f1跟f2是相互獨立的,不能訪問到對方里面的區域性內容value。這種寫法定義了全域性變數f1、f2汙染了全域性環境會導致命名衝突。
物件寫法
var myModule= new Object({
value : 0,
f1 : function (){
//...
},
f2 : function (){
//...
}
});
把函式f1()和f2(),封裝在myModule物件裡。使用的時候,就是呼叫這個物件的屬性即可:myModule.f1()。這樣的寫法會暴露所有模組成員,內部狀態可以被外部改寫如:myModule.value = 1,會改變myModule內部的屬性值。同時這種辦法只能一定程式上減少了命名衝突的問題,不能完全避免命名衝突。
立即執行函式寫法
匿名閉包寫法
(function () {
// ...
}());
javascript中沒有私有作用域的概念,根據javascript函式作用域鏈的特性,使用這種寫法可以模仿一個私有作用域。在閉包中,可以定義私有變數和函式,外部無法訪問它們,從而做到了私有成員的隱藏和隔離,俗稱"匿名包裹器"或"名稱空間"。
全域性引入寫法
(function (a) {
a.a3 = function () {
//...
};
// …
}(a));
將a物件作為引數傳入,在函式體內對這個物件進行操作。這樣做除了保證模組的獨立性,還使得模組之間的依賴關係變得明顯。現在很多類庫裡都有這種使用方式,比如jQuery原始碼。
模組匯出寫法
var myModule = (function(){
var value = 0;
var f1 = function(){
//...
};
var f2 = function(){
//...
};
return {
value: value,
f2 : f2
};
})();
這裡,我們聲明瞭一個全域性的模組叫myModule,它包含二個屬性,一個成員變數value和一個成員方法f1。除此之外,它們還使用匿名的閉包維護了私有內部狀態,我們也可以通過按需傳入外部變數。
擴充套件模式寫法
var myModule = (function (a) {
var value =a.value;
var f1 = function(){
//...
};
var f2 = function(){
//...
};
return {
value: value,
f2 : f2
};
}(a));
這裡,我們在閉包中定義私有變數和函式,外部無法訪問它們,做到了私有成員的隱藏和隔離。將某物件作為引數傳入,在函式體內對該物件進行操作,然後返回物件或函式。由此,可以做到把依賴項通過引數的形式注入進來在內部使用注入的屬性,並且可以暴露我們所希望對外的公開的方法與資料。這就是模組化程式設計的基礎思想。
在此思想之下,javaScript模組化程式設計開始盛行,大牛們開始進行各式各樣的封裝打包,從而產出一系列的模組化規範、模組化載入器。上面的方法中,a必須在模組myModule之前定義,如果a依賴項自身是一個大的模組,比如一個庫,我們如何做到在myModule之前定義載入a,然後在myModule中成功地引用a呢?模組化載入器便能幫我們解決這個問題。
下一篇我們開始介紹模組化規範的先驅-------CommonJS規範;