前端AMD和CMD是在模塊化的基礎上產生並且得到大幅度的引用的。
AMD 即Asynchronous Module Definition（點擊鏈接可以查看AMD面試題），中文名是異步模塊定義的意思。它是一個在瀏覽器端模塊化開發的規范；
CMD 即Common Module Definition ，中文名是同步模塊定義的意思，是SeaJs在推廣過程中對模塊規范化的定義的產出。該規范明確了模塊的基本書寫格式和基本交互規則
CommonJs:官方網址：http://www.commonjs.org/ CommonJs用在服務器端，AMD和CMD用在瀏覽器環境
這三者的主要作用是：
1.javaScript模塊化加載而生的
2.便於團隊的人員的協作，代碼不至於很亂
3.在網絡請求中的記載時間的優化
AMD使用方法：
AMDjavaScript不支持，所以出現我們經常用的requireJs,實際上AMD 是 RequireJS 在推廣過程中對模塊定義的規范化的產出
requireJS主要解決兩個問題
- 多個js文件可能有依賴關系，被依賴的文件需要早於依賴它的文件加載到瀏覽器
- js加載的時候瀏覽器會停止頁面渲染，加載文件越多，頁面失去響應時間越長
具體寫法如下：
1.在文件中首先要引入require.js,
2.定義一個模塊
3.加載模塊
1 define(function(){
2 var keyboard = { 3 'init':function(){ 4 console.log(2); 5 } 6 } 7 return keyboard; 8 })
這是我們創建的一個文件keyboard.js;
<html>
<head>
<meta charset="utf-8">
<title>requireJs</title>
<script src="./require.js"></script>
</head>
<body>
<div>代碼測試</div>
<script>
require(['./keyboard'],function(keyboard){ keyboard.init(); }) </script> </body> </html>
注意require的語法，這里引入是可以省略文件后綴.js的，后面function參數定義了這個模塊的名稱，函數內部直接調用就可以了。下面是編譯后的代碼，這里我們會看到我們引用的keyboard.js多了一個async屬性，這里實現了異步加載。
View Code
語法如下：
requireJS定義了一個函數 define，它是全局變量，用來定義模塊
define(id?, dependencies?, factory);- id：可選參數，用來定義模塊的標識，如果沒有提供該參數，腳本文件名（去掉拓展名）
- dependencies：是一個當前模塊依賴的模塊名稱數組
- factory：工廠方法，模塊初始化要執行的函數或對象。如果為函數，它應該只被執行一次。如果是對象，此對象應該為模塊的輸出值
在頁面上使用require函數加載模塊
require([dependencies], function(){});require()函數接受兩個參數
- 第一個參數是一個數組，表示所依賴的模塊
- 第二個參數是一個回調函數，當前面指定的模塊都加載成功后，它將被調用。加載的模塊會以參數形式傳入該函數，從而在回調函數內部就可以使用這些模塊
require()函數在加載依賴的函數的時候是異步加載的，這樣瀏覽器不會失去響應，它指定的回調函數，只有前面的模塊都加載成功后，才會運行，解決了依賴性的問題
CMD使用方法：
1.引入seajs
2.定義模塊文件
3.引入模塊
4.seajsAPI：http://yslove.net/seajs/
代碼示例如下：
<html>
<head>
<meta charset="utf-8">
<title>requireJs</title>
<script src="./seajs.js"></script>
</head>
<body>
<div>代碼測試</div>
<script>
seajs.use('./keyboard',function(keyboard){ keyboard.init(); }) </script> </body> </html>
/*define(function(){
var keyboard = {
'init':function(){
console.log(2);
}
}
return keyboard;
})*/
//seajs
define(function(require, exports, module) {
// 模塊代碼
console.log(require,exports,module); module.exports ={ 'init':function(){ console.log(2); } } });
/*define(function(){
var keyboard = {
'init':function(){
console.log(2);
}
}
return keyboard;
})*/
//seajs
/*define(function(require, exports, module) {
// 模塊代碼
console.log(require,exports,module);
module.exports ={
'init':function(){
console.log(2);
}
}
});*/
//seajs第二種定義
define(function(require, exports, module) {
// 模塊代碼
console.log(require,exports,module); return { 'init':function(){ console.log(2); } } });
從上面可以看出，通過seajs定義模塊時，需要注意寫法，一種是直接return一個對象，另一種是module.exports,再看一下瀏覽器解析的效果
<html><head>
<meta charset="utf-8">
<title>requireJs</title>
<script src="./seajs.js"></script>
</head>
<body style="">
<div>代碼測試</div>
<script>
seajs.use('./keyboard',function(keyboard){ keyboard.init(); }) </script> </body></html>
使用時，需要使用seajs.use(),更多用法，可以參考前面的api
CMD異步用法：
define(function(require, exports, module) {
// 模塊代碼
console.log(require,exports,module); return { 'init':function(){ var $body = document.getElementsByTagName('body')[0]; var html = '<div>這是一個提示樣式</div>'; $body.append(html); } } });
/*define(function(){
var keyboard = {
'init':function(){
console.log(2);
}
}
return keyboard;
})*/
//seajs
/*define(function(require, exports, module) {
// 模塊代碼
console.log(require,exports,module);
module.exports ={
'init':function(){
console.log(2);
}
}
});*/
//seajs第二種定義
define(function(require, exports, module) {
var loading = ''; // 模塊代碼 require.async('./loading',function(loading){ loading = loading.init(); }); return { 'init':function(){ console.log(2); }, 'loadingInit':function(){ console.log(loading); } } });
<html>
<head>
<meta charset="utf-8">
<title>requireJs</title>
<script src="./seajs.js"></script>
</head>
<body>
<div>代碼測試</div>
<script>
seajs.use('./keyboard',function(keyboard){ keyboard.init(); keyboard.loadingInit(); }) </script> </body> </html>
在編譯后的html中沒有加載loading.js,keyboard.js,但是在network中會有顯示，
<html><head>
<meta charset="utf-8">
<title>requireJs</title>
<script src="./seajs.js"></script>
</head>
<body style="">
<div>代碼測試</div>
<script>
seajs.use('./keyboard',function(keyboard){ keyboard.init(); keyboard.loadingInit(); }) </script> <div>這是一個提示樣式</div></body></html>
CommonJs：是主要為了JS在后端的表現制定的，他是不適合前端的，為什么這么說呢？前端主要的問題是1.帶寬，2.加載時需要通過網絡加載3.代碼需要從一個服務器端分發到多個客戶端執行
CommonJS定義的模塊分為:{模塊引用(require)} {模塊定義(exports)} {模塊標識(module)}
require()用來引入外部模塊；exports對象用於導出當前模塊的方法或變量，唯一的導出口；module對象就代表模塊本身。
區別：
1、AMD推崇依賴前置，在定義模塊的時候就要聲明其依賴的模塊
2、CMD推崇就近依賴，只有在用到某個模塊的時候再去require
本文參考：