深度掃盲JavaScript的模塊化（AMD , CMD , CommonJs 和 ES6）

 

原文地址

https://blog.csdn.net/haochangdi123/article/details/80408874

1、commonJS

一、內存狀況

對於基本數據類型，屬於複製。即會被模塊緩存。同時，在另外一個模塊能夠對該模塊輸出的變量從新賦值。

對於複雜數據類型，屬於淺拷貝。因爲兩個模塊引用的對象指向同一個內存空間，所以對該模塊的值作修改時會影響另外一個模塊。

// b.js
let num = 1;
let obj = {
    name: 'hcd'
};
setTimeout(() => {
  console.log('b.js-num:', num);
  console.log('b.js-name:', obj.name);
}, 1000)
module.exports = {
  num,
  obj
}



// a.js
let mod = require('./b.js')
mod.num = 2;
mod.obj.name = 'newName'
console.log('a.js-num:', mod.num);
console.log('a.js-name:', mod.obj.name);



//運行node
node a.js
a.js-num:  2
a.js-name: newName
b.js-num:  1         // 1秒後
b.js-name: newName  // 1秒後

二、執行狀況

當使用require命令加載某個模塊時，就會運行整個模塊的代碼。

當使用require命令加載同一個模塊時，不會再執行該模塊，而是取到緩存之中的值。也就是說，CommonJS模塊不管加載多少次，都只會在第一次加載時運行一次，之後再加載，就返回第一次運行的結果，除非手動清除系統緩存。

循環加載時，屬於加載時執行。即腳本代碼在require的時候，就會所有執行。一旦出現某個模塊被」循環加載」，就只輸出已經執行的部分，還未執行的部分不會輸出。

// a.js
exports.done = false
let b = require('./b.js')
console.log('a.js-1', b.done)
exports.done = true
console.log('a.js-2', '執行完畢')




// b.js
exports.done = false
let a = require('./a.js')
console.log('b.js-1', a.done)
exports.done = true
console.log('b.js-2', '執行完畢')




// c.js
let a = require('./a.js')
let b = require('./b.js')

console.log('c.js-1', '執行完畢', a.done, b.done)



運行node c.js
b.js-1 false
b.js-2 執行完畢
a.js-1 true
a.js-2 執行完畢
c.js-1 執行完畢 true true

2、AMD

一、官方定義

模塊自己和模塊之間的引用能夠被異步的加載，是一個概念

先引入的模塊，後使用的引用模塊的方法，因此咱們稱之爲依賴前置

二、AMD優勢

包括異步的調用和自己的高擴展性，

它實現瞭解耦，模塊在代碼中也可經過識別號進行查找。

3、cmd

同步模塊定義，是一個概念 

原則： 依賴就近原則

4、ES6

ES6 模塊輸出的是值的引用，輸出接口動態綁定，而 CommonJS 輸出的是值的拷貝

ES6 模塊編譯時執行，而 CommonJS 模塊老是在運行時加載

 

附 AMD和CMD的區別

AMD 經過 require.js實現 
CMD 經過 sea.js實現

一、相同處

RequireJS 和 Sea.js 都是模塊加載器，倡導模塊化開發理念，核心價值是讓 JavaScript 的模塊化開發變得簡單天然。

二、不一樣之處

定位有差別。RequireJS 想成爲瀏覽器端的模塊加載器，同時也想成爲 Rhino / Node 等環境的模塊加載器。Sea.js 則專一於 Web 瀏覽器端，同時經過 Node 擴展的方式能夠很方便跑在 Node 環境中。
遵循的規範不一樣。RequireJS 遵循 AMD（異步模塊定義）規範，Sea.js 遵循 CMD （通用模塊定義）規範。規範的不一樣，致使了二者 API 不一樣。Sea.js 更貼近 CommonJS Modules/1.1 和 Node Modules 規範。

RequireJS 是依賴前置，Sea.js是依賴就近

RequireJS 是先加載後執行，seaJS是按需加載執行（amd2.0添加了按需加載的方法）

插件機制不一樣。RequireJS 採起的是在源碼中預留接口的形式，插件類型比較單一。Sea.js 採起的是通用事件機制，插件類型更豐富。