CommonJS·AMD·UMD·ES6
前言
本篇文章並不會深刻原理，更着重表層上每一種模塊規範之間的差別的表現。深刻的原理以及實現的細節，但願之後有機會能夠深刻研究。javascript
CommonJS
- 使用
require和exports關鍵字和模塊系統進行交互 - CommonJS不支持異步加載
- 一個文件就是一個模塊
Nodejs的模塊規範受到了CommonJS的影響，但Nodejs支持使用module.exports導出對象，而CommonJS只使用exports。CommonJS模塊在未經編譯前沒法使用。示例以下。html
// modules/physics.js
module.exports = {
lorentzTransformation () {
},
maxwellSEquations () {
}
}
複製代碼
// index.js
const physics = require('./modules/physics')
physics.lorentzTransformation()
physics.maxwellSEquations()
複製代碼
module.exports 和 exports
module是一個帶有exports屬性的對象，exports是普通的js變量，是module.exports的引用。若是設置exports.name = '葉奈法'，至關於設置module.exports.name = '葉奈法'。可是，若是給exports設置了一個新的對象，exports和module.exports將再也不是同一個對象。java
// 簡化的理解
var module = { exports: {} }
var exports = module.exports
複製代碼
AMD
AMD誕生的緣由是，是由於CommonJS不支持異步加載，不適合瀏覽器環境。RequireJS實現了AMD API。示例以下。jquery
在index.html中使用<script/>標籤加載RequireJS，經過data-main屬性指定主文件。webpack
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>AMD</title>
<!-- require.js -->
<script data-main='./index.js' src="./require.js"></script>
</head>
<body>
</body>
</html>
複製代碼
define關鍵字用於定義模塊，模塊分爲獨立模塊（不依賴其餘模塊的模塊）以及非獨立模塊（依賴其餘模塊的模塊）es6
// 獨立模塊
// libs/geometry.js
define(function() {
'use strict';
return {
pythagoreanTheorem(a, b) {
return a * a + b * b
}
}
})
複製代碼
// 非獨立模塊，本模塊引用了geometry模塊
// libs/math.js
define(['./geometry.js'], function(geometry) {
'use strict';
return {
geometry: {
pythagoreanTheorem: geometry.pythagoreanTheorem
}
}
})
複製代碼
require關鍵字用來引用模塊web
// index.js
// 加載math模塊
require(['./libs/math'], function (math) {
var c = math.geometry.pythagoreanTheorem(1, 2)
alert(c)
})
複製代碼
ES6
ES6在語言層面上實現了模塊機制，與CommonJS與AMD規範不一樣的是ES6的模塊是靜態的，不能在文件的任何地方使用。這種行爲使得編譯器編譯時就能夠構建依賴關係樹，可是在ES6模塊無法在瀏覽器中徹底實現，須要使用babel，webpack。瀏覽器
// src/modules/physics.js
export function maxwellSEquations () {
alert('maxwellSEquations')
}
複製代碼
// src/main.js
import { maxwellSEquations } from './modules/physics'
maxwellSEquations()
複製代碼
UMD
UMD模塊是一種通用的模式，用於兼容AMD和CommonJS的規範。UMD規範同時兼容amd和commonjs，並支持傳統的全局變量的模式。babel
UMD模塊的頂端一般都會有以下的代碼，用來判斷模塊加載器環境。異步
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD
define(['jquery'], factory);
} else if (typeof exports === 'object') {
// CommonJS
module.exports = factory(require('jquery'));
} else {
// 全局變量
root.returnExports = factory(root.jQuery);
}
}(this, function ($) {
// ...
}));
複製代碼
參考
-
每一个你不满意的现在，都有一个你没有努力的曾经。