前言

在項目開發過程中，引入模塊有時使用require()，有時使用import…from..，導出模塊有時用export或export default，一直會這么使用，但是沒有太在意區別，以及它們分別遵循的是哪個模塊規范。接下來就直接介紹幾種模塊的使用。

具體內容

一、模塊概念介紹

模塊通常是指編程語言所提供的代碼組織機制，利用此機制可將程序拆解為獨立且通用的代碼單元；

所謂模塊化主要是解決代碼分割、作用域隔離、模塊之間的依賴管理以及發布到生產環境的自動化打包與處理等多方面；

模塊規范主要是進行模塊加載，一個單獨的文件也算是一個模塊，一個模塊就是一個單獨的作用域，不會污染全局作用域；

一個模塊就是一個對其他模塊暴露自己的屬性或者方法的文件。

二、模塊的優點

（1）可維護性。因為模塊是獨立的，一個設計良好的模塊會讓外面的代碼對自己的依賴越少越好，這樣自己就可以獨立去更新和改進。

（2）命名空間。在 JavaScript 里面，如果一個變量在最頂級的函數之外聲明，它就直接變成全局可用。因此，常常不小心出現命名沖突的情況。使用模塊化開發來封裝變量，可以避免污染全局環境。

（3）重用代碼。有時從之前寫過的項目中拷貝代碼到新的項目，這沒有問題，但是更好的方法是，通過模塊引用的方式，來避免重復的代碼庫。

三、ES6、CommonJS、AMD、CMD、UMD模塊介紹

（1）ES6模塊（Module）

ES6的模塊自動采用嚴格模式，不管是否在模塊頭部加上"use strict";

嚴格模式主要有以下這些限制：

變量必須聲明后再使用
函數的參數不能有同名屬性，否則報錯
不能使用with語句
不能對只讀屬性賦值，否則報錯
不能使用前綴0表示八進制數，否則報錯
不能刪除不可刪除的屬性，否則報錯
不能刪除變量delete prop，會報錯，只能刪除屬性delete global[prop]
eval不會在它的外層作用域引入變量
eval和arguments不能被重新賦值
arguments不會自動反映函數參數的變化
不能使用arguments.callee
不能使用arguments.caller
禁止this指向全局對象
不能使用fn.caller和fn.arguments獲取函數調用的堆棧
增加了保留字（比如protected、static和interface）

?導出模塊 export

作為一個模塊，可以選擇性地給其他模塊暴露自己的屬性和方法，供其他模塊使用

1 //profile.js
2 export var firstName = "wang";
3 export var lastName = "qin";
4 export var born = "1996";
5 //等價于
6 var firstName = "wang";
7 var lastName = "qin";
8 var born = "1996";
9 export {firstName,lastName,born}

1、通常情況下，export輸出的變量就是本來的名字，但是可以使用as關鍵字對輸出的變量進行重命名

1 function v1(){}
2 function v2(){}
3 
4 export{
5     v1 as stream1,
6     v2 as stream2,
7     v2 as streamLatestVersion
8 };
9 //使用as關鍵字，重命名函數v1和v2的對外接口；重命名之后，v2可以用不同的名字輸出2次

2、需要特別注意的是，export命令規定的是對外的接口，必須與模塊內部的變量建立一 一對應關系

 1 //注意：以下2種寫法報錯是因為沒有提供對外的接口；第1種寫法直接輸出1；
 2 //第2種寫法通過變量m，還是直接輸出1,1只是一個值，不是對外接口；
 3 
 4 //報錯
 5 export 1;     
 6 
 7 //報錯
 8 var m = 1;
 9 export m;
10 
11 //以下3種寫法都是正確的，規定了對外的接口m；其他腳本通過訪問這個接口，可以取到1；
12 //實質就是在接口名與模塊內部變量之間建立了一一對應關系；
13 //方法一
14 export var m = 1;
15 //方法二
16 var m = 1;
17 export {m};
18 //方法三
19 var n = 1;
20 export {n as m};

3、export命令和import命令可以出現在模塊的任何位置，只要處于模塊頂層就可以。如果處于塊級作用域內，就會報錯

1 function foo(){
2     export default 'bar'     //語法錯誤
3 }
4 foo();

?默認導出模塊 export default

每個模塊支持我們導出一個沒有名字的變量，使用關鍵語句export default來實現

