模块化

模块化

为什么要使用模块化？ 几种实现模块化的方式和各自的特点。

使用模块化的好处

• 解决命名冲突
• 提供复用性
• 提高代码可维护性

1.立即执行函数

在早期，使用立即执行函数实现模块化是最常见的手段，通过函数作用域解决的命名冲突、污染全局作用域的问题

(function(globalVariable) {
	globalVariable.test = function(){}
	// ... 声明各种变量，函数都不会污染全局作用域
})(globalVariable) 

2.AMD和CMD

AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。
CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。
目前这两种实现方式以及很少见到了

区别：

1. 对于依赖的模块，AMD 是提前执行，CMD 是延迟执行。
2. CMD 推崇依赖就近，AMD 推崇依赖前置。

// AMD
define(['./a','./b'], function(a, b) {
	// 加载模块完毕可以使用
	a.do()
	b.do()
})
// CMD
define(function(require, exports, module) {
	// 加载模块
	// 可以把 require 写在函数体的任意地方实现延迟加载
	var a = require('./a')
	a.do()
})

3.CommonJS

CommonJS最早在Node中使用，目前也仍然在广泛使用，比如在webpack中

// a.js
module.exports = {
	a: 1
}
// or
exports.a = 1

// b.js
var module = require('./a.js')
module.a  // 1

var module = require('./a.js')
module.a
// 这里其实就是包装了一层立即执行函数，这样就不会污染全局变量了
// module是Node独有的一个变量
module.exports = {
	a: 1
};
// module基本实现
var module = {
	id: 'xxxx',	 
	exports: {}  // 空对象
};
// 这就是为什么exports和module.exports用法相似的原因
var exports = module.exports;
var load = function(module) {
	// 导出的东西
	var a = 1;
	module.exports = a;
	return module.exports;
};
// 然后当require的时候去找到独特的id，将要使用的东西用立即执行函数包装下

虽然exports和module.exports用法相似，但是不能对exports直接赋值，因为var exports = module.exports这句代码表明了他两享有相同地址，通过改变对象的属性值会对两者都起效，但是如果直接对exports赋值就会导致两者不再指向同一个内存地址，修改并不会对module.exports起效

4.ES Module

ES Module 是原生实现的模块化方案，与 CommonJS 有以下几个区别

1. CommonJS 支持动态导入，也就是 require(${path}/xx.js) ，后者目前不支持，但是已有提案
2. CommonJS 是同步导入，因为用于服务端，文件都在本地，同步导入即使卡住主线程影响也不
   大。而后者是异步导入，因为用于浏览器，需要下载文件，如果也采用同步导入会对渲染有很大影
   响3. CommonJS 在导出时都是值拷贝，就算导出的值变了，导入的值也不会改变，所以如果想更新
   值，必须重新导入一次。但是 ES Module 采用实时绑定的方式，导入导出的值都指向同一个内存
   地址，所以导入值会跟随导出值变化
3. ES Module 会编译成 require/exports 来执行的

// 引入模块API
import xxx from './a.js'
import { xxx } from './a.js'
// 导出模块
export function a() {}
export default function() {}