js模块化进程

js的模块化进程

现在前端技术日新月异，对于同一个问题痛点，各个时段有各自的解决方案，这就带来了很大差异。今天我就打算梳理js模块化的历史进程，讲一讲这些方案要做什么，怎么做。

js模块化进程的起因

现今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。当一个项目开发的越来越复杂的时候，你会遇到一些问题：命名冲突（变量和函数命名可能相同），文件依赖（引入外部的文件数目、顺序问题）等。

JavaScript发展的越来越快，超过了它产生时候的自我定位。这时候js模块化就出现了。

什么是模块化

模块化开发是一种管理方式，是一种生产方式，一种解决问题的方案。他按照功能将一个软件切分成许多部分单独开发,然后再组装起来,每一个部分即为模块。当使用模块化开发的时候可以避免刚刚的问题，并且让开发的效率变高，以及方便后期的维护。

js模块化进程

一、早期：script标签

这是最原始的 JavaScript 文件加载方式，如果把每一个文件看做是一个模块，那么他们的接口通常是暴露在全局作用域下，也就是定义在 window 对象中。

缺点：
1.污染全局作用域
2.只能按script标签书写顺序加载
3.文件依赖关系靠开发者主观解决

二、发展一：CommonJS规范

允许模块通过require方法来同步加载（同步意味阻塞）所要依赖的其他模块，然后通过module.exports来导出需要暴露的接口。

// module add.js
module.exports = function add (a, b) { return a + b; }

// main.js
var {add} = require('./math');
console.log('1 + 2 = ' + add(1,2);

CommonJS 是以在浏览器环境之外构建JavaScript 生态系统为目标而产生的项目，比如在服务器和桌面环境中。

三、发展二：AMD/CMD

（1）AMD

AMD 是 RequireJS 在推广过程中对模块定义的规范化产出（异步模块定义）。

AMD标准中定义了以下两个API：

1. require([module], callback);
2. define(id, [depends], callback);

require接口用来加载一系列模块，define接口用来定义并暴露一个模块。

	define(['./a', './b'], function(a, b) {  
		// 依赖必须一开始就写好   
		a.add1()    
		...  
		b.add2()    
		...
	}) 

优点：
1、适合在浏览器环境中异步加载模块 2、可以并行加载多个模块

（2）CMD

CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。(在CommomJS和AMD基础上提出)

define(function (requie, exports, module) { 
    //依赖可以就近书写 
    var a = require('./a'); 
    a.add1(); 
    ... 
    if (status) { 
        var b = requie('./b'); 
        b.add2(); 
    } 
}); 

优点：
1、依赖就近，延迟执行 2、可以很容易在服务器中运行

（3）AMD 和 CMD 的区别

AMD和CMD起来很相似，但是还是有一些细微的差别：

1、对于依赖的模块，AMD是提前执行，CMD是延迟执行。

2、AMD推崇依赖前置；CMD推崇依赖就近，只有在用到某个模块的时候再去require。

3、AMD 的 API 默认是一个当多个用，CMD 的 API 严格区分，推崇职责单一

四、发展三：ES6模块化

EcmaScript6 标准增加了JavaScript语言层面的模块体系定义（关键字）。

在 ES6 中，我们使用export关键字来导出模块，使用import关键字引用模块。

// module math.jsx
export default class Math extends React.Component{}

// main.js
import Math from "./Math";

ES6 模块与 CommonJS 模块的差异

1. CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。

2. CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。

即 CommonJS 先加载整个模块，输出一个对象，取对象内相应的值，输出后内部不会再变化；ES6 是静态编译命令，先加载一个引用，等执行时再根据引用到加载模块内取值输出，动态引用不缓存。

目前很少JS引擎能直接支持 ES6 标准，因此 Babel 的做法实际上是将不被支持的 import 翻译成目前已被支持的 require。