CommonJS,AMD,CMD,ES6

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

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

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

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

ES6 模塊與 CommonJS 模塊的差異

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

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

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

---

前言

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

1 require

特點：

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

1.1 CommonJS

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

1.1.1 用法

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

1.1.2 模塊寫法

模塊寫法分exports和module.exports。

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

1.2 AMD

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

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

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

1.2.1 用法

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

1.2.1 模塊寫法

define(id?, dependencies?, factory)

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

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

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

模塊還依賴其他模塊

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

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

1.3 CMD

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

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); }); 復制代碼 復制代碼

1.3.1 模塊寫法

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

2 import

特點：

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

可對比require的特點，發現import完勝require,推薦用import取代require

2.1.1 用法

import有兩種模塊導入方式：命名式導入（名稱導入）和默認導入（定義式導入），以及 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"; 復制代碼 復制代碼

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

import()

import()返回一個 Promise 對象。

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

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

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

2.2.1 模塊寫法

export有兩種模塊導出方式：命名式導出（名稱導出）和默認導出（定義式導出），命名式導出每個模塊可以多個，而默認導出每個模塊僅一個。

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 …; 復制代碼 復制代碼

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

參考資料

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

Happy coding .. :)

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。