1 //module.js
2 export default function(){   //使用export default關鍵字對外導出一個匿名函數
3     console.log('I am default Fn');
4 }
5 
6 //導入上面模塊時，可以為該匿名函數取任意名字
7 import defaultFn from './module.js'
8 defaultFn();      //輸出"I am default Fn"

1、默認輸出和正常輸出的比較

1 export default function diff(){}     //默認導出
2 import diff from 'diff';      //導入
3 
4 
5 export function diff(){}    //正常導出
6 import {diff} from 'diff';   //導入
7 
8 //注意：使用export default默認導出時，對應的import語句不需要使用大括號；
9 //而使用export正常導出時，對應的import語句需要使用大括號；

注意：export default命令用于指定模塊的默認輸出。顯然，一個模塊只能有一個默認輸出，因此export default命令只能使用一次。所以，import命令后面才不用加大括號，因為只可能對應一個方法。

2、export default本質是將該命令后面的值，賦給default變量以后再默認，所以直接將一個值寫在export default之后

1 //正確；指定對外接口為default
2 export default 66;   
3 
4 //報錯；因為沒有指定對外的接口
5 export 66;    

3、在一條import語句中，同時導入默認方法和其他變量，可以寫成下面這樣

1 export default function(){}     //默認導出
2 export function each(obj,iterator,context){}    //正常導出
3 
4 //同時導入默認方法和其他變量
5 import _,{each} from 'loadsh'

?導入模塊 import

作為一個模塊，可以根據需要，引入其他模塊的提供的屬性或者方法，供自己模塊使用

1、import命令接受一對大括號，里面指定要從其他模塊導入的變量名。大括號里面的變量名，必須與被導入模塊（profile.js）對外接口的名稱相同。如果想為輸入的變量重新取一個名字，import命令要使用as關鍵字，將輸入的變量重命名

1 import {lastName as realName} from './profile.js'

2、import后面的from指定模塊文件的位置，可以是相對路徑，也可以是絕對路徑，.js路徑可以省略。如果只是模塊名，不帶有路徑，那么必須有配置文件，告訴 JavaScript 引擎該模塊的位置

3、import命令具有提升效果，會提升到整個模塊的頭部，首先執行

1 foo();
2 import { foo } from 'my_module';
3 //先調用foo()不會報錯，原因是import的執行早于foo()的調用；
4 //本質是因為import命令是在編譯階段執行，在代碼運行之前；

4、由于import是靜態執行，所以不能使用表達式和變量，這些只有在運行時才能得到結果的語法結構

 1 //報錯
 2 import { 'f' + 'oo' } from 'my_module';
 3  
 4 //報錯
 5 let module = 'my_module';
 6 import { foo } from module;
 7  
 8 //報錯
 9 if (x === 1) {
10   import { foo } from 'module1';
11 } else {
12   import { foo } from 'module2';
13 }

5、import語句會執行所加載的模塊

1 import 'loadsh' //僅僅執行loadsh模塊，但不輸入任何值

（2）CommonJS

CommonJS 最開始是 Mozilla 的工程師于 2009 年開始的一個項目，它的目的是讓瀏覽器之外的 JavaScript （比如服務器端或者桌面端）能夠通過模塊化的方式來開發和協作。

在 CommonJS 規范中，每個 JavaScript 文件就是一個獨立的模塊上下文（module context），在這個上下文中默認創建的屬性都是私有的。也就是說，在一個文件定義的變量（還包括函數和類），都是私有的，對其他文件是不可見的。

需要注意的是，CommonJS規范的主要適用場景是服務器端編程，采用同步加載模塊的策略。

如果某個文件依賴3個模塊，代碼會一個一個依次加載它們。

CommonJS模塊化規范實現方案主要包含require與module.exports( exports )這兩個關鍵字，允許某個模塊對外暴露部分接口并且由其他模塊導入使用。

 1 //======sayHello.js=======
 2 function sayHello(){
 3     this.hello = function(){
 4         console.log('hello');
 5     };
 6     this.hi = function(){
 7         console.log('hi');
 8     }
 9 }
10 module.exports = sayHello;
11 
12 //=======main.js===========
13 var say = require('./sayHello.js');
14 var sayPlay = new say();
15 sayPlay.hello();     //hello

作為服務器端的解決方案，CommonJS需要一個兼容的腳本加載器（即NodeJS）作為前提條件，該腳本加載器必須支持名為require和module.exports的函數,它們可以將模塊相互導入導出。

==================補充說明：Node.js=======================

