深圳Web前端培訓學習：js中的模塊化--【千鋒】

深圳 Web 前端培訓學習： js 中的模塊化 --【千鋒】

0. 前言   

我們知道最常見的模塊化方案有CommonJS 、 AMD 、 CMD 、 ES6 ， AMD 規范一般用于瀏覽器，異步的，因為模塊加載是異步的， js 解釋是同步的，所以有時候導致依賴還沒加載完畢，同步的代碼運行結束； CommonJS 規范一般用于服務端，同步的，因為在服務器端所有文件都存儲在本地的硬盤上，傳輸速率快而且穩定。

1.script 標簽引入

最開始的時候，多個script 標簽引入 js 文件。但是，這種弊端也很明顯，很多個 js 文件合并起來，也是相當于一個 script ，造成變量污染。項目大了，不想變量污染也是很難或者不容易做到，開發和維護成本高。 而且對于標簽的順序，也是需要考慮一陣，還有加載的時候同步，更加是一種災難，幸好后來有了渲染完執行的 defer 和下載完執行的 async ，進入新的時代了。

接著，就有各種各樣的動態創建script 標簽的方法，最終發展到了上面的幾種方案。

2.AMD 與 CMD

2.1AMD

異步模塊定義，提供定義模塊及異步加載該模塊依賴的機制。AMD 遵循依賴前置，代碼在一旦運行到需要依賴的地方，就馬上知道依賴是什么。而無需遍歷整個函數體找到它的依賴，因此性能有所提升。但是開發者必須先前知道依賴具體有什么，并且顯式指明依賴，使得開發工作量變大。而且，不能保證模塊加載的時候的順序。 典型代表 requirejs 。 require.js 在聲明依賴的模塊時會立刻加載并執行模塊內的代碼。 require 函數讓你能夠隨時去依賴一個模塊，即取得模塊的引用，從而即使模塊沒有作為參數定義，也能夠被使用。他的風格是依賴注入，比如：

/api.js

define('myMoudle',['foo','bar'],function(foo,bar){

    // 引入了 foo 和 bar ，利用 foo 、 bar 來做一些事情

    return {

        baz:function(){return 'api'}

               }

});

require(['api'],function(api) {

    console.log(api.baz())

})

復制代碼

然后你可以在中間隨時引用模塊，但是模塊第一次初始化的時間比較長。這就像開始的時候很拼搏很辛苦，到最后是美滋滋。

2.2CMD

通用模塊定義，提供模塊定義及按需執行模塊。遵循依賴就近，代碼在運行時，最開始的時候是不知道依賴的，需要遍歷所有的require 關鍵字，找出后面的依賴。一個常見的做法是將 function toString 后，用正則匹配出 require 關鍵字后面的依賴。 CMD 里，每個 API 都簡單純粹。可以讓瀏覽器的模塊代碼像 node 一樣，因為同步所以引入的順序是能控制的。 對于典型代表 seajs ，一般是這樣子：

define(function(require,exports,module){

    //... 很多代碼略過

     var a = require('./a');

    // 要用到 a ，于是引入了 a

    // 做一些和模塊 a 有關的事情

});

復制代碼

對于b.js 依賴 a.js

//a.js

define(function(require, exports) {

    exports.a = function(){// 也可以把他暴露出去

    // 很多代碼    

    };

});

//b.js

define(function(require,exports){

      // 前面干了很多事情，突然想要引用 a 了

        var fun = require('./a');

????console.log(fun.a()); // 就可以調用到及執行 a 函數了。

   })

// 或者可以 use

seajs.use(['a.js'], function(a){

    // 做一些事情

});

復制代碼

AMD 和 CMD 對比： AMD 推崇依賴前置、提前執行， CMD 推崇依賴就近、延遲執行。

AMD 需要先列出清單，后面使用的時候隨便使用（依賴前置），異步，特別適合瀏覽器環境下使用（底層其實就是動態創建 script 標簽）。而且 API 默認是一個當多個用。

CMD 不需要知道依賴是什么，到了改需要的時候才引入，而且是同步的，就像臨時抱佛腳一樣。

