淺談前端模塊化規範

目錄

• 推薦閱讀
• 爲何須要模塊化？
  • 1.原始的模塊化寫法
  • 2.添加命名空間
  • 3.當即執行函數表達式
• CommonJS、AMD 和 CMD 規範
  • CommonJS 規範
  • AMD 規範與 RequireJS
  • CMD 規範與 Sea.js
• ECMAScript6 標準的模塊支持
  • export
  • import
  • export default 命令

@

推薦閱讀

掘金-前端模塊化
模塊化七日談
部份內容摘自《移動 Web 前端高效開發實踐》- iKcamp 著

爲何須要模塊化？

JavaScript 發展初期，代碼簡單地堆積在一塊兒，只要能順利地從上往下一次執行便可。但隨着網站愈來愈複雜，實現網站功能的 JavaScript 代碼也愈來愈龐大，網頁愈來愈像桌面程序，不少問題開始暴露出來，好比全局變量衝突、函數命名衝突、依賴關係處理等。

1.原始的模塊化寫法

既然模塊是要實現某個功能，那麼能夠把實現功能的一組函數放在同一文件中，像下面這樣

function a1() {
  // ...
}
function b2() {
  // ...
}

函數 a1 和 b2 組成一個模塊，其餘文件先加載該模塊，再對函數進行調用。
缺點：容易發生變量命名衝突，「污染」全局變量，模塊成員之間沒有太多必然的聯繫。

2.添加命名空間

使用命名空間來管理模塊，即便用單全局變量的模式。

var module_special = {
  _index: 0,
  a1: function () {
    // ......
  },
  b2: function () {
    // ......
  }
}
 
// 調用
module_special.a1()
module_special.b2()

一般在屬性名前加下劃線表示該屬性爲私有屬性，不過這只是一種開發規範上的約定，這裏實際上該屬性仍然向外暴露。那麼怎樣讓私有屬性不被暴露呢？那就須要下面的模塊化方式。

3.當即執行函數表達式

當即執行函數表達式簡稱 「IIFE」（Immediately-Invoked Function Expression）

其可以造成一個獨立的做用域，用 IIFE 做爲一個 「容器」，「容器」 內部能夠訪問外部的變量，而外部環境不能訪問 「容器」 內部的變量，因此 IIFE 內部定義的變量不會與外部的變量發生衝突。

var module_special = (function () {
  var _index = 0
  var a1 = function () {
    // ......
  }
  var b2 = function () {
    // ......
  }
  return {
    a1: a1,
    b2: b2
  }
})()
 
// 調用
module_special.a1()
module_special.b2()

這種方式既避免了命名衝突，又使得私有變量 _index 不能被外部訪問和修改。jQuery 源碼大量採用了這種方式。

CommonJS、AMD 和 CMD 規範

CommonJS 規範

node.js 應用由模塊組成，採用 CommonJS 規範，經過全局方法 require 來加載模塊

var http = require('http')                            // 引入http模塊
var server = http.createServer(function (req, res) {  // 用http模塊提供的方法建立一個服務
  res.statusCode = 200                                // 返回狀態碼爲200
  res.setHeader('Content-Type', 'text/plain')         // 指定請求和響應的HTTP內容類型
  res.end('Hello World\n')                            // 返回的數據
})
server.listen(3000, '127.0.0.1', function () {        // 監聽的端口和主機名
  console.log('Server running at http://127.0.0.1:3000') // 服務啓動成功後控制檯打印信息
})

如何編寫一個 CommonJS 規範的模塊？這就須要 Module 對象。
node.js 內部提供一個 Module 構建函數，全部模塊都是 Module 的實例。每一個模塊內部，都有一個 Module 對象，表明當前模塊，包含以下屬性：

