什么是模块化？模块化的好处

先来说说什么是模块化：把一个大的东西根据功能拆分成相互联系的独立的小模块，小模块根据功能需要拆分成小小模块。
当我们使用这些模块时，要给模块一个接口，以方便其他模块调用和修改模块内部的东西。

模块化的好处

  1. 避免命名冲突(减少命名空间污染)
  2. 更好的分离, 按需加载
  3. 更高复用性
  4. 高可维护性

二、模块化规范

1. CommonJS
 Node.js遵循的规范
 const { PI } = Math;
 module.exports.getArea = ® => PI * r * 2; // 向外暴露(计算圆形的面积的)getArea方法

注意，这里的module可省略（不推荐），写成：

const { PI } = Math
exports.getArea = (r) => PI * r * 2 // 向外暴露(计算圆形的面积的)getArea方法(省略了module)

特点：

1.代码运行在模块作用域，不会污染全局
2.加载模块顺序按照词法解析的顺序加载
3.加载模块是同步的
4.单例加载：也就是加载的模块会缓存起来，再次使用时，会直接用运行结果，不会再加载（除非手动清除）
5.加载模块得到的是结果的拷贝

  1. AMD
    RequireJS遵循的规范
    AMD用define()定义模块，用require()加载模块。
// 定义一个新的模块，这个新的模块可能用到a模块和b模块
     // define第一个参数是 依赖模块的数组，对应callback里的参数
     define(["a", "b"], function(a, b) {
         // 1. 在最前面加载了a、b
     
         // 2. 使用模块a
         const a = require('./a')  // a在最前面已经加载好了
     
         // 3.处理其他代码
         if (false) {
             // 这里实际上是不可达代码(永远不会被执行)
             // 所以b实际不需要加载。然而因为AMD是依赖前置、提前执行的，
             // 所以b还是会在最前面被提前加载的
             console.log(b.getArea(1))  // 6.283185307179586
         }
         
         // 向外暴露接口（写法1）
         const getArea = (r) => PI * r * 2
         return { getArea }
     
         // 向外暴露接口（写法2）
         const getArea2 = (r) => PI * r * 2
         exports.getArea2 = getArea2
 });

特点：

1.加载模块推崇依赖前置、提前执行
2.加载模块是异步的

  1. CMD
    sea.js遵循的规范
    CMD也是用define()定义模块，用require()加载模块，但思想不同、写法也不同。
    CMD规范是在sea.js推广的过程中产生的，写法如下：
// 定义一个新的模块，这个新的模块可能用到a模块和b模块
 // define接收一个callback参数，对应
 define(function(require, exports, module) {
 // 最前面不提前加载模块
// 1. 使用模块a
const a = require('./a')  // 依赖就近、延迟执行，需要a，就去require a

// 2.处理其他代码

if(false) {
  // 这里实际上是不可达代码(永远不会被执行)
  // 所以b实际不需要加载。恰好CMD是依赖就近、延迟执行的，
  // 所以b的确是不会被加载的
  const b = require('./b')

  // 处理其他代码
}

// 向外暴露接口（写法1）
const getArea = (r) => PI * r * 2
return { getArea }

// 向外暴露接口（写法2）
const getArea2 = (r) => PI * r * 2
exports.getArea2 = getArea2
})
// 使用的地方
      seajs.use(['a.js'], function(a){ // 依赖就近，需要a，就去require a
            console.log(a.getArea(1))  // 6.283185307179586
        })
特点：

1.加载模块推崇依赖就近、延迟执行
2.加载模块也是异步的

  1. ES6 模块
    ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系
// a.js
     const getArea = (r) => PI * r * 2
     export { getArea }  // 向外暴露一个对象，对象有一个(计算圆形的面积的)方法getArea
     
     // 使用的地方：
     import { getArea } = './a.js' // 注意这里拿到的是一个对象，对象里有getArea方法
     console.log(getArea(1))  // 6.283185307179586
     ES6还提供了一个default，用来提供默认的export：
     
     // a.js
 
 const getArea = (r) => PI * r * 2
 export default getArea // 向外直接暴露一个(计算圆形的面积的)方法getArea
 
 // 用的地方：
 import getArea = './a.js'  // 注意这里拿到的就是getArea方法
 console.log(getArea(1))  // 6.283185307179586

特点：
1.编译时确定模块的依赖关系

2.加载模块存储的是值的引用，所以全局只有一份
3.加载模块也是异步的

三、总结
最开始，JavaScript没有模块。后来：

有CommoneJS规范，最典型的实践就是Node.js，主要使用在服务器端，同步加载模块；

有AMD，最典型的实践就是RequireJS，依赖前置，主要使用在浏览器端，异步加载模块。

有CMD，最典型的实践就是sea.js，依赖就近，主要使用在浏览器端，异步加载模块。

有ES6的Module，在语言层面定义了模块，通过export和import，吸收了CommoneJS和AMD两者的优点，兼容两标准的规范