commonJS、AMD、ES6模块使用规范

commonJS：

同步模块加载 ,NodeJS，也就是服务器端广泛使用的一种模块化机制，以为模块一般都存在于本地，所以不需要考虑网络加载因素，所以为同步加载。

模块的定义

每个模块都有自己独立的作用域，除定义在global对象下的属性外，其他变量互不影响。module变量代表当前模块。

var x = 1;
var fun1 = function (value) { return value + x; }
module.exports.x = x;
moduel.exports.fun1 = fun1;

导出与使用

它要求模块化的导出必须是module.exports，这样导出对外的变量或者接口，通过require() 来导入想要使用的其他模块对外导出的变量或者接口，；定义global对象下的属性为全局属性，但不推荐使用。
require的引入分为三种：

• 如果参数字符串以 / 开头，则表示加载的是一个位于绝对路径的模块文件。
• 如果参数字符串以 ./ 开头，则表示加载的是一个位于相对路径的模块文件
• 如果参数字符串不以 ./ 或 / 开头，则表示加载的是一个默认提供的核心模块（node核心模块，或者通过全局安装或局部安装在node_modules目录中的模块）

AMD：

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

模块的定义：

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

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

define(function() {
// your code....
return {
// 返回的接口
}
})

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

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

使用时，因为是异步调用函数的形式，所以可以使用回调函数的方式，可以添加成功，或者错误处理函数；

require(['m1','m2'], functino(m1,m2) {}, function(err) {})

同时，在define的时候，也可以在内部进行require加载模块，

var m1 =require('m1');

配置

require方法支持配置，require.config({})，一般处理下面的情况：

• paths ：为模块指定位置，可以为服务器上的地址，也可以为外部网址等等，也可以指定多个地址，防止模块加载出错。

相当于为模块指定位置和地址映射依赖关系。

require.config({
paths: {
jquery: 'module/libs/jquery-1.3',
}
});
---------------------------
require(['jquery'],function($){});

• shim：垫片，帮助requireJS加载那些非AMD规范的库

1. shim对象的一级属性对应两个属性: deps,exports ; deps 为数组,表示其依赖的库, exports 表示输出的对象名.
2. shim对象的一级属性必须要有paths中的属性名称对应。

require.config({
paths:{
 ls1 :'module/libs/ls1-0.0.5-alis',
ls2::'module/libs/ls2-0.0.5-alis'
},
shim:{
'ls1':{
deps:['ls2'],
exports:'!_'
}
}
});

使用：

在index.html中通过 script 标签引入，包括require.js以及require.config的配置文件。

ES6模块

如果使用es6语法，那么则无需引入requireJS进行模块化，它的特点主要为：

• 在模块顶级作用域中的this为undefine。
• 单个文件为一个模块，顶级作用域声明的变量只在当前模块生效。对其他模块不影响，
• 对外导出的变量才能被其他变量使用

定义

导出内容有俩种关键字：

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

export const color = '#fff';

• as 输出时创建别名，也适用于导入情况。

const color = '#fff';
export color as white

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

 export default const color = '#fff';
// export default 5；
// const color = ‘#fff’；
// export { color as default  }；

使用

在模块中使用import关键字来导出其他模块导出的内容。
分为几种情况：

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

import { color } from './color';

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

import color from './color';