js模块化理解

无模块化

1. 单个js文件， 文件大, 为了提高项目代码的可读性、可扩展性拆分成多个js文件
2. 多个js文件之间的相互依赖关系，难以维护
3. 每个模块都是暴露在全局的会污染全局的作用域，简单的使用，会导致全局变量命名冲突

CommonJS规范(同步加载模块)

1. 每一个文件就是一个模块，其内部定义的变量是属于这个模块的，不会对外暴露，也就是说不会污染全局变量
2. 核心思想
   1. 通过 require 方法来同步加载所要依赖的其他模块
   2. 通过 exports 或者 module.exports 来导出需要暴露的接口(exports指向的是module.exports的应用，不能对其直接赋值， 需要expors.名称 = value)
3. 特点
   1: 所有要输出的对象统统挂载在 module.exports 上，然后暴露给外界
   2: 通过 require t同步加载别的模块，require 的返回值就是模块暴露的对象
   3: CommonJS 是一个单对象输出，单对象加载的模型
   4: 解决了依赖、全局变量污染的问题

   var a = {};
   module.exports.a = a;
   exports.a = a;
   module.exports = {a: a};

   var a = require('./a.js');
   console.log(a.a);

AMD规范

1. 非同步加载模块，允许指定回调函数， requireJs是ADM规范的实现
2. 定义了下面两个API：
   1: require([module], callback) 加载模块
   2: define(id, [depends], callback) 定义模块
3. 特点:
   1: 异步加载模块
   2: 并行加载多个模块
   3: 提高了开发成本，并且不能按需加载，而是必须提前加载所有的依赖

CMD规范

1. 非同步加载， 按需加载模块，seaJS是CMD规范的实现

 define(function(require, exports, module) {
 });

es6模块化

1. import 关键字引入模块，通过 exprot 关键字导出模块，但是ES6目前无法在浏览器中执行，所以，我们只能通过babel将不被支持的import编译为当前受到广泛支持的 require
2. 特点
   1:可通过以下方式输出任何对模块内部的引用

   export { A, B }
   export { A as a, B }
   export default A
   export const A = { }
   

   2:通过以下方式加载模块中输出的任意引用

   import A from './module'
   import * as A from './module'
   import { A, B } from './module'
   import { A as a, B } from './module'
   

   3:ES6 module 是一个多对象输出，多对象加载的模型