前端模塊化總結

前言

以模塊化的方式來開發能夠提升代碼複用率，而且能夠更好地拆分組件，下降耦合度，提升可維護性。
目前流行的js模塊化規範有CommonJS、AMD、CMD以及ES6的模塊系統。

模塊化規範

1. CommonJS

• 模塊的加載：用同步的形式加載文件。對於服務器端，模塊文件都在本地磁盤，因此讀取很是快，比較適合。對於瀏覽器端，要從服務器加載模塊，可是限於網絡緣由，更適合異步的形式。

module.exports = value  //暴露模塊
exports.xxx = value //暴露模塊
require(xxx) //引入模塊 若是是第三方模塊，xxx爲模塊名；若是是自定義模塊，xxx爲模塊文件路徑

注：瀏覽器須要從服務端下載這個模塊文件，因此說若是用CommonJS的require方式加載模塊，須要等代碼模塊下載完畢，並運行以後才能獲得所須要的API。因此不推薦，由於會阻塞瀏覽器渲染頁面。

2. AMD

• 模塊的加載：採用異步的形式。全部依賴此模塊的語句都定義在一個回調函數中，等模塊加載完畢才執行。

require.config()  //指定引用路徑等
define()  //定義模塊
require()  //加載模塊。

3. CMD

• 模塊的加載：異步加載，專門用於瀏覽器端，模塊使用時纔會加載。

4. ES6 Module

• ES6 模塊的設計思想是儘可能的靜態化，使得編譯時就能肯定模塊的依賴關係，以及輸入和輸出的變量。

export命令用於規定模塊的對外接口，import命令用於輸入其餘模塊提供的功能。

ES6與CommonJS模塊的差別

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

• CommonJS模塊輸出的是值的拷貝，也就是說一旦輸出這個值，模塊內部的變化就影響不到這個值。
• ES6模塊的運行機制不同。JS引擎對腳本靜態分析時，遇到import時，會生成一個只讀引用，只有腳本真正執行的時候，再根據這個只讀引用，到被加載的模塊去取值。ES6模塊是動態引用

2. CommonJS模塊是運行時加載，ES6是編譯時輸出接口

• CommonJS加載的是一個對象（即module.exports屬性) 該對象只有在腳本運行時纔會生成，而ES6模塊不是對象，他的對外接口只是一種靜態定義，在代碼靜態解析階段就會生成。

CommonJS與AMD的對比

• CommonJS通常用於服務端，AMD通常用於瀏覽器客戶端
• CommonJS和AMD都是運行時加載

參考資料：

1. https://juejin.cn/post/684490...
2. https://segmentfault.com/a/11...