什么是模块化？以及它的好处。

.什么是模块化？

简单地说，模块化就是有组织地把一个大文件拆成独立并互相依赖的多个小模块。
模块内部有许多私有属性，只向外暴露一部分公开的接口(如可以修改私有属性的方法等)

2.为什么要模块化？

ES6之前，JavaScript语言一直没有模块（module）体系，无法把大文件有组织地划分成小块，并管理之间地依赖。但是模块化的思想一直存在。因为用Javascript写的代码越来越庞大，而网页也越来越像桌面APP。如此庞杂的代码，如果不进行模块化，就可能引发命名冲突，造成不易复用、维护性高。

模块化的好处

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

3.模块划分

一般，为了清晰明了，一个文件对应一个模块。

二、模块化规范

1. CommonJS

Node.js遵循的规范

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

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

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

特点：

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

2. 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.加载模块是异步的

3. 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.加载模块也是异步的

4. 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两者的优点，兼容两标准的规范

链接：https://www.jianshu.com/p/480496c3c671
来源：简书