JS模組化進程

標籤：方法   一個   伺服器   api   targe   執行   瀏覽器   非同步載入   定義   

js的模組化進程

現在前端技術日新月異，對於同一個問題痛點，各個時段有各自的解決方案，這就帶來了很大差異。今天我就打算梳理js模組化的曆史進程，講一講這些方案要做什麼，怎麼做。

js模組化進程的起因

現今的很多網頁其實可以看做是功能豐富的應用，它們擁有著複雜的JavaScript代碼和一大堆依賴包。當一個項目開發的越來越複雜的時候，你會遇到一些問題：命名衝突（變數和函數命名可能相同），檔案依賴（引入外部的檔案數目、順序問題）等。

javascript發展的越來越快，超過了它產生時候的自我定位。這時候js模組化就出現了。

什麼是模組化

模組化開發是一種管理方式，是一種生產方式，一種問題的解決方案。他按照功能將一個軟體切分成許多部分單獨開發,然後再組裝起來,每一個部分即為模組。當使用模組化開發的時候可以避免剛剛的問題，並且讓開發的效率變高，以及方便後期的維護。

js模組化進程一、早期：script標籤

這是最原始的 JavaScript 檔案載入方式，如果把每一個檔案看做是一個模組，那麼他們的介面通常是暴露在全域範圍下，也就是定義在 window 對象中。

缺點： 
1.汙染全域範圍 
2.只能按script標籤書寫順序載入 
3.檔案依賴關係靠開發人員主觀解決

二、發展一：CommonJS規範

允許模組通過require方法來同步載入（同步意味阻塞）所要依賴的其他模組，然後通過module.exports來匯出需要暴露的介面。

// module add.jsmodule.exports = function add (a, b) { return a + b; }// main.jsvar {add} = require(‘./math‘);console.log(‘1 + 2 = ‘ + add(1,2);

CommonJS 是以在瀏覽器環境之外構建JavaScript 生態系統為目標而產生的項目，比如在伺服器和案頭環境中。

三、發展二：AMD/CMD（1）AMD

AMD 是 RequireJS 在推廣過程中對模組定義的正常化產出（非同步模組定義）。

AMD標準中定義了以下兩個API：

1. require([module], callback);
2. define(id, [depends], callback);

require介面用來載入一系列模組，define介面用來定義並暴露一個模組。

    define([‘./a‘, ‘./b‘], function(a, b) {          // 依賴必須一開始就寫好           a.add1()            ...          b.add2()            ...    }) 

優點： 
1、適合在瀏覽器環境中非同步載入模組 2、可以並行載入多個模組

（2）CMD

CMD 是 SeaJS 在推廣過程中對模組定義的正常化產出。(在CommomJS和AMD基礎上提出)

define(function (requie, exports, module) {     //依賴可以就近書寫     var a = require(‘./a‘);     a.add1();     ...     if (status) {         var b = requie(‘./b‘);         b.add2();     } }); 

優點： 
1、依賴就近，順延強制 2、可以很容易在伺服器中運行

（3）AMD 和 CMD 的區別

AMD和CMD起來很相似，但是還是有一些細微的差別：

1、對於依賴的模組，AMD是提前執行，CMD是順延強制。

2、AMD推崇依賴前置；CMD推崇依賴就近，只有在用到某個模組的時候再去require。

3、AMD 的 API 預設是一個當多個用，CMD 的 API 嚴格區分，推崇職責單一

四、發展三：ES6模組化

EcmaScript6 標準增加了JavaScript語言層面的模組體系定義。

在 ES6 中，我們使用export關鍵字來匯出模組，使用import關鍵字引用模組。

// module math.jsxexport default class Math extends React.Component{}// main.jsimport Math from "./Math";

目前很少JS引擎能直接支援 ES6 標準，因此 Babel 的做法實際上是將不被支援的import翻譯成目前已被支援的require。

JS模組化進程