1、Node是對CommonJS模塊規范的實現。

2、Node.js模塊分為兩大類：一類是核心模塊，一類是文件模塊；

核心模塊：就是Node.js標準API中提供的模塊，如fs/http/path等，這些由Node.js官方提供的模塊，編譯成了二進制代碼，可以直接通過require獲取核心模塊，例如require('fs')，核心模塊擁有最高的加載優先級，如果有模塊與核心模塊命名沖突，Node.js總是會加載核心模塊。

文件模塊：是存儲為單獨的文件（或文件夾）的模塊，可能是JavaScript代碼、JSON或編譯好的C/C++代碼。在不顯式指定文件模塊擴展名的時候，Node.js會分別試圖加上.js、.json、.node(編譯好的C/C++代碼)。

　　　　　　　　Node.js會根據后綴名來決定3類文件模塊的加載方法：

　　　　　　　　.js通過fs模塊同步讀取js文件并編譯執行。

　　　　　　　　.node通過C/C++進行編寫的Addon。通過dlopen方法進行加載。

　　　　　　　　.json讀取文件，調用JSON.parse解析加載。

 1 /* js后綴的編譯過程：【Node.js在編譯js文件的過程中實際完成的步驟有對js文件內容進行頭尾包裝 】*/
 2 //==========circle.js===========
 3 var PI = Math.PI;
 4 exports.area = function (r) {
 5     return PI * r * r;
 6 };
 7 exports.circumference = function (r) {
 8     return 2 * PI * r;
 9 };
10  
11 //============app.js============
12 var circle = require('./circle.js');
13 console.log( 'The area of a circle of radius 4 is ' + circle.area(4));
14  
15 
16 //==============app包裝后=========
17 (function (exports, require, module, __filename, __dirname) {
18     var circle = require('./circle.js');
19     console.log('The area of a circle of radius 4 is ' + circle.area(4));
20 });
21  
22 //這段代碼會通過原生模塊vm的runInThisContext方法執行
23 //（類似eval，只是具有明確上下文，不污染全局），返回為一個具體的function對象。
24 //最后傳入module對象的exports，require方法，module，文件名，目錄名作為實參并執行

3、加載方式

按路徑加載模塊

如果require參數以" / "開頭，那么就以絕對路徑的方式查找模塊名稱，如果參數以" ./ "、" ../ "開頭，那么則是以相對路徑的方式來查找模塊。

查找node_modules目錄加載模塊

如果require參數不以" / "、" ./ "、" ../ "開頭，而該模塊又不是核心模塊，那么就要通過查找node_modules加載模塊了。使用npm工具獲取的模塊/包通常就是以這種方式加載的。

4、加載緩存

Node.js模塊不會被重復加載，因為Node.js通過文件名緩存所有加載過的文件模塊，之后再訪問相同文件模塊時就不會重新加載了。

注意：Node.js是根據實際文件名緩存的，而不是require()提供的參數緩存的，也就是說即使分別通過require('express')和require('./node_modules/express')加載兩次，也不會重復加載，因為盡管兩次參數不同，解析到的文件卻是同一個。

Node.js 中的模塊在加載之后是以單例化運行，并且遵循值傳遞原則：如果是一個對象，就相當于這個對象的引用。

5、模塊載入過程（需進一步理解）

加載文件模塊的工作，主要由原生模塊module來實現和完成，該原生模塊在啟動時已經被加載，進程直接調用到runMain靜態方法。

 1 //例如運行： node app.js
 2 
 3 Module.runMain = function () {
 4     // Load the main module--the command line argument.
 5     Module._load(process.argv[1], null, true);
 6 };
 7  
 8 //_load靜態方法在分析文件名之后執行
 9 var module = new Module(id, parent);
10  
11 //根據文件路徑緩存當前模塊對象，該模塊實例對象則根據文件名加載。
12 module.load(filename);

6、require 函數

require 引入的對象主要是函數。當 Node 調用 require() 函數，并且傳遞一個文件路徑給它的時候，Node 會經歷如下幾個步驟：

Resolving：找到文件的絕對路徑；

Loading：判斷文件類型；

Wrapping：打包，給文件賦予一個私有作用范圍。這是使 require 和 module 模塊在本地引用的一種方法；

Evaluating：VM 對加載的代碼進行處理；

Caching：當再次需要用這個文件時，不需要重復一遍上面步驟。

7、require.extensions 來查看對三種文件的支持情況

