CommonJS
服務器端的 Node.js 遵循 CommonJS規(guī)范浪箭，該規(guī)范的核心思想是允許模塊通過 require 方法來同步加載所要依賴的其他模塊，然后通過 exports 或 module.exports 來導出需要暴露的接口。
使用
引入模塊
let express = require('express');
導出模塊
module.exports.test1 = function () {}
exports.test2 = {}
優(yōu)缺點
優(yōu)點
- 服務器端模塊便于重用
- NPM中已經(jīng)有超過45萬個可以使用的模塊包
- 簡單并容易使用
缺點
- 同步的模塊加載方式不適合瀏覽器環(huán)境键俱，同步意味著阻塞加載建椰，瀏覽器資源是異步加載的
- 不能非阻塞的并行加載多個模塊
實現(xiàn)
- 服務器端的 Node.js
- Browserify，瀏覽器端的 CommonJS 實現(xiàn)薄腻，可以使用 NPM 的模塊收捣，但是編譯打包后的文件體積可能很大
- modules-webmake庵楷，類似Browserify楣颠，還不如 Browserify 靈活
- wreq，Browserify 的前身
AMD
Asynchronous Module Definition 規(guī)范其實只有一個主要接口咐蚯，define(id?, dependencies?, factory)，它要在聲明模塊的時候指定所有的依賴dependencies春锋，并且還要當做形參傳到factory中矫膨，對于依賴的模塊提前執(zhí)行，依賴前置期奔。
使用
定義模塊
define('module', ['dep1', 'dep2'], function (d1, d2) {
return {}
});
引入模塊
require(['module', '../file'], funtion(module, file) {
// ...
})
優(yōu)缺點
優(yōu)點
- 適合在瀏覽器環(huán)境中異步加載模塊
- 可以并行加載多個模塊
缺點
提高了開發(fā)成本侧馅，代碼的閱讀和書寫比較困難，模塊定義方式的語義不順暢
-
不符合通用的模塊化思維方式呐萌，是一種妥協(xié)的實現(xiàn)
?
實現(xiàn)
CMD
Common Module Definition 規(guī)范和 AMD 很相似馁痴，盡量保持簡單，并與 CommonJS 和 Node.js 的 Modules 規(guī)范保持了很大的兼容性肺孤。
使用
定義
define(function (require, exports, module) {
var $ = require('jquery');
var Sprinning = require('./spinning');
exports.test1 = {};
module.exports = {};
});
引入
define(function (require, exports, module) {
var $ = require('jquery');
$('div')...
});
優(yōu)缺點
優(yōu)點
- 依賴就近罗晕，延遲執(zhí)行
- 可以很容易在Node.js中運行
缺點
- 依賴SPM打包，模塊的加載邏輯偏重
實現(xiàn)
ES6 模塊
EcmaScript6 標準增加了 JavaScript 語言層面的模塊體系定義赠堵。ES6 模塊的設計思想小渊，是盡量的靜態(tài)化，使得編譯時就能確定模塊的依賴關系顾腊，以及輸入和輸出的變量粤铭。CommonJS 和 AMD 模塊，都只能在運行時確定這些東西杂靶。
使用
定義
export default {
a: 10,
b: function () {
// ...
}
}
引入
import 'jquery';
import Vue from 'vue'
import { render } from 'react-dom'
優(yōu)缺點
優(yōu)點
- 容易進行靜態(tài)分析
- 面向未來的ECMAScript標準
缺點
原生瀏覽器還沒有實現(xiàn)標準
-
全新的命令字梆惯，新版的Node.js才支持
?
實現(xiàn)
期望的模塊系統(tǒng)
可以兼容多種模塊風格，盡量可以利用已有的代碼吗垮，不僅僅只是 JavaScript 模塊化垛吗，還有 CSS、圖片烁登、字體等資源也需要模塊化怯屉。
