一凌盯、為什么要使用模塊化付枫?
使用模塊化可以:
1、解決命名沖突驰怎;
2阐滩、可進行依賴管理;
3县忌、增強代碼的可讀性掂榔;
4、代碼解耦症杏,提高代碼的復用率装获;
二、CMD厉颤、AMD穴豫、CommonJS 規(guī)范分別指什么?有哪些應(yīng)用逼友?
1精肃、CommonJS
CommonJS 是服務(wù)器端模塊規(guī)范;Node.js的模塊系統(tǒng)就是參照CommonJS規(guī)范實現(xiàn)的帜乞;CommonJS中司抱,有一個全局性方法require(),用于加載模塊黎烈。假定有一個數(shù)學模塊math.js习柠,就可以像下面這樣加載。
var math = require('math');
然后我們可以這樣調(diào)用:
var math = require('math');
math.add(1,2)//3
- 端:服務(wù)端
- 同異步:同步
-
實例:
image.png
2怨喘、AMD
AMD(Asynchronous Module Definition)異步模塊定義津畸,它是一種采用異步的方式加載模塊(即模塊在加載的過程中不影響后面代碼的運行)的javascript規(guī)范;它主要運用在客戶端必怜;常用的require.js就是采用了AMD規(guī)范肉拓;AMD也采用require()語句加載模塊,但是不同于CommonJS梳庆,它要求兩個參數(shù):
require([module], callback);
[module] 是一個數(shù)組暖途,里面就是需要調(diào)用的模塊名稱;
callback 則是加載完成后的回調(diào)函數(shù)膏执;
上面CommonJS的例子我們可以看出如果在客戶端執(zhí)行的話驻售,可能會出現(xiàn)無響應(yīng)的情況(因為它是同步執(zhí)行的即要等待math.js加載完才能執(zhí)行第二行語句),因此對于客戶端(瀏覽器端)不能采用同步加載的機制更米,需要采用異步加載的機制欺栗,這也是AMD產(chǎn)生的背景。
例如上面CommonJS的例子就可以采用AMD規(guī)范改成下面這樣:
require(['math'],function(math){
math.add(1,2)//3
});
在此再舉個require.js的例子:
1、先寫個html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://apps.bdimg.com/libs/require.js/2.1.11/require.min.js"></script>
</head>
<body>
<script>
require.config({
baseUrl:"js/lib" //設(shè)置基目錄
})
require(['amd-main']);
console.log("starting")
</script>
</body>
</html>
2迟几、然后在該html文件目錄中的js文件夾下的lib文件夾新建如下兩個js文件
//amd-main.js
define(["inc-amd"],function(Inc){
console.log(Inc.get());
Inc.add1();
console.log(Inc.get());
Inc.add1();
console.log(Inc.get());
})
// inc-amd
define(function(){
var inc=(function(){
var a=1;
function add1(){
a++;
}
function get(){
return a;
}
return {
add1:add1,
get:get
};
}());
return inc;
})
運行編好的html文件后會得到如下結(jié)果:
- 端:瀏覽器
- 同異步:異步
-
實例:
image.png - 相關(guān)庫:require.js
3消请、CMD
CMD(Common Module Definition)通用模塊定義,它也是javascript的一種模塊規(guī)范类腮,與依賴關(guān)系前置的AMD不同的是臊泰,CMD是按需加載的。國內(nèi)玉伯編寫的Sea.js里的所有javascript模塊都是遵循 CMD 模塊定義規(guī)范的蚜枢。
- 端:瀏覽器
- 同異步:異步
- 實例:
- 相關(guān)庫:Sea.js
4缸逃、UMD
通用模塊定義
它兼容了AMD和CommonJS,同時還支持老式的“全局”變量規(guī)范
5厂抽、ES6 export/import modules
推薦資料
1需频、CommonJS、AMD、CMD、UMD蔼卡、ES6
2、https://my.oschina.net/felumanman/blog/263330
**本文版權(quán)歸本人即簡書筆名:該賬戶已被查封 所有饲化,如需轉(zhuǎn)載請注明出處。謝謝吗伤! *