js模块化

1. js遇到script标签时会阻塞（多个script，依次下载，下载当前的文件时阻塞）
2. 在同一个html页面引入多个js文件，这几个js共用了全局作用域（全局污染）
3. 模块化解决：加载顺序、污染全局
4. 立即执行函数：模块的独立作用域
5. 立即执行函数返回对象，形成了闭包，没有在全局作用域上
6. es5的模块化实现，解决了依赖的问题，moduleA 是全局声明的，但是按需引入。这个时候还需要依赖html页面

module_a.js
var moduleA = (function(){
	var a = 123
	return {
		a: a
	}
})()
// 这时全局声明的
moduleA = {
	a: 123
}

module_b.js
var moduleB = (function(moduleA){
	var b = 456 + moduleA.a // 将moduleA放在局部作用域
	return {
		b: b
	}
})(moduleA)

7. CommonJS - 规范 - require引入模块 + module.exports导出模块 ：只要引用就会创建一个模块实例，所有文件都是同步加载的，并且能缓存，在Node上运行（要依赖webpack，真正客户端开发使用比较少）
8. AMD - 异步模块定义（async的方式，加载script），define定义模块，define引入模块。客户端不支持，用RequireJS实现，需要配置路径（不需要用webpack），解决加载顺序的问题，需要require([‘moduleA’,‘moduleB’]所有依赖加载完成后，才会执行后面的回调函数（前置依赖）

// AMD 参数：模块名称，依赖的模块，函数
define('moduleB',['moduleA'],function(moduleA){
	var b = 456  // 将moduleA放在局部作用域
	return {
		b: moduleA.a.concat(b)
	}
})

// index.js
require.config({
	moduleA: 'js/module_a',
	moduleB: 'js/module_b'
})
require(['moduleA','moduleB'],function(moduleA,moduleB){
	console.log(moduleA.a)
	console.log(moduleB.b)
})

9. CMD - 客户端依然不支持，使用sea.js，require加载 + define定义 + exports导出 + module操作模块。依赖就近，按需加载（需要时才加载）
10. ES6模块化 import导入模块，export导出模块（官方权威，其余都是民间、社区给出的解决方案）
11. commonjs输出的是一个值的拷贝、es6输出的是值的引用；commonjs在运行时加载，es6模块在编译时加载