• id：模塊的識別符，一般是帶有絕對路徑的模塊文件名
• filename：模塊的文件名，帶有絕對路徑
• loaded：返回一個布爾值，表示模塊是否已經完成加載
• parent：返回一個對象，表示調用該模塊
• children：返回一個數組，表示該模塊要用到的其餘模塊
• exports：表示模塊對外輸出的值

其中 exports 是編寫模塊的關鍵，其表示當前模塊對外輸出的接口。其餘文件加載該模塊，實際讀取的是 module.exports。

// moduleA.js
module.exports = function (params) {
  console.log(params)
}
 
// 假設兩個文件在同一目錄下
var moduleA = require('./moduleA')
moduleA()
 
// 爲了方便，node.js爲每一個模塊提供一個exports變量指向module.exports
// 那麼moduleA也能夠這樣編寫
exports.moduleA = function (params) {
  console.log(params)
}

注意：不能把值直接賦給 exports，由於這樣等於切斷了 exports 與 module.exports 的聯繫

總結 CommonJS 模塊的特色以下：

1. 全部模塊都有單獨做用域，不會污染全局做用域
2. 重複加載模塊只會加載一次，後面都從緩存讀取
3. 模塊加載的順序按照代碼中出現的順序
4. 模塊加載是同步的

AMD 規範與 RequireJS

AMD 和 CMD 規範由於如今用的比較少了（反正我是沒看見過），就簡單介紹下
CommonJS 模塊採用同步加載，適合服務端卻不適合瀏覽器。AMD 規範支持異步加載模塊，規範中定義了一個全局變量 define 函數，描述以下：
define(id?, dependencies?, factory)
第一個參數 id，爲字符串類型，表示模塊標識，爲可選參數。若不存在則模塊標識默認定義爲在加載器中被請求腳本的標識。若是存在，那麼模塊標識必須爲頂層的或者一個絕對的標識。

第二個參數 dependencies，定義當前所依賴模塊的數組。依賴模塊必須根據模塊的工廠方法優先級執行，而且執行的結果按照依賴數組中的位置順序以參數的形式傳入（定義中模塊的）工廠方法中。

第三個參數 factory，爲模塊初始化時要執行的函數或對象。若是爲函數，只被執行一次。若是是對象，此對象應該爲模塊的輸出值。若是工廠方法返回一個值（對象、函數或任意強制類型轉換爲 true 的值），應該設置爲該模塊的輸出值。
建立一個標準 AMD 模塊

define('alpha', ['require', 'exports', 'beta'], function (require, exports, beta) {
  exports.berb = function () {
    return beta.verb()
    // 或者 return require('beta').verb()
  }
})

建立模塊標識爲 「alpha」 的模塊，依賴於內置的 「require」 和 「exports」 模塊和外部標識爲 「beta」 的模塊。require 函數取得模塊的引用，從而即便模塊沒有做爲參數定義，也可以被使用。exports 是定義的 alpha 模塊的實體，在其上定義的任何屬性和方法也就是 alpha 模塊的屬性和方法。

RequireJS 庫可以把 AMD 規範應用到實際瀏覽器 Web 端的開發中，其主要解決了兩個問題：實現 JavaScript 文件的異步加載，避免網頁失去響應；管理模塊之間的依賴性，便於代碼的編寫和維護。

// AMD Wrapper
define(
  ['types/Employee'],     // 依賴
  function(Employee) {    // 這個回調會在全部依賴都被加載後才執行
    function Programmer() {
      // do something
    }
    Programmer.prototype = new Employee()
    return Programmer // return Constructor
  }
)

咱們來比較下 CommonJS 和 AMD 的書寫風格：

// CommonJS
var a = require('./a') // 依賴就近
a.doSomething()

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

// AMD
define(['a', 'b'], function (a, b) { // 依賴前置
  a.doSomething()
  b.doSomething()
})

CMD 規範與 Sea.js

CMD 規範全稱爲 Common Module Definition
CMD 是另外一種 js 模塊化方案，它與 AMD 很相似，不一樣點在於：AMD 推崇依賴前置、提早執行，CMD 推崇依賴就近、延遲執行。此規範實際上是在 sea.js 推廣過程當中產生的。

