module、export、require、import的使用
module
每个文件就是一个模块。文件内定义的变量、函数等等都是在自己的作用域内,都是自身所私有的,对其它文件不可见。
每个文件内部都有一个module
对象,它包含以下属性
id
: 模块的识别符,通常是带有绝对路径的模块文件名filename
:模块的文件名,带有绝对路径loaded
:返回一个布尔值,表示模块是否已经完成加载parent
:返回一个对象,表示调用该模块的模块children
:返回一个数组,表示该模块要用到的其他模块exports
:表示模块对外输出的值
module.exports
在module
中有一个属性exports
,即:module.exports
。它是该模块对外的输出值,是一个对象。其它模块在加载该模块时,实际上加载到的数据都是由它提供的。
module.exports
输出的可以是一个对象,也可以是一个函数。在引用该模块的文件内,如果接受到的是对象,可以直接访问其中的属性,如果接受到的是一个函数,也可以直接执行。
exports
exports
是一个特殊的存在,它是对module.exports
的指向,可以通过向exports
对象中添加变量、方法等,但是不能直接将exports
指向一个值,这样会切断exports
和module.exports
之间的联系。
export
和module.exports
的使用有一点需要注意,如果导出的是一个函数,只能使用module.exports
。
export
export
用于规定模块的对外接口,可以输出变量、函数或类。export
规定的对外接口必须与模块内部的变量建立一一对应关系。
- 错误写法
// 方式一
export 1; // 报错
// 方式二
var a = 1;
export a; // 报错
// 方式三
function fn() {}
export fn; // 报错
- 正确写法
// 方式一
export var a = 1;
// 方式二
var a = 1;
export {a};
// 方式三
var a = 1;
export {a as a1}; // 对a重命名输出
// 方式四
export function fn() {};
// 方式五
function fn() {}
export {fn};
export default
export default
和export
的区别:
- 使用
export
时,输出的内容和接收时用的变量名称必须一致,否则无法加载;使用export default
,则为模块指定默认输出,同时,可以为接收到的变量指定其它名称 - 使用
export
输出的变量或者函数,在import
时,需要使用大括号;使用export default
则不用
import
import
和export
配对使用,用于加载接收export
输入的内容
require
require
用于加载模块文件,默认加载的文件后缀名为.js
- 如果加载的文件路径以
/
开头,则表示加载的是一个绝对路径 - 如果加载的文件路径以
./
或../
开头,则表示加载的是一个相对当前位置的路径 - 如果加载的文件路径不以以上内容开头,则加载的是一个核心模块,默认会到
node_modules
下寻找
小结
module
、module.exports
、exports
采用的是CommonJS模块规范。export
和export default
采用的是ES6模块规范。
module.exports
输出的是值的拷贝;export
是值的引用module.exports
在运行时加载;export
是在编译时输出
// addA.js
var a = 1;
function addA() {
a++;
}
module.exports = {
a: a,
addA: addA
};
// use addA
var addA = require('./addA.js');
console.log(addA.a); // 1
addA.addA();
console.log(addA.a); // 1
/************ 改善后 *********************/
// addA.js
var a = 1;
function addA() {
a++;
}
module.exports = {
get a() {
return a;
},
addA: addA
};
// addA.js
export.a = 1;
export.addA = function() {
a++;
}
// use addA
import {a, addA} from './addA';
console.log(a);// 1
addA();
console.log(a);// 2
参考
如需转载请注明出处。http://www.cnblogs.com/tian-xie/