Js模块化规范（commonJs、Es6模块化）

78 阅读 0 评论 52 点赞

我是靠谱客的博主简单跳跳糖，这篇文章主要介绍Js模块化规范（commonJs、Es6模块化），现在分享给大家，希望可以做个参考。

一、Js模块化

常见的模块化规范：

1、CommonJS——nodeJS模块化规范

规定：

每一个文件就是一个模块，拥有自己独立的作用域，变量，以及方法等（采用同步加载方式），对其他的模块都不可见。

每个模块内部，module变量代表当前模块。这个变量是一个对象，它的exports属性（即module.exports）是对外的接口。加载某个模块，其实是加载该模块的module.exports属性。require方法用于加载模块。

特点：
所有代码都运行在模块的作用域内，不会污染全局作用域。

模块可以多次加载，但是只会在第一次加载时运行一次，然后运行结果就被缓存了，以后再加载，就直接读取缓存结果。要想让模块再次运行，必须清除缓存。

模块加载的顺序，按照其在代码中出现的顺序，同步加载。
模块定义（导出）：
module.exports属性 ：加载该模块其实就是加载模块的module.exports属性
复制代码module.exports.add = function () { // ... } module.exports = function () { //匿名写法 return ... }
1
2
3
4
5
6
7
8
9
module.exports.add = function () {
//
...
}
module.exports = function () {
//匿名写法
return ...
}
**exports变量:**node为每一个模块提供了一个exports变量(可以说是一个对象)，指向 module.exports。
复制代码即：相当于每个模块中都定义： var exports = module.exports; 对外输出时，可以在变量export上添加要导出的方法
1
2
3
4
即：相当于每个模块中都定义：
var exports = module.exports;
对外输出时，可以在变量export上添加要导出的方法
使用：
复制代码exports.add = function (r){return Math.PI * r *r};
1
2
exports.add = function (r){return Math.PI * r *r};
**注意：**不能把exports直接指向一个值，这样就相当于切断了 exports 和module.exports 的关系。
复制代码例如：exports=function(x) {console.log(x)};
1
2
例如：exports=function(x)	{console.log(x)};
推荐使用module.exports属性 ，exports了解即可
模块引用：
复制代码var add = require('./xxx.js'); //相对路径导入 var config = require('xxx.js'); //直接导入 var http = require('http'); //导入一个模块
1
2
3
4
5
6
7
var add = require('./xxx.js');
//相对路径导入
var config = require('xxx.js');
//直接导入
var http = require('http');
//导入一个模块
因为nodeJS会被部署在服务端，不存在js模块下载阻塞的问题，但是浏览器则是本地客户机存在下载js文件阻塞的问题。

所以浏览器不兼容CommonJS，原因就在于缺少这些Node.js环境的变量。
module
exports
require
global

那么只要解决了这几个变量就可以了，下面示例：
复制代码var module = { exports: {} }; (function(module, exports) { exports.multiply = function (n) { return n * 1000 }; }(module, module.exports)) var f = module.exports.multiply; f(5) // 5000
1
2
3
4
5
6
7
8
9
var module = {
exports: {}
};
(function(module, exports) {
exports.multiply = function (n) { return n * 1000 };
}(module, module.exports))
var f = module.exports.multiply;
f(5) // 5000 
向一个立即执行函数提供 module 和 exports 两个外部变量，模块就放在这个立即执行函数里面。模块的输出值放在 module.exports 之中，这样就实现了模块的加载

知道了原理，就能做出工具了。Browserify 是目前最常用的 CommonJS 格式转换的工具。

可查看阮一峰老师相关文章继续了解：http://www.ruanyifeng.com/blog/2015/05/commonjs-in-browser.html
commonJs了解更多：http://javascript.ruanyifeng.com/nodejs/module.html

2、ADM——requireJS倡导的一种模块化规范

AMD推崇依赖前置；在requireJS中模块是通过define来进行定义的，如果模块之间相互依赖，需要先将依赖模块导入进来，待导入完毕之后，在通过回调函数的方式执行后面的代码，从而有效的解决了模块依赖的问题。

模块定义：
复制代码define({ method1: function() {} method2: function() {} }); //或者 define(function(){ return { method1: function() {}, method2: function() {}, } });
1
2
3
4
5
6
7
8
9
10
11
12
define({
method1: function() {}
method2: function() {}
});
//或者
define(function(){
return {
method1: function() {},
method2: function() {},
}
});
模块引用：
复制代码require(['a', 'b'], function(a, b){ a.method(); b.method(); })
1
2
3
4
5
require(['a', 'b'], function(a, b){
a.method();
b.method();
})

3、ES6Module

ES6 在语言标准的层面上，实现了模块功能，旨在替代AMD、CommonJs成为浏览器和服务器通用的模块解决方案。

规则：每个js文件都是一个独立的模块

按需导入：import，命令用于输入其他模块提供的功能

按需导出：export，命令用于规定模块的对外接口
复制代码// 定义模块 math.js var data = 0; var add = function (a, b) { return a + b }; // 导出暴露basicNum变量和add方法 export { data, add }; //引用模块可省略.js，需要清楚加载的变量名或函数名 //as可以进行重命名 import { data as newName, add } from './math.js';
1
2
3
4
5
6
7
8
9
// 定义模块 math.js 
var data = 0;
var add = function (a, b) { return a + b };
// 导出暴露basicNum变量和add方法
export { data, add };
//引用模块 可省略.js，需要清楚加载的变量名或函数名
//as可以进行重命名
import { data as newName, add } from './math.js';
默认导入、导出
复制代码//为模块指定默认输出，import时不需要使用大括号，每个模块只允许一次 export default { ... }; import 接受名（要求合法） from '模块路径、标识符'
1
2
3
4
//为模块指定默认输出，import时不需要使用大括号，每个模块只允许一次
export default { ... };
import 接受名（要求合法） from '模块路径、标识符'
直接导入并执行
复制代码import '..../xxx.js'
1
2
import '..../xxx.js'
ES6的模块不是对象，import命令会被 JavaScript 引擎静态分析，在编译时就引入模块代码，而不是在代码运行时加载，所以无法实现条件加载。也正因为这个，使得静态分析成为可能。