模块化的规范

模块化的规范有CommonJS（2009）、AMD（2010）、CMD（2011）、ES6（2015），这四种规范，那么它们之间的区别是什么？

1.CommonJS

CommonJS的规范：

• 导入：module.exports = {}、exports.xxx = 'xxx'
• 导出：require(./index.js)
• 查找方式：查找当前目录是否具有文件，没有则查找当前目录的node_modules。再没有，冒泡查询，一直往npm目录查找

CommonJS的特点：

• 所有代码在模块作用域内运行，不会污染其他文件
• require得到的值是值得拷贝，即你引用其他JS文件的变量，修改了也不会影响其他文件

CommonJS的缺点：

• 应用层面：在index.html文件中使用var index = require('./index.js')会出错，只能在js文件中引用
• 加载问题：CommonJS的文件是同步加载的，如果在index.js文件中加载index2.js,如果index.js卡住了，index2.js也没有办法加载

2.AMD

AMD的规范：

// 导出模块:
define([依赖1,依赖2...],()=> {
    // 依赖加载完后,执行回调函数...
})

// 导入模块
// 这点和commonJS的require有点不一样,AMD需要2个参数,且有回调。
const 变量 = require([模块名],function() {
    // 执行回调操作...
})

AMD的特点：

• 统一性：全都由全局变量define函数导出模块，由全局变量require导入函数
• 可以异步加载模块

AMD的缺点：

• 虽然说可以异步加载，但是要加载所有文件之后，才能执行回调
• 写法过多，初学者容易迷惑

3. CMD

CMD的规范：

• define全局变量是一个函数，自带三个参数，分别是require、exports、module，用来定义模块。

CMD的特点：

• 依赖后置，符合按需加载的设计理念。
• 指责单一，理解简单

4.ES6

ES6的规范：

• 导入：import './index'、import {a} from './index、import {a as b} from './index'、import * as index from './index.js'
• 导出：export a、export {a}、export {a as b}、export default function {}

ES6的特点：

• 静态化加载
• import 命令具有提升效果，会提升到整个模块的头部，首先执行