對于客戶端的瀏覽器，一說到下載、加載，肯定就是和異步脫不了關系了，注定瀏覽器一般用AMD 更好了。但是， CMD 的 api 都是有區分的，局部的 require 和全局的 require 不一樣。

3.CommonJS 與 ES6

3.1 ES6

ES6 模塊的 script 標簽有點不同，需要加上 type='module'

<script src='./a.js' type='module'>...</script>

復制代碼

對于這種標簽都是異步加載，而且是相當于帶上defer 屬性的 script 標簽，不會阻塞頁面，渲染完執行。但是你也可以手動加上 defer 或者 async ，實現期望的效果。 ES6 模塊的文件后綴是 mjs ，通過 import 引入和 export 導出。我們一般是這樣子：

//a.mjs

import b from 'b.js'

//b.mjs

export default b

復制代碼

ES6 畢竟是 ES6 ，模塊內自帶嚴格模式，而且只在自身作用域內運行。在 ES6 模塊內引入其他模塊就要用 import 引入，暴露也要用 export 暴露。另外，一個模塊只會被執行一次。 import 是 ES6 新語法，可靜態分析，提前編譯。他最終會被 js 引擎編譯，也就是可以實現編譯后就引入了模塊，所以 ES6 模塊加載是靜態化的，可以在編譯的時候確定模塊的依賴關系以及輸入輸出的變量。 ES6 可以做到編譯前分析，而 CMD 和 AMD 都只能在運行時確定具體依賴是什么。

3.2CommonJS

一般服務端的文件都在本地的硬盤上面。對于客戶，他們用的瀏覽器是要從這里下載文件的，在服務端一般讀取文件非常快，所以同步是不會有太大的問題。require 的時候，馬上將 require 的文件代碼運行

代表就是nodejs 了。用得最多的，大概就是：

//app.js

var route = require('./route.js')// 讀取控制路由的 js 文件

//route.js

var route  = {......}

module.exports = route

復制代碼

require 第一次加載腳本就會馬上執行腳本，生成一個對象

區別： CommonJS 運行時加載，輸出的是值的拷貝，是一個對象（都是由 module.export 暴露出去的），可以直接拿去用了，不用再回頭找。所以，當 module.export 的源文件里面一些原始類型值發生變化， require 這邊不會隨著這個變化而變化的，因為被緩存了。但是有一種常規的操作，寫一個返回那個值的函數。就像 angular 里面 $watch 數組里面的每一個對象，舊值是直接寫死，新值是寫一個返回新值的函數，這樣子就不會寫死。 module.export 輸出一個取值的函數，調用的時候就可以拿到變化的值。

ES6 是編譯時輸出接口，輸出的是值的引用，對外的接口只是一種靜態的概念，在靜態解釋后已經形成。當腳本運行時，根據這個引用去原本的模塊內取值。所以不存在緩存的情況， import 的文件變了，誰發出 import 的也是拿到這個變的值。模塊里面的變量綁定著他所在的模塊。另外，通過 import 引入的這個變量是只讀的，試圖進行對他賦值將會報錯。

4. 循環依賴

就是a 依賴 b ， b 依賴 a ，對于不同的規范也有不同的結果。

4.1CommonJS

對于node ，每一個模塊的 exports={done:false} 表示一個模塊有沒有加載完畢，經過一系列的加載最后全部都會變為 true 。 同步，從上到下，只輸出已經執行的那部分代碼 首先，我們寫兩個 js 用 node 跑一下：

//a.js

console.log('a.js')

var b = require('./b.js')

console.log(1)

//b.js

console.log('b.js')

var a = require('./a.js')

console.log(2)

// 根據他的特點， require 一個文件的時候，馬上運行內部的代碼，所以相當于

console.log('a.js')

console.log('b.js')

console.log(2)

console.log(1)

// 輸出是 a.js 、 b.js 、 2 、 1

復制代碼

加上export 的時候：

//a.js

module.exports = {val:1}

var b = require('./b.js')

console.log(b.val)

module.exports = {val:2}

b.val = 3

console.log(b)

//b.js

module.exports = {val:1}

var a = require('./a.js')

console.log(a.val)

module.exports = {val:2}

