現(xiàn)在的網(wǎng)頁越來越復(fù)雜越來越接近桌面應(yīng)用,模塊化變得很普遍,但是es6正式支持的”類”和”模塊”需要很長(zhǎng)時(shí)間才能普及投入使用.
1.函數(shù)寫法
function Func(){
//...
}
最原始的寫法,一個(gè)函數(shù)就是一個(gè)模塊,這種做法的缺點(diǎn)很明顯：”污染”了全局變量柒瓣，無法保證不與其他模塊發(fā)生變量名沖突，而且模塊成員之間看不出直接關(guān)系。
2.對(duì)象寫法
var data = {
num : 0,
Func : function ( {
...
})
}
函數(shù) Func封裝在module1對(duì)象里一喘。使用的時(shí)候距糖，就是調(diào)用這個(gè)對(duì)象的屬性。
data.Func();
但是，這樣的寫法會(huì)暴露所有模塊成員挥萌，內(nèi)部狀態(tài)可以被外部改寫。比如枉侧，外部代碼可以直接改變內(nèi)部計(jì)數(shù)器的值引瀑。
data.num= 2;
3.立即執(zhí)行函數(shù)寫法
var data =(function() {
num : 0,
Func : function ( {
...
})
}();
使用上面的寫法,外部代碼無法讀取內(nèi)部的num 變量,可以達(dá)到不暴露私有成員的目的,這就是js模塊的基本寫法.
4.放大寫法
var data = (function (f){
f.m1 = function () {
//...
};
return f;
})(window.f || {});
在瀏覽器環(huán)境中,模塊的各個(gè)部分通常都是從網(wǎng)上獲取的,有時(shí)無法知道哪個(gè)部分會(huì)先加載, window.f || {} 就是”立即執(zhí)行函數(shù)”的參數(shù)可以是空對(duì)象.
5.輸入全局變量
var data = (function ($, medth) {
//...
})(jQuery, medth);
獨(dú)立性是模塊的重要特點(diǎn),模塊內(nèi)部最好不與程序的其他部分直接交互,
為了在模塊內(nèi)部調(diào)用全局變量,必須顯式地將其他變量輸入模塊。
6.模塊的規(guī)范
模塊化有一個(gè)前提,那就是大家必須以同樣的方式編寫模塊,否則就亂套了.
目前,通行的Javascript模塊規(guī)范共有兩種：CommonJS和AMD榨馁。
CommonJS :
在CommonJS中,有一個(gè)全局性方法require(),用于加載模塊,假定有一個(gè)數(shù)學(xué)模塊math.js,就可以像下面這樣加載憨栽。
var math = require('math');
然后,就可以調(diào)用模塊提供的方法：
var math = require('math');
math.add(2,3); // 5
AMD :
瀏覽器端的模塊,不能采用”同步加載”（synchronous）,只能采用”異步加載”（asynchronous） . 因?yàn)?:
var math = require('math');
math.add(2, 3);
第二行math.add(2, 3),在第一行require(‘math’)之后運(yùn)行,因此必須等math.js加載完成,也就是說,如果加載時(shí)間很長(zhǎng)，整個(gè)應(yīng)用就會(huì)停在那里等.
這對(duì)服務(wù)器端不是一個(gè)問題,因?yàn)樗械哪K都存放在本地硬盤,可以同步加載完成,等待時(shí)間就是硬盤的讀取時(shí)間翼虫。但是,對(duì)于瀏覽器,這卻是一個(gè)大問題,因?yàn)槟K都放在服務(wù)器端,等待時(shí)間取決于網(wǎng)速的快慢,可能要等很長(zhǎng)時(shí)間,瀏覽器處于”假死”狀態(tài).
AMD是”Asynchronous Module Definition”的縮寫,意思就是”異步模塊定義”屑柔。它采用異步方式加載模塊,模塊的加載不影響它后面語句的運(yùn)行。所有依賴這個(gè)模塊的語句,都定義在一個(gè)回調(diào)函數(shù)中蛙讥，等到加載完成之后锯蛀，這個(gè)回調(diào)函數(shù)才會(huì)運(yùn)行。
AMD也采用require()語句加載模塊,但是不同于CommonJS,它要求兩個(gè)參數(shù)：
require([module], callback);
第一個(gè)參數(shù)[module],是一個(gè)數(shù)組次慢，里面的成員就是要加載的模塊,第二個(gè)參數(shù)callback,則是加載成功之后的回調(diào)函數(shù),如果將前面的代碼改寫成AMD形式,就是下面這樣：
require(['math'], function (math) {
math.add(2, 3);
});
math.add()與math模塊加載不是同步的旁涤，瀏覽器不會(huì)發(fā)生假死翔曲。所以很顯然，AMD比較適合瀏覽器環(huán)境劈愚。
