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点推送当天的参考答案

• 注 毫不仅限于完成当天任务，更可能是查漏补缺，学习群内其它同窗优秀的答题思路

扫描下方二维码便可加入答题