一凌盯、為什么要使用模塊化付枫？
使用模塊化可以：
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)載請注明出處。謝謝吗伤！ *
