模块化
模块化是前端领域发展的趋势之一，他的好处非常的多：
- 他可以抽离公共的代码，避免重复的复制粘贴
- 他可以隔离作用域，避免变量的冲突（在es6出现之前，人们会使用IIFE来完成这个操作）
- 他可以将一个复杂的系统分解为多个子模块，便于开发和维护
模块化规范
我们今天主要来讲模块化规范，首先出现的规范叫CommonJs规范。
CommonJs规范
定义
2009年，在Node.js发布之时，CommonJs作为其模块化规范和原生模块被一并发布，主要用于node.js的开发上，主张一个文件一个模块的机制，每一个文件都有他自己的作用域。这是一个在服务端使用的同步加载的模块规范。
规则
使用：通过require来完成对模块的引入。
导出：module.exports或者exports.x来暴露模块（不能直接使用exports）。
举一个非常具有代表性的例子，就是我们webpack的配置文件webpack.config.js就是完全按照CommonJs的规范来进行开发，webpack符合CommonJs规范。（npm上所有的模块都支持CommonJs规范）
也就是说，我们基本的webpack配置文件事实上还可以改成下面这个样子：
const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin')
exports.mode="development";
exports.entry="./index.js";
exports.output={
path:path.resolve(__dirname,'dist'),
filename:'bundle.js'
};
exports.plugins = [
new HtmlWebpackPlugin({
template:'./index.html',
output:'index.html'
})
];
特点
- CommonJs最大的特点就是同步加载。
- 每一个文件都是一个
Module对象，通过关键字module.exports或者exports来暴露内容，并可以通过require来引入指定模块 - 模块一旦加载一次之后就会被缓存
工作环境
服务端。
两个原因使CommonJs无法在浏览器端使用：
根本原因：CommonJs中使用了Node的api，无法在浏览器中运行。
直接原因：作为一门同步加载的模块规范必须得在require完全加载好之后才能执行下一步，在网络状态比较差的情况下，就会导致浏览器的假死现象。（对于服务端，require的等待时间是硬盘读取时间，而对于浏览器端来说，这取决于网速的快慢。）
举例
AMD规范
定义
AMD（Asynchronous Module Definition），异步模块定义。顾名思义，这是一个采用异步方式加载模块的模块化规范，模块的加载并不影响他后面代码的执行，这是一个专门为浏览器环境设计的模块加载规范。
规则
使用：require([module],callback)，这里的[module]指代一个数组，里面是要加载的模块的集合（id，单文件的情况下可以是路径），第二个callback则是加载完成后的回调。·
导出：define(id?:String,dependencies?String[],factory: Function|Object)，前面两个为可选参数，分别为导出模块的id和所需要的依赖，默认值为["require", "exports", "module"]
特点
-异步加载，所有依赖引入模块的代码都会定义在一个回调函数中，加载完成时会运行回调函数。
工作环境
浏览器端。
举例
// a,js
define(function(){return {a:'hello world'}});
// b.js
require(['./a.js'],function(module){
console.log(module.a);
})
requireJs
CMD规范
定义
CMD（Common Module Definition）通用模块定义。在AMD规范的基础上改进而来的模块化规范。
规则
使用：define(function(require,exports,module){})
导出：define(function(){return 值})
特点
CMD推崇就近依赖，所以不在define的参数中写依赖，而在factory中写。
factory是一个函数，他有三个参数：
- require是一个方法，接受模块标识符或者路径来获取其他模块提供的借口（因为一个文件是一个模块，所以可以用文件名来当做是模块的标识符）
- exports是一个对象，用来对外暴露借口
- module是一个对象，上面存储了和当前模块相关的属性和方法
工作环境
浏览器端。
举例
// a.js
define(function(require,exports,module){
exports.a = 'hello world!';
});
// b.js
define(function(require,exports,module){
var moduleA = require('./a.js');
console.log(moduleA.a); // hello world
})
SeaJs
UMD规范
定义
UMD（Universal Module Definition）万能模块定义。是糅合了CommonJs和AMD的跨平台解决方案。
规则
先判断是否支持Node.js模块（exports），支持则使用Node模块，否则再判断是否支持AMD模块规范。
特点
跨平台。
工作环境
跨平台。
ES6模块机制
这又是es6为我们带来的强大功能，他最大的特点是按需加载。
本文主要讲前面这些模块化规范，对于es6后面会单独开篇章来说，这里简单提一下：
通过import来导入：
import {A,B} from '模块路径';
通过export或者export default来导出：
- export 只支持对象形式的导出，不支持值导出
- export default用于指定指定模块的默认导出，只支持值导出
