模块解析
一、ES6之前的模块规范
前端模块化规范是有很多的，在es6模块化规范之前分别有一下的模块化规范
一、Commonjs
这是 NodeJs里面的模块化规范
javascript
// 导入
require("xxx");
require("../xxx.js");
// 导出
exports.xxxxxx= function() {};
module.exports = xxxxx;二、AMD
AMD 和 CMD 都是浏览器下使用的规范。
AMD 遵循的是 requireJs
javascript
// 定义
define("module", ["dep1", "dep2"], function(d1, d2) {...});
// 加载模块
require(["module", "../app"], function(module, app) {...});三、CMD
CMD 遵循的是 seaJs
javascript
define(function(require, exports, module) {
var a = require('./a');
a.doSomething();
var b = require('./b');
b.doSomething();
});四、UMD
UMD 是 AMD 和 CommonJS 的糅合
javascript
(function (window, factory) {
// 检测是不是 Nodejs 环境
if (typeof module === 'object' && typeof module.exports === "objects") {
module.exports = factory();
}
// 检测是不是 AMD 规范
else if (typeof define === 'function' && define.amd) {
define(factory);
}
// 使用浏览器环境
else {
window.eventUtil = factory();
}
})(this, function () {
//module ...
});二、ES6模块化规范用法
一、默认导出
默认导出的东西没有规定类型可以是任意类型，但是一个模块只能出现一个默认导出，我就使用一个数值类型的导出，如图：
使用默认导出的，接收的时候就可以自行命名，如图：
这时候打印出来的就是一个对象 { a:1 }
二、分别导出
所谓分别导出 就是有多个需要导出的东西 使用多个 export导出，如图：
那要怎么使用呢，如图：
三、重名问题
当我们引入的东西和我原本存在的东西重名了，我们可以给引入的东西一个别名，即可解决这个问题，如图：
使用as 给重名的变量或方法重名
四、动态引入
当我们在不同的时候 需要按需进行引入的时候，就需要使用动态引入了，我们要怎么进行动态引入呢，如图：
单纯使用 import 是不能在 方法里面的 它只能在最顶层，所以可以按上述写即可