JS每日一題: 說說你對前端模組化的理解

摘要： CommonJS 擴充套件了JavaScript宣告模組的API, 通過CommonJS，每個JS檔案獨立地儲存它模組的內容（就像一個被括起來的閉包一樣）。在這種作用域中，我們通過 module.exports 語句來匯出物件為模組，再通過 require 語句來引入 如： fun...

CommonJS 擴充套件了JavaScript宣告模組的API,

通過CommonJS，每個JS檔案獨立地儲存它模組的內容（就像一個被括起來的閉包一樣）。在這種作用域中，我們通過 module.exports 語句來匯出物件為模組，再通過 require 語句來引入

如：

function myModule() {
this.hello = function() {
return 'hello!';
}
}
module.exports = myModule;

複製程式碼

AMD （Asynchronous Module Definition）

特點: 提倡依賴前置，在定義模組的時候就要宣告其依賴的模組

如：

require([module], callback);
複製程式碼

CMD (Common Module Definition)

CMD規範是國內SeaJS的推廣過程中產生的

提倡就近依賴（按需載入），在用到某個模組的時候再去require

define(function (require, exports, module) {
var one = require('./one')
one.do()
// 就近依賴，按需載入
vartwo = require('./two')
two.do() 
})
複製程式碼

UMD

AMD和CommonJS的結合,跨平臺的解決方案,UMD先判斷是否支援Node.js的模組（exports）是否存在，存在則使用Node.js模組模式。在判斷是否支援AMD（define是否存在），存在則使用AMD方式載入模組

如：

(function (window, factory) {
if (typeof exports === 'object') {
module.exports = factory();
} else if (typeof define === 'function' && define.amd) {
define(factory);
} else {
window.eventUtil = factory();
}
})(this, function () {
//module ...
});
複製程式碼

Module

原生ＪＳ(es6)解決方案

如:

export default myModule
 import myModule from './myModule'
複製程式碼