模塊化編程1

一，原始寫法

模塊就是實現特定功能的一組方法。

只要把不一樣的函數（以及記錄狀態的變量）簡單地放在一塊兒，就算是一個模塊。

function m1 () {

//.....

}

function () {

//......

}

這是最初級的寫法，這樣m1(),m2()，組成一個模塊。使用的時候，直接調用就好了，

這種作法的缺點很明顯：「污染」了全局變量，沒法保證不與其餘模塊發生變量名衝突，並且模塊成員之間看不出直接關係。

二，對象寫法

爲了解決上面的缺點，能夠把模塊寫成一個對象，全部的模塊成員都放到這個對象裏面。

varmodule1 =  newObject({

_count :0,

m1 : function() {

},

m2 : function() {

}

});

上面的函數m1()和m2()，都封裝在module1對象裏。使用的時候，就是調用這個對象的屬性。

module1.m1();

可是,這樣的寫法會暴露全部的模塊成員，內部狀態能夠被外部改寫。好比外部代碼能夠直接改變內部計數器的值。

module1._count = 5;

三，當即執行函數寫法

使用「當即執行函數」，能夠達到不暴露私有成員的目的。

var module1=(function() {

var _count = 0;

var m1 = function() {

console.log("m1");

};

var m2 = function() {

console.log("m2");

};

return{

m1 : m1,

m2 : m2

}

})();

使用上面的寫法，外部代碼沒法讀取內部的_count變量。

四，放大模式

若是一個模塊很大，必須分紅幾個部分，或者一個模塊須要繼承另一個模塊，這是就有必要採用「放大模式」。

var module1=(function(mod) {

mod.m3=function() {

console.log("m3");

}

return mod;

})(module1);

這樣寫其實就是給一個模塊添加新的方法m3()；能夠用這種方式給一個模塊擴展方法。

5.寬放大模式

在瀏覽器環境中，模塊的各個部分一般都是從網上獲取的，有時沒法知道哪一個部分會先加載。若是採用上一節的寫法第一個執行的部分可能加載一個不存在的空對象，這時就要採用「寬放大模式」。

var module1 = (function (mod){

return;

})(window.module1 || {});

與放大模式相比，「寬放大模式」就是」當即執行函數「的參數能夠是空對象。

六,輸入全局變量

獨立性是模塊的重要特色，模塊內部最好不與程序的其餘部分直接交互。爲了在模塊顳部調用全局變量，必須顯式地將其餘變量輸入模塊。

var module1 = (function ($,YAHOO)  {

//

})(jQuery, YAHOO);

上面的module1模塊須要使用jQuery庫和YUI庫，就把這兩個庫（實際上是兩個模塊）看成參數輸入module1。這樣作除了保證模塊的獨立性，還使得模塊之間的依賴關係變得明顯。

注：這是我本身的一個360ssp網站，須要點訪問量，但願你們可以可以點擊訪問一下，支持一下。http://078156.top