js模块化，理解AMD,CommonJS和es6

1. CommonJS：

同步模块加载 ,Commonjs主要应用的环境是nodejs，也就是服务器端广泛使用的一种模块化机制，模块一般都存在于本地，所以不需要考虑网络加载因素，所以是 同步加载。CommonJS 模块语法不能在浏览器中直接运行。

CommonJS 模块定义需要使用 require()指定依赖，而使用 exports 对象定义自己的公共 API。每个模块都有自己独立的作用域，module变量代表当前模块。

模块是值的“浅”拷贝

// 输出模块 moduleA.js
var x = 1
 
function fun() {
    x++;
}
module.exports = {
    x: x,
    fun: fun,
};


// 引入模块 moduleA.js
var mod = require('./moduleA.js');
 
console.log(mod.x); // 1
mod.fun();
console.log(mod.x); // 1

// 输出模块 moduleA.js
var x = {
	value: 1
}
 
function fun() {
    x.value++;
}
module.exports = {
    x: x,
    fun: fun,
};


// 引入模块 moduleA.js
var mod = require('./moduleA.js');
 
console.log(mod.x.value); // 1
mod.fun();
console.log(mod.x.value); // 2

结论： value 是会发生改变的。说明这是 “值的拷贝”，只是对于引用类型而言，值指的其实是引用地址。

2. AMD：

异步模块定义 ，为浏览器环境设计，RequireJS即为遵循AMD规范的模块化工具，requireJS的基本思想是，通过define方法定义模块化，通过require加载模块。

AMD 模块实现的核心是用函数包装模块定义。这样可以防止声明全局变量，并允许加载器库控制何时加载模块

通过define方法定义模块，但是按照俩种情况进行书写。

1.该模块独立存在，不依赖其他模块（可以返回任何值）：

define(function() {
	// to do
	return {
	// 返回的接口
	}
})

2.该模块依赖其他模块时（）：

define(['module1','module2'], function(module1, module2) {
	//to do
	return {
	// 返回的接口
	}
})

AMD要求在使用前需要先把所有的模块都写出来

3. ES6模块：

如果使用es6语法，那么则无需引入requireJS进行模块化，它的特点主要为：
ES6 模块默认在严格模式下执行。
 ES6 模块不共享全局命名空间。
 模块顶级 this 的值是 undefined（常规脚本中是 window）。
 模块中的 var 声明不会添加到 window 对象。
 ES6 模块是异步加载和执行的。

导出：

• export 导出该模块要导出的变量、函数、对象等等。

	export const color = '#000';

• export default 该模块的默认输出值，可以为变量、函数、对象,一个模块只能导出一个默认值。默认导出的内容可以无名称，因为默认导出就代表该模块，但也可以有名称，或者使用别名 as。

 	export default const color = '#fff';

使用：

• 导入非默认内容，需要用结构的方式，因为在模块中，非默认导出的内容，都会被添加到一个变量中，用结构的方式拿出一个或多个内容。

	import { color } from './color';

• 导入默认内容，可以直接导入即可。

 	import color from './color';