我也談 javascript 模組化 -AMD規範

標籤：

最近，讀了很多有關js模組化編程方面的文章，自己也有些小小的理解，不過，還是得藉助別人的總結，在這個基礎上談一談自己的理解吧！
參考：http://www.ruanyifeng.com/blog/2012/10/javascript_module.html
1、網頁js程式為什麼要模組化？
;之前做的一些網站，或者說網頁，基本上是一html+css實現布局，內容展示為主。至於一些表單的驗證邏輯，以及給頁面實現一些特效（比如點擊之後彈個窗出來，動畫啊，等等）之類的，無非就是在對應的頁面中寫一些js指令碼就好了，哪個頁面要什麼功能，就寫一些js指令碼到這個頁面中就好了。整個網站下來，每個頁面都有對應的js檔案，感覺不好管理，沒有系統化。而且，對於有些頁面功能比較多，可能這個頁面的js檔案就比較多，代碼可能就會更加複雜一點了。 再進一步，如果想在一個頁面中做更多更多的功能，更多的互動，那顯然這個頁面的js代碼量是非常多的。  要在一個html網頁中實現像我們的用戶端軟體類似的功能，我們的網站，或者說網頁就叫做 SPA --singal page application 單頁面應用了。
這個時候js代碼是非常多的，而且js代碼之間免不了互相依賴，先執行與後執行的關係存在。這個時候，就有管理我們的js檔案的必要了。
2、所以，出於這樣的情況，就出現了js的模組化。

“模組”，模組就是實現特定的功能的一組方法。
只要把不同的函數（以及選項組的變數）簡單地放在一起，就算是一個模組。

一、原始寫法
function m1(){
//...
}
function m2(){
//....
}
上面的函數m1()和m2(),組成一個模組，使用的時候，直接調用就行了。
這種做法的缺點很明顯，“汙染了全域變數”，即很容易導致命名衝突，而且全域變數
一直存在，不會銷毀，佔用記憶體，很容易造成記憶體泄露。而且模組的成員直接看不出
直接的關係。

二、對象寫法
為瞭解決上面的缺點，可以吧模組寫成一個對象，所有的模組成員都放在這個對象裡面。
var module1 = new Object({
_count: 0,
m1 : function(){
//...
},
m2 : function(){
//...
}
});
上面的函數m1()和m2(), 都封裝在module1對象裡，使用的時候，就調用這個對象的屬性。
module1.m1();
但是，這樣的寫法會暴露所有的模組成員，內部狀態可以被外部改寫。比如，外部代碼可以
直接改寫內部計數器的值，
module1._count = 5;

三、立即執行函數寫法

var module1 = (function (){
var _count = 0;
var m1 = function(){
//..
};
var m2 = function(){
//...
};
return {
m1: m1,
m2: m2
}
})();
使用這種寫法，外部代碼無非讀取內部的_count變數的值。
console.info(module._count);//undefined

module1就是Javascript 模組的基本寫法。下面，在對這種寫法進行加工。

 

四、放大模式

如果一個模組很大，必須分成幾個部分，或者一個模組需要繼承另一個模組，這是就必須
採用放大模式（sugmentation）

var module1 = (function(mod){
mod.m3 = function(){
//...
};
})(module1);
上面的代碼為module1模組添加了一個新方法m3();,然後返回新的module1模組;

五、寬放大模式（Loose augmentation）

在瀏覽器環境中，模組的各個部分通常都是從網上擷取的，又是無法知道哪個會先載入。
如果採用上一節的寫法，第一個執行的部分可能載入一個不存在的Null 物件，這是就要採用
“寬放大模式”
var module1 = (function(mod){
//return mod;
})(window.module1 || {});
與“放大模式”相比，“寬放大模式”就是“立即執行函數的參數”可以是Null 物件。

六、輸入全域變數

獨立性是模組的重要特點，模組內部最好不予程式的其他部分直接互動。
為了在模組內部調用全域變數，必須顯示地將其他變數輸入模組。
var module1 = (function($, YAHOO){
//...
})(jQuery, YAHOO);
上面的module1 模組需要使用jQuery庫和YUI 庫，就把這兩個庫（其實是兩個模組）當做參數
傳入module1,這樣做出了保證模組的獨立性，還是模組之間的依賴關係變得明顯。這方面的討論
參考Ben cherry 的著名文章《Javascript Module Pattern: In-Depth》.

我也談 javascript 模組化 -AMD規範