a.val = 3

console.log(a)

//1. 在 a.js 暴露出去一個對象 module.exports = {val:1}

//2.require 了 b ，來到 b ，運行 b 腳本

//3.b 的第一行，把 {val:1} 暴露出去，引入剛剛 a 暴露的 {val:1} ，打印 a.val 的結果肯定是 1

//4. 重新暴露一次，是 {val:2} ，然后做了一件多余的事情，改 a.val 為 3 （反正是拷貝過的了怎么改都不會影響 a.js ），毫無疑問打印出 { val: 3 }

//5. 回到 a ，繼續第三行，打印 b.val ，因為 b 暴露的值是 2 ，打印 2

//6. 繼續再做一件無意義的事情，打印 { val: 3 }

復制代碼

解決辦法：代碼合理拆分

4.2ES6 模塊

ES6 模塊是輸出值的引用，是動態引用，等到要用的時候才用，因此可以完美實現相互依賴，在相互依賴的 a.mjs 和 b.mjs ，執行 a 的時候，當發現 import 馬上進入 b 并執行 b 的代碼。當在 b 發現了 a 的時候，已經知道從 a 輸入了接口來到 b 的，不會回到 a 。但是在使用的過程中需要注意，變量的順序。

如果是單純的暴露一個基本數據類型，當然會報錯not defined 。 因為函數聲明會變量提升，所以我們可以改成函數聲明（不能用函數表達式）

//a.mjs

import b from './b'

console.log(b())

function a(){return 'a'}

export default a

//b.mjs

import a from './a'

console.log(a())

function b(){return 'b'}

export default b

復制代碼

4.3 require

我們一般使用的時候，都是依賴注入，如果是有循環依賴，那么可以直接利用require 解決

define('a',['b'],function(b){

    //dosomething

});

define('b',['a'],function(a){

    //dosomething

});

// 為了解決循環依賴，在循環依賴發生的時候，引入 require ：

define('a',['b','require'],function(b,require){

    //dosomething

    require('b')

});

復制代碼

4.4 sea

循環依賴，一般就是這樣

//a.js

define(function(require, exports, module){

    var b = require('./b.js');

    //......

});

//b.js

define(function(require, exports, module){

    var a = require('./a.js');

    //......

});

復制代碼

而實際上，并沒有問題，因為sea 自己解決了這個問題： 一個模塊有幾種狀態：

'FETCHING': 模塊正在下載中 'FETCHED': 模塊已下載 'SAVED': 模塊信息已保存 'READY': 模塊的依賴項都已下載，等待編譯 'COMPILING': 模塊正在編譯中 'COMPILED': 模塊已編譯

步驟：

1. 模塊 a 下載并且下載完成 FETCHED

2. 編譯 a 模塊（執行回調函數）

3. 遇到了依賴 b ， b 和自身沒有循環依賴， a 變成 SAVED

4. 模塊 b 下載并且下載完成 FETCHED

5.b 遇到了依賴 a ， a 是 SAVED ，和自身有循環依賴， b 變成 READY ，編譯完成后變成 COMPILED

6. 繼續回到 a ，執行剩下的代碼，如果有其他依賴繼續重復上面步驟，如果所有的依賴都是 READY ， a 變成 READY

7. 繼續編譯，當 a 回調函數部分所有的代碼運行完畢， a 變成 COMPILED

對于所有的模塊相互依賴的通用的辦法，將相互依賴的部分抽取出來，放在一個中間件，利用發布訂閱模式解決

5.webpack 是如何處理模塊化的

假設我們定義兩個js ： app.js 是主入口文件， a.js 、 b.js 是 app 依賴文件，用的是 COMMONJS 規范 webpack 首先會從入口模塊 app.js 開始，根據引入方法 require 把所有的模塊都讀取，然后寫在一個列表上：

var modules = {

  './b.js': generated_b,

  './a.js': generated_a,

  './app.js': generated_app

}

復制代碼

'generated_'+name 是一個 IIFE ，每個模塊的源代碼都在里面，不會暴露內部的變量。比如對于沒有依賴其他模塊的 a.js 一般是這樣，沒有變化：

