1.為什么要使用模塊化茵汰?
以為隨著代碼量的增大,會(huì)造成命名沖突孽鸡、文件依賴和加載順序等問題蹂午,有了模塊,我們就可以更方便地使用別人的代碼彬碱,想要什么功能豆胸,就加載什么模塊。
模塊化可以帶來很多好處:
- 模塊的版本管理
- 提高可維護(hù)性
- 前端性能優(yōu)化
- 跨環(huán)境共享模塊
2.CMD巷疼、AMD晚胡、CommonJS 規(guī)范分別指什么?有哪些應(yīng)用
-
commonJS:CommonJS是服務(wù)器端模塊的規(guī)范,Node.js采用了這個(gè)規(guī)范估盘。Node.JS首先采用了js模塊化的概念瓷患。在CommonJS中,有一個(gè)全局性方法require()遣妥,用于加載模塊擅编。假定有一個(gè)數(shù)學(xué)模塊math.js,就可以像下面這樣加載箫踩。
<pre>
var math = require('math')
</pre>
然后爱态,就可以調(diào)用模塊提供的方法:
<pre>
var math = require('math')
math.add(2,3)
</pre>
但是,由于一個(gè)重大的局限境钟,使得CommonJS規(guī)范不適用于瀏覽器環(huán)境锦担。還是上面的代碼,如果在瀏覽器中運(yùn)行慨削,會(huì)有一個(gè)很大的問題洞渔,第二行math.add(2, 3),在第一行require('math')之后運(yùn)行理盆,因此必須等math.js加載完成痘煤。也就是說,如果加載時(shí)間很長(zhǎng)猿规,整個(gè)應(yīng)用就會(huì)停在那里等衷快。造成頁面長(zhǎng)時(shí)間沒有響應(yīng),因此姨俩,瀏覽器端的模塊蘸拔,不能采用“同步加載”,只能異步环葵,這就是是AMD调窍。 -
AMD:異步模塊定義,它采用異步方式加載模塊张遭,模塊的加載不影響它后面語句的運(yùn)行邓萨。所有依賴這個(gè)模塊的語句,都定義在一個(gè)回調(diào)函數(shù)中菊卷,等到加載完成之后缔恳,這個(gè)回調(diào)函數(shù)才會(huì)運(yùn)行。requireJS,Dojo,jQuery采用了這個(gè)規(guī)范洁闰。AMD也采用require()語句加載模塊歉甚,但是不同于CommonJS,它要求兩個(gè)參數(shù):
<pre>
require ([module],callback);
</pre>
第一個(gè)參數(shù)[module]是一個(gè)數(shù)組扑眉,里面的成員就是加載的模塊纸泄,第二個(gè)參數(shù)callback赖钞,則是加載成功之后的回調(diào)函數(shù)。如果將前面的代碼改成AMD形式聘裁,則是:
<pre>
require(['math'],function(math){
math.add(2,3);
})
</pre> -
CMD:是 SeaJS推廣過程中產(chǎn)生的雪营。在 CMD 規(guī)范中,一個(gè)模塊就是一個(gè)文件咧虎。與AMD類似卓缰,也是異步加載模塊,不過書寫規(guī)范不同砰诵。上述代碼用CMD的規(guī)范書寫則是:
<pre>
define(function(require,exports,module){
var add = require('math').add;
exports.increment = function(){
return add(2,3);
}
})
</pre>
版權(quán)歸ENVY和饑人谷所有,轉(zhuǎn)載請(qǐng)注明出處捌显。