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點推送當天的參考答案

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

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