模块是自动运行在严格模式下并且没有办法退出运行的JS代码,目前前端运行环境分为浏览器环境和Node环境, 在这两个环境下使用的模块化方式也自然是不同的。
我们将模块的使用分为两个方法:暴露自身数据、获取其他模块的数据
规范 | 运行环境 | 导出 | 导入 |
---|---|---|---|
commonjs | 浏览器/node | module.exports/exports | require |
AMD | 浏览器 | define return | require |
CMD | 浏览器 | define exports | require |
ES6 | 浏览器/node | export default / export | import from |
Node环境
common.js:CommonJS是服务器模块的规范,Node.js采用了这个规范。
根据CommonJS规范,一个单独的文件就是一个模块。每一个模块都是一个单独的作用域,也就是说,在一个文件定义的变量(还包括函数和类),都是私有的,对其他文件是不可见的。
在这个规范下,暴露数据采用 module.exports 和exports这两个方法,获取数据采用require方法。
1
2
3
4
5
6
7
8
9
10a.js
var x = 5;
var y=4;
var addX = function(value) {
return value + x;
};
module.exports.x = x;
module.exports.addX = addX;
exports.y=y;
}1
2
3
4
5b.js
const a=require('a.js');
console.log(a.x);//5
console.log(a.addX(5));//10
console.log(a.y);//4在a.js中通过module.exports暴露出x和addx方法,b.js通过requie获取a模块的暴露出的数据。
那么module.exports和exports有什么区别了?
其实require导入的内容是module.exports的指向的内存块内容,并不是exports的,简而言之,exports是module.exports的引用,辅助后者添加内容用的。
所以,为了避免糊涂,尽量使用module.exports导出数据。
浏览器环境
1. AMD规范
AMD规范的产物是require.js,按需加载
声明一个模块:
1
define(id, dependencies, factory);
输出数据用 return
获取数据用 require
在模块定义中,id和dependencies是可以省略的,话不多说,看代码。
1
2
3
4
5
6
7
8
9
10
11student.js
define(function(){
return {
createStudent: function(name, gender){
return {
name: name,
gender: gender
};
}
};
});1
2
3
4
5
6
7
8
9
10
11
12
13
14
15class.js
define(function() {
var allStudents = [];
return {
classID: "001",
department: "computer",
addToClass: function(student) {
allStudents.push(student);
},
getClassSize: function() {
return allStudents.length;
}
};
}
);1
2
3
4
5
6main.js
require(["student", "class"], function(student, clz) {
clz.addToClass(student.createStudent("Jack", "male"));
clz.addToClass(student.createStudent("Rose", "female"));
console.log(clz.getClassSize()); // 输出 2
});以上定义了三个js,其中main.js获取了student和class的模块数据。
student 模块和 class 模块都是独立的模块,下面我们再定义一个新的模块,这个模块依赖 student 和 class 模块,这样主程序部分的逻辑也可以包装进去了。
1 | newmain.js |
2.CMD规范
CMD的产出结果是seal.js,暂时我不讨论AMD与CMD的区别,先讲用法。
CMD规范下的模块和AMD下的模块是极为相似的,你用AMD模块的语法照样可以在CMD中使用,唯一不同CMD使用exports和return 来导出数据。
3.ES6模块标准
导出:export和export default
导入:import from
export default在模块中是唯一的,而export可以有多个,所以在通过export方式导出后,在导入时需要加import { } from ‘模块’,{ }里面是导出的数据名,==虽然这个很像是对象解构,但是,并不是哦。==
后记补充: