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 {
// 返回的接口
}
})
  1. 该模块依赖其他模块时():
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';

推荐阅读更多精彩内容