function generated_a(module, exports, webpack_require) {

   // ...a 的全部代碼

}

復制代碼

對于app.js 則不一樣了：

function generated_app(module, exports, webpack_require) {

  var a_imported_module = __webpack_require__('./a.js');

  var b_imported_module = __webpack_require__('./b.js');

  a_imported_module['inc']();

  b_imported_module['inc']();

}

復制代碼

webpack_require 就是 require 、 exports 、 import 這些的具體實現，夠動態地載入模塊 a 、 b ，并且將結果返回給 app

對于webpack_require ，大概是這樣的流程

var installedModules = {};// 保存已經加載完成的模塊

function webpack_require(moduleId) {

  if (installedModules[moduleId]) {// 如果已經加載完成直接返回

    return installedModules[moduleId].exports;

  }

  var module = installedModules[moduleId] = {// 如果是第一次加載，則記錄在表上

            i: moduleId,

            l: false,// 沒有下載完成

            exports: {}

  };

// 在模塊清單上面讀取對應的路徑所對應的文件，將模塊函數的調用對象綁定為 module.exports ，并返回

  modules[moduleId].call(module.exports, module, module.exports,__webpack_require__);

  module.l = true;// 下載完成

  return module.exports;

}

復制代碼

對于webpack 打包后的文件，是一個龐大的 IIFE ，他的內容大概是這樣子：

(function(modules) {

    var installedModules = {};

    function __webpack_require__(moduleId) { /*...*/}

    __webpack_require__.m = modules;// 所有的文件依賴列表

    __webpack_require__.c = installedModules;// 已經下載完成的列表

    __webpack_require__.d = function(exports, name, getter) {// 定義模塊對象的 getter 函數

        if(!__webpack_require__.o(exports, name)) {

            Object.defineProperty(exports, name, {

                configurable: false,

                enumerable: true,

                get: getter

            });

        }

    };

    __webpack_require__.n = function(module) {// 當和 ES6 模塊混用的時候的處理

        var getter = module && module.__esModule ?// 如果是 ES6 模塊用 module.default

            function getDefault() { return module['default']; } :

            function getModuleExports() { return module; };// 是 COMMONJS 則繼續用 module

        __webpack_require__.d(getter, 'a', getter);

        return getter;

    };

    __webpack_require__.o = function(object, property) { // 判斷是否有某種屬性（如 exports ）

return Object.prototype.hasOwnProperty.call(object, property);

};

    __webpack_require__.p = "";// 默認路徑為當前

    return __webpack_require__(__webpack_require__.s = 0);// 讀取第一個模塊

})

/************************************************************************/

//IIFE 第二個括號部分

([

(function(module, exports, __webpack_require__) {

var a = __webpack_require__(1);

var b = __webpack_require__(2);

// 模塊 app 代碼

}),

(function(module, exports, __webpack_require__) {

// 模塊 a 代碼

module.exports = ...

}),

(function(module, exports, __webpack_require__) {

// 模塊 b 代碼

module.exports = ...

})

]);

復制代碼

如果是ES6 模塊，處理的方法也不一樣。還是假設我們定義兩個 js ： app.js 是主入口文件， a.js 、 b.js 是 app 依賴文件。

(function(modules) {

// 前面這段是一樣的

})

([

(function(module, __webpack_exports__, __webpack_require__) {// 入口模塊

    Object.defineProperty(__webpack_exports__, "__esModule", { value: true });

    var __WEBPACK_IMPORTED_MODULE_0__m__ = __webpack_require__(1);

    var __WEBPACK_IMPORTED_MODULE_1__m__ = __webpack_require__(2);

    Object(__WEBPACK_IMPORTED_MODULE_0__m__["a"])();// 用 object 包裹著，使得其他模塊 export 的內容即使是基本數據類型，也要讓他變成一個引用類型

    Object(__WEBPACK_IMPORTED_MODULE_1__m__["b"])();

}),

(function(module, __webpack_exports__, __webpack_require__) {

__webpack_exports__["a"] = a;// 也就是 export xxx

//....

}),

(function(module, __webpack_exports__, __webpack_require__) {

__webpack_exports__["b"] = b;

//....

})

]);