对这几个概念一直云里雾里,今天复习巩固一下。
概念:module.exports和exports是属于commonJs规范,export和export default是ES6模块规范。
一、commonJs:
exports = module.exports
1、对于要导出的属性,可以简单直接挂到exports对象上
exports.name = function() {
console.log('My name is Lemmy Kilmister');
};
2、对于类,为了直接使导出的内容作为类的构造器可以让调用者使用new操作符创建实例对象,应该把构造函数挂到module.exports对象上,不要和导出属性值混在一起
module.exports = function(name, age) {
this.name = name;
this.age = age;
this.about = function() {
console.log(this.name +' is '+ this.age +' years old');
};
};
var A = require('./a'); var a = newA();
module.exports 初始值为一个空对象 {}
exports 是指向的 module.exports 的引用
require() 返回的是 module.exports 而不是 exports
也就是: exports = module.exports = {}, exports和module.exports都指向一个引用地址{},如果exports.name = 'xxx',那module.exports = {name:'xxx'},引用对象改变,两者又是同时指向一个对象,所以都改变了。
二、ES6规范
1:每一个模块只加载一次, 每一个JS只执行一次, 如果下次再去加载同目录下同文件,直接从内存中读取。 一个模块就是一个单例,或者说就是一个对象;
2:每一个模块内声明的变量都是局部变量, 不会污染全局作用域;
3:模块内部的变量或者函数可以通过export导出;
4:一个模块可以导入别的模块
es6有多种写法:
(1)、export { xx, xx}与import {xx, xx} from '../../xxx.js'
(2)、在export接口的时候, 我们可以使用 XX as YY, 把导出的接口名字改了, 比如: fn1(实际export) as SayHi(别名) , 把这些接口名字改成不看文档就知道干什么的:在引用文件这样用 import {SayHi} from '../../xx.js';
(3)、这种方式是直接在export的地方定义导出的函数,或者变量:export const foo = xxx; 引用 import { foo } from '../../xx'
(4)、这种导出的方式不需要知道变量的名字, 相当于是匿名的, 直接把开发的接口给export;
如果一个js模块文件就只有一个功能, 那么就可以使用export default导出;export default xxx; import xxxxx from '../../xxx.js'
ps: ES6的import和export提供相当多导入以及导出的语法;
在import的时候可以使用通配符*导入外部的模块:
import * as obj from"./lib";
console.log(obj);