　　Node 對每種擴展名所使用的函數及其操作：

　　對 .js 文件使用 module._compile；

　　對 .json 文件使用 JSON.parse；

　　對 .node 文件使用 process.dlopen。

8、文件查找策略

從文件模塊緩存中加載

盡管原生模塊與文件模塊的優先級不同，但是優先級最高的是從文件模塊的緩存中加載已經存在的模塊。

從原生模塊加載

原生模塊的優先級僅次于文件模塊緩存的優先級。require方法在解析文件名之后，優先檢查模塊是否在原生模塊列表中。以http模塊為例，盡管在目錄下存在一個http、http.js、http.node、http.json文件，require(“http”)都不會從這些文件中加載，而是從原生

模塊中加載。原生模塊也有一個緩存區，同樣也是優先從緩存區加載。如果緩存區沒有被加載過，則調用原生模塊的加載方式進行加載和執行。

從文件加載

當文件模塊緩存中不存在，而且不是原生模塊的時候，Node.js會解析require方法傳入的參數，并從文件系統中加載實際的文件，加載過程中的包裝和編譯細節在前面說過是調用load方法。

 1 ======當 Node 遇到 require(X) 時，按下面的順序查找并加載===========
 2  
 3 （1）如果 X 是內置模塊（比如 require('http'）) 
 4 　　a. 返回該模塊。 
 5 　　b. 不再繼續執行。
 6  
 7 （2）如果 X 以 "./" 或者 "/" 或者 "../" 開頭 
 8 　　a. 根據 X 所在的父模塊，確定 X 的絕對路徑。 
 9 　　b. 將 X 當成文件，依次查找下面文件，只要其中有一個存在，就返回該文件，不再繼續執行。
10         X
11         X.js
12         X.json
13         X.node
14  
15 　　c. 將 X 當成目錄，依次查找下面文件，只要其中有一個存在，就返回該文件，不再繼續執行。
16         X/package.json（main字段）
17         X/index.js
18         X/index.json
19         X/index.node
20  
21 （3）如果 X 不帶路徑 
22 　　a. 根據 X 所在的父模塊，確定 X 可能的安裝目錄。 
23 　　b. 依次在每個目錄中，將 X 當成文件名或目錄名加載。
24  
25 （4） 拋出 "not found"

9、模塊循環依賴

 1 //創建兩個文件，module1.js 和 module2.js，并且讓它們相互引用
 2 //========module1.js==========
 3 exports.a = 1;
 4 require('./module2');
 5 exports.b = 2;
 6 exports.c = 3;
 7     
 8 //========module2.js=============
 9 const Module1 = require('./module1');
10 console.log('Module1 is partially loaded here', Module1);

在 module1 完全加載之前需要先加載 module2，而 module2 的加載又需要 module1。這種狀態下，我們從 exports 對象中能得到的就是在發生循環依賴之前的這部分。上面代碼中，只有 a 屬性被引入，因為 b 和 c 都需要在引入 module2 之后才能加載進來。

Node 使這個問題簡單化，在一個模塊加載期間開始創建 exports 對象。如果它需要引入其他模塊，并且有循環依賴，那么只能部分引入，也就是只能引入發生循環依賴之前所定義的這部分。

（3）AMD
AMD 是 Asynchronous Module Definition 的簡稱，即“異步模塊定義”，是從 CommonJS 討論中誕生的。AMD 優先照顧瀏覽器的模塊加載場景，使用了異步加載和回調的方式。

RequireJS 是一個前端的模塊化管理的工具庫，遵循AMD規范。

（4）CMD
CMD（Common Module Definition），在CMD中，一個模塊就是一個文件。

Sea.js遵循CMD規范，與NodeJS般的書寫模塊代碼。

（5）UMD

統一模塊定義（UMD：Universal Module Definition ）就是將 AMD 和 CommonJS 合在一起的一種嘗試，常見的做法是將CommonJS 語法包裹在兼容 AMD 的代碼中。

結束語

　　在當前項目開發過程中，主要使用ES6模塊化規范：即import和export/exportdefault;有時也使用CommonJS模塊化規范，Nodejs遵循該模塊化規范：即require和exports。其他模塊化規范目前只作為了解，后續項目開發中進行更深入學習和總結。

總結

以上是生活随笔為你收集整理的ES6, CommonJS, AMD, CMD,UMD模块化规范介绍及使用的全部內容，希望文章能夠幫你解決所遇到的問題。

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