AMD
AMD一開始是CommonJS規范中的一個草案，全稱是Asynchronous Module Definition，即異步模塊加載機制，后來由該草案的作者以RequireJS實作了AMD規范，所以一般說AMD也是指RequireJS，
RequireJS的基本用法
通過define來定義一個模塊，使用require可以匯入定義的模塊，
//a.js
//define可以傳入三個引數，分別是字串-模塊名、陣列-依賴模塊、函式-回呼函式
define(function(){
return 1;
})
// b.js
//陣列中宣告需要加載的模塊，可以是模塊名、js檔案路徑
require(['a'], function(a){
console.log(a);// 1
});
RequireJS的特點
對于依賴的模塊，AMD推崇依賴前置，提前執行，也就是說，在define方法里傳入的依賴模塊(陣列)，會在一開始就下載并執行，
CMD
CMD是SeaJS在推廣程序中生產的對模塊定義的規范，在Web瀏覽器端的模塊加載器中，SeaJS與RequireJS并稱，SeaJS作者為阿里的玉伯，
SeaJS的基本用法
//a.js
/*
* define 接受 factory 引數，factory 可以是一個函式，也可以是一個物件或字串，
* factory 為物件、字串時，表示模塊的介面就是該物件、字串，
* define 也可以接受兩個以上引數，字串 id 表示模塊標識，陣列 deps 是模塊依賴.
*/
define(function(require, exports, module) {
var $ = require('jquery');
exports.setColor = function() {
$('body').css('color','#333');
};
});
//b.js
//陣列中宣告需要加載的模塊，可以是模塊名、js檔案路徑
seajs.use(['a'], function(a) {
$('#el').click(a.setColor);
});
SeaJS的特點
對于依賴的模塊，CMD推崇依賴就近，延遲執行，也就是說，只有到require時依賴模塊才執行，
CommonJS
CommonJS規范為CommonJS小組所提出，目的是彌補JavaScript在服務器端缺少模塊化機制，NodeJS、webpack都是基于該規范來實作的，
CommonJS的基本用法
//a.js
module.exports = function () {
console.log("hello world")
}
//b.js
var a = require('./a');
a();//"hello world"
//或者
//a2.js
exports.num = 1;
exports.obj = {xx: 2};
//b2.js
var a2 = require('./a2');
console.log(a2);//{ num: 1, obj: { xx: 2 } }
CommonJS的特點
- 所有代碼都運行在模塊作用域，不會污染全域作用域；
- 模塊是同步加載的，即只有加載完成，才能執行后面的操作；
- 模塊在首次執行后就會快取，再次加載只回傳快取結果，如果想要再次執行，可清除快取；
require回傳的值是被輸出的值的拷貝，模塊內部的變化也不會影響這個值，
ES6 Module
ES6 Module是ES6中規定的模塊體系，相比上面提到的規范， ES6 Module有更多的優勢，有望成為瀏覽器和服務器通用的模塊解決方案，
ES6 Module的基本用法
//a.js
var name = 'lin';
var age = 13;
var job = 'ninja';
export { name, age, job};
//b.js
import { name, age, job} from './a.js';
console.log(name, age, job);// lin 13 ninja
//或者
//a2.js
export default function () {
console.log('default ');
}
//b2.js
import customName from './a2.js';
customName(); // 'default'
ES6 Module的特點(對比CommonJS)
- CommonJS模塊是運行時加載，ES6 Module是編譯時輸出介面；
- CommonJS加載的是整個模塊，將所有的介面全部加載進來，ES6 Module可以單獨加載其中的某個介面；
- CommonJS輸出是值的拷貝，ES6 Module輸出的是值的參考，被輸出模塊的內部的改變會影響參考的改變；
- CommonJS
this指向當前模塊，ES6 Modulethis指向undefined;
目前瀏覽器對ES6 Module兼容還不太好，我們平時在webpack中使用的export/import，會經過babel轉換為CommonJS規范，
寫在后面
這里比較全面的把JavaScript中的幾大模塊化規范羅列出來，希望借此對JavaScript模塊化有一個大致的認識，而未對細節進行具體分析，感興趣的可以自行探索，
原文鏈接：https://juejin.im/post/5db95e3a6fb9a020704bcd8d
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/178084.html
標籤：JavaScript
上一篇：計算機專用英語詞匯