JS每日一題: 說說你對前端模組化的理解
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
原生JS(es6)解決方案
如:
export default myModule import myModule from './myModule' 複製程式碼