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

JS每日一題發表於2019-01-23
JS每日一題前端

20190114問：

說說你對前端模組化的理解

模組的定義:

可以理解成實現特定功能的相互獨立的一組方法

為什麼要使用模組化:

  • 可維護性
  • 名稱空間
  • 可複用性

模組化規範

  • CommonJS
  • AMD
  • UMD
  • CMD
  • Module(es6)

CommonJS

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()
// 就近依賴，按需載入
  var  two = 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'
複製程式碼

往期考題

JS每日一題: web安全攻擊手段有哪些？以及如何防範

關於JS每日一題

JS每日一題可以看成是一個語音答題社群
每天利用碎片時間採用60秒內的語音形式來完成當天的考題
群主在次日0點推送當天的參考答案

  • 注 絕不僅限於完成當天任務，更多是查漏補缺，學習群內其它同學優秀的答題思路

掃描下方二維碼即可加入答題

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

相關文章