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
原生JS(es6)解决方案
如:
export default myModule
import myModule from './myModule'
复制代码
往期考题
关于JS每日一题
JS每日一题可以看成是一个语音答题社区
每天利用碎片时间采用60秒内的语音形式来完成当天的考题
群主在次日0点推送当天的参考答案
- 注 绝不仅限于完成当天任务,更多是查漏补缺,学习群内其它同学优秀的答题思路