/** AMD寫法 **/
define(["a", "b", "c", "d", "e", "f"], function(a, b, c, d, e, f) { 
     // 等於在最前面聲明並初始化了要用到的全部模塊
    a.doSomething();
    if (false) {
        // 即使沒用到某個模塊 b，但 b 仍是提早執行了
        b.doSomething()
    } 
});
 
/** CMD寫法 **/
define(function(require, exports, module) {
    var a = require('./a'); //在須要時申明
    a.doSomething();
    if (false) {
        var b = require('./b');
        b.doSomething();
    }
});
 
/** sea.js **/
// 定義模塊 math.js
define(function(require, exports, module) {
    var $ = require('jquery.js');
    var add = function(a,b){
        return a+b;
    }
    exports.add = add;
});
// 加載模塊
seajs.use(['math.js'], function(math){
    var sum = math.add(1+2);
});

ECMAScript6 標準的模塊支持

ECMAScript5 及以前的版本不支持原生模塊化，須要引入 AMD 規範的 RequireJS 或者 AMD 規範的 Seajs 等第三方庫來實現。

直到 ECMAScript6 才支持原生模塊化，其不但具備 CommonJS 規範和 AMD 規範的優勢，並且實現得更加友好，語法較之 CommonJS 更簡潔、支持編譯時加載（靜態加載），循環依賴處理得更好。

ES6 模塊功能主要由兩個命令構成：export 和 import，export 命令用於規定模塊的對外接口，import 命令用於輸入其餘模塊提供的功能。

export

在 ES6 中，一個模塊也是一個獨立的文件，具備獨立的做用域，經過 export 命令輸出內部變量

let name = 'bus'
let color = 'green'
let weight = '20噸噸噸'
export {name, color, weight}
 
// export命令除了輸出變量，還能夠輸出函數或類
export function run() {
  console.log('Bus is running')
}

// 可使用 as 關鍵字對輸出的變量、函數、類重命名
let name = 'bus'
let color = 'green'
let weight = '20噸噸噸'
function run() { console.log('Bus is running') }
export {
  name as busName,
  color as busColor,
  weight as busWeight,
  run as busRun
}

import

import 命令用於導入模塊

import { name, color, weight, run } from './car'
 
// 導入一個模塊的時候也能夠用 as 關鍵字對模塊進行重命名
import {name as busName } from './car'
 
// 經過星號 '*' 總體加載某個文件
import * as car from './car'
console.log(car.name)   // bus
console.log(car.color)  // green

export default 命令

從前面的例子能夠看出，使用 import 命令加載模塊時須要知道變量名或者函數名，或者整個文件，不然沒法加載。爲了方便，可使用 export default 命令爲模塊指定默認輸出，加載該模塊時，可使用 import 命令爲其指定任意名字。

// 定義模塊 math.js
let basicNum = 0
let add = function(a, b) {
  return a+b
}
export default { basicNum, add }
 
// 引入
import math from './math'
function test() {
  console.log(math.add(99 + math.basicNum))
}

附：阮一峯《ES6標準入門》
import 命令是靜態加載而不是動態加載的，若是 import 命令要取代 require 方法，就要能實現動態加載。
有一個提案：建議引入 import() 函數，完成動態加載，import 命令可以接收什麼參數，import() 函數命令就能接受什麼參數。

關於上面所說的提案，如今配置 webpack 使用 babel 轉譯應該能實現了（Vue 的路由懶加載，Webpack 的 splitChunk 都有用到）。
如今前端框架基本上使用 ES6 的模塊化語法，node.js 仍然保持 require 導入，二者最主要的區別是：

• require 是運行時加載，import 是編譯時加載

即下面的條件加載時不可能實現的

if (x === 2) {
    import MyModual from './myModual'
}