CommonJS,AMD,CMD,ES6

commonJS用同步的方式加載模塊。在服務(wù)端，模塊文件都存在本地磁盤，讀取非常快，所以這樣做不會有問題。但是在瀏覽器端，限于網(wǎng)絡(luò)原因，更合理的方案是使用異步加載。

CMD是另一種js模塊化方案，它與AMD很類似，不同點在于：AMD 推崇依賴前置、提前執(zhí)行，CMD推崇依賴就近、延遲執(zhí)行。此規(guī)范其實是在sea.js推廣過程中產(chǎn)生的。

/** AMD寫法 **/ define(["a", "b", "c", "d", "e", "f"], function(a, b, c, d, e, f) {?// 等于在最前面聲明并初始化了要用到的所有模塊a.doSomething();if (false) {// 即便沒用到某個模塊 b，但 b 還是提前執(zhí)行了b.doSomething()}? }); 復(fù)制代碼/** CMD寫法 **/ define(function(require, exports, module) {var a = require('./a'); //在需要時申明a.doSomething();if (false) {var b = require('./b');b.doSomething();} });? 復(fù)制代碼

ES6 模塊是動態(tài)引用:ES6的模塊不是對象，import命令會被 JavaScript 引擎靜態(tài)分析，在編譯時就引入模塊代碼，而不是在代碼運行時加載，所以無法實現(xiàn)條件加載。也正因為這個，使得靜態(tài)分析成為可能。

ES6 模塊與 CommonJS 模塊的差異

1.?CommonJS 模塊輸出的是一個值的拷貝，ES6 模塊輸出的是值的引用

CommonJS 模塊輸出的是值的拷貝，也就是說，一旦輸出一個值，模塊內(nèi)部的變化就影響不到這個值。

ES6 模塊的運行機制與 CommonJS 不一樣。JS 引擎對腳本靜態(tài)分析的時候，遇到模塊加載命令import，就會生成一個只讀引用。等到腳本真正執(zhí)行時，再根據(jù)這個只讀引用，到被加載的那個模塊里面去取值。換句話說，ES6 的import有點像 Unix 系統(tǒng)的“符號連接”，原始值變了，import加載的值也會跟著變。因此，ES6 模塊是動態(tài)引用，并且不會緩存值，模塊里面的變量綁定其所在的模塊。 2.?CommonJS 模塊是運行時加載，ES6 模塊是編譯時輸出接口。 3.?運行時加載:?CommonJS 模塊就是對象；即在輸入時是先加載整個模塊，生成一個對象，然后再從這個對象上面讀取方法，這種加載稱為“運行時加載”。 編譯時加載:?ES6模塊不是對象，而是通過?export?命令顯式指定輸出的代碼，import時采用靜態(tài)命令的形式。即在import時可以指定加載某個輸出值，而不是加載整個模塊，這種加載稱為“編譯時加載”。 CommonJS 加載的是一個對象（即module.exports屬性），該對象只有在腳本運行完才會生成。而 ES6 模塊不是對象，它的對外接口只是一種靜態(tài)定義，在代碼靜態(tài)解析階段就會生成。

---

前言

JS模塊化編程是前端小伙伴們必不可少的知識，下面妹子將于自認(rèn)為比較清晰的方式列舉出來。

1 require

特點：

• 1.運行時加載
• 2.拷貝到本頁面
• 3.全部引入

1.1 CommonJS

Node.js就是用CommonJS思想。 在CommonJS中，有一個全局性方法require()，用于加載模塊。

1.1.1 用法

var math = require('math'); math.add(2, 3); 復(fù)制代碼var math = require('math'); constMath = new math(2, 3) Math.add(); 復(fù)制代碼 復(fù)制代碼

1.1.2 模塊寫法

模塊寫法分exports和module.exports。

exports.add = (x,y) => x+y; 復(fù)制代碼module.exports = classmath{constructor(x,y) {this.x = x;this.y = y;}add() {return x+y;} }; 復(fù)制代碼 復(fù)制代碼

1.2 AMD

require.js和cujo.js就是用AMD思想。

AMD是”Asynchronous Module Definition”的縮寫，意思就是”異步模塊定義”。它采用異步方式加載模塊，模塊的加載不影響它后面語句的運行。所有依賴這個模塊的語句，都定義在一個回調(diào)函數(shù)中，等到加載完成之后，這個回調(diào)函數(shù)才會運行。

第二行math.add(2, 3)，在第一行require(‘math’)之后運行，因此必須等math.js加載完成。也就是說，如果加載時間很長，整個應(yīng)用就會停在那里等。 這對服務(wù)器端不是一個問題，因為所有的模塊都存放在本地硬盤，可以同步加載完成，等待時間就是硬盤的讀取時間。但是，對于瀏覽器，這卻是一個大問題，因為模塊都放在服務(wù)器端，等待時間取決于網(wǎng)速的快慢，可能要等很長時間，瀏覽器處于”假死”狀態(tài)。 因此，瀏覽器端的模塊，不能采用”同步加載”（synchronous），只能采用”異步加載”（asynchronous）。這就是AMD規(guī)范誕生的背景。

1.2.1 用法

//require([module], callback);require(['math'], function (math) {  math.add(2, 3); }); 復(fù)制代碼 復(fù)制代碼

1.2.1 模塊寫法

define(id?, dependencies?, factory)

• id:字符串，模塊名稱(可選)
• dependencies: 是我們要載入的依賴模塊(可選)，使用相對路徑。,注意是數(shù)組格式
• factory: 工廠方法，返回一個模塊函數(shù)

一個模塊不依賴其他模塊寫法

// math.js define(function (){var add = function (x,y){return x+y;};return {add: add}; }); 復(fù)制代碼 復(fù)制代碼

模塊還依賴其他模塊

define(['a','b'], function(a,b){functionfoo(){a.doSomething();// 依賴前置，提前執(zhí)行b.doSomething();}return {foo : foo}; }); 復(fù)制代碼 復(fù)制代碼

當(dāng)require()函數(shù)加載上面這個模塊的時候，就會先加載Lib.js文件。

1.3 CMD

sea.js就是用CMD思想。 CMD是"Common Module Definition"的縮寫。類似于requirejs，但是seajs是依賴就近，延遲執(zhí)行，requirejs是依賴前置，提前執(zhí)行。

1.3.1 用法

seajs.config({alias: {'jquery': 'http://modules.seajs.org/jquery/1.7.2/jquery.js'} });seajs.use(['./hello', 'jquery'], function(hello, $) {$('#beautiful-sea').click(hello.sayHello); }); 復(fù)制代碼 復(fù)制代碼

1.3.1 模塊寫法

define(function(require, exports, module) {var $ = require('jquery');exports.sayHello = function() {$('#hello').toggle('slow');};var b = require("b");b.doSomething(); // 依賴就近，延遲執(zhí)行 }); 復(fù)制代碼 復(fù)制代碼

2 import

特點：

• 1.編譯時加載
• 2.只引用定義
• 3.按需加載

可對比require的特點，發(fā)現(xiàn)import完勝require,推薦用import取代require

2.1.1 用法

import有兩種模塊導(dǎo)入方式：命名式導(dǎo)入（名稱導(dǎo)入）和默認(rèn)導(dǎo)入（定義式導(dǎo)入），以及 import()。

import defaultMember from"module-name"; import * as name from"module-name"; import { member } from"module-name"; import { member as alias } from"module-name"; import { member1 , member2 } from"module-name"; import { member1 , member2 as alias2 , [...] } from"module-name"; import defaultMember, { member [ , [...] ] } from"module-name"; import defaultMember, * as name from"module-name"; import"module-name"; 復(fù)制代碼 復(fù)制代碼

• name－從將要導(dǎo)入模塊中收到的導(dǎo)出值的名稱
• member, memberN－從導(dǎo)出模塊，導(dǎo)入指定名稱的多個成員
• defaultMember－從導(dǎo)出模塊，導(dǎo)入默認(rèn)導(dǎo)出成員
• alias, aliasN－別名，對指定導(dǎo)入成員進(jìn)行的重命名
• module-name－要導(dǎo)入的模塊。是一個文件名
• as－重命名導(dǎo)入成員名稱（“標(biāo)識符”）
• from－從已經(jīng)存在的模塊、腳本文件等導(dǎo)入

import()

import()返回一個 Promise 對象。

// 報錯if (x === 2) {import MyModual from'./myModual'; } 復(fù)制代碼 復(fù)制代碼

引擎處理import語句是在編譯時，這時不會去分析或執(zhí)行if語句，所以import語句放在if代碼塊之中毫無意義，因此會報句法錯誤，而不是執(zhí)行時錯誤。沒辦法像require樣根據(jù)條件動態(tài)加載。 于是提案引入import()函數(shù)，編譯時分析if語句,完成動態(tài)加載。

if(x === 2){import('myModual').then((MyModual)=>{new MyModual();}) } 復(fù)制代碼 復(fù)制代碼

2.2.1 模塊寫法

export有兩種模塊導(dǎo)出方式：命名式導(dǎo)出（名稱導(dǎo)出）和默認(rèn)導(dǎo)出（定義式導(dǎo)出），命名式導(dǎo)出每個模塊可以多個，而默認(rèn)導(dǎo)出每個模塊僅一個。

export { name1, name2, …, nameN }; export { variable1 as name1, variable2 as name2, …, nameN }; exportlet name1, name2, …, nameN; // also varexportlet name1 = …, name2 = …, …, nameN; // also var, constexportdefault expression; exportdefaultfunction (…) { … } // also class, function*exportdefaultfunctionname1(…) { … } // also class, function*export { name1 asdefault, … };export * from …; export { name1, name2, …, nameN } from …; export { import1 as name1, import2 as name2, …, nameN } from …; 復(fù)制代碼 復(fù)制代碼

• name1… nameN－導(dǎo)出的“標(biāo)識符”。導(dǎo)出后，可以通過這個“標(biāo)識符”在另一個模塊中使用* import引用
• default－設(shè)置模塊的默認(rèn)導(dǎo)出。設(shè)置后import不通過“標(biāo)識符”而直接引用默認(rèn)導(dǎo)入
• －繼承模塊并導(dǎo)出繼承模塊所有的方法和屬性
• as－重命名導(dǎo)出“標(biāo)識符”
• from－從已經(jīng)存在的模塊、腳本文件…導(dǎo)出

參考資料

• raoenhui.github.io/es6/2018/12…
• es6.ruanyifeng.com/#docs/modul…
• www.cnblogs.com/liaojie970/…

Happy coding .. :)

總結(jié)

以上是生活随笔為你收集整理的CommonJS,AMD,CMD,ES6,require 和 import 详解的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。