ES6 module.exports和export详解

前言

概念：module.exports和exports是属于commonJs规范，export和export default是ES6模块规范。

• exports 和module.exports 这两个导出对象，变量 ，方法，可以在全局使用 require(‘./a’)。
  当两个同时在一个模块导出对象时只有module.exports导出有效。
• 在es5中遵循了commonJs module.exports导出模块 require 引入模块
• exports 和module.exports 必须后面跟=
  • exports=
  • module.exports =
• es6 不需要=
  • export ...
  • export default ...

一、commonJs:

exports 等于 module.exports，相当于在js文件头部，有一个module对象，

module.exports = exports；

exports是一个对象，所以可以exports多个值

module.exports 初始值为一个空对象 {}
exports 是指向的 module.exports 的引用
require() 返回的是 module.exports 而不是 exports

也就是:
exports = module.exports = {}, exports和module.exports都指向一个引用地址{}
如果exports.name = 'xxx'，那module.exports = {name:'xxx'}
引用对象改变，两者又是同时指向一个对象，所以都改变了。

使用步骤

1.导出属性

对于要导出的属性，可以简单直接挂到exports对象上

exports.name = function() {
    console.log('My name is Lemmy Kilmister');
};

const getWebsocket = ()=>{}
exports.getWebsocket = getWebsocket;

2.导出类

对于类，为了直接使导出的内容作为类的构造器可以让调用者使用new操作符创建实例对象，应该把构造函数挂到module.exports对象上，不要和导出属性值混在一起

// 暴露.js
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('暴露.js'); var a = newA(name, age);

二、ES6规范

• 每一个模块只加载一次， 每一个JS只执行一次， 如果下次再去加载同目录下同文件，直接从内存中读取。 一个模块就是一个单例，或者说就是一个对象；
• 每一个模块内声明的变量都是局部变量， 不会污染全局作用域；
• 模块内部的变量或者函数可以通过export导出；
• 一个模块可以导入别的模块

对外暴露的方式

分别暴露

export let a = 1
export function fun(){
	console.log("你好")
}

统一暴露

let a = 1
function fun (){
	console.log("你好")
}
export { a , fun }

暴露的时候指定别名

在export接口的时候， 我们可以使用 XX as YY， 把导出的接口名字改了
比如： fn1(实际export) as SayHi（别名)， 把这些接口名字改成不看文档就知道干什么的
在引用文件这样用 import {SayHi} from ‘…/…/xx.js’;

// 暴露.js
let fn1 = function() {console.log('sayHi')};
export { fn1 as sayHi };
// 引用.js
import { sayHi } from '暴露.js'

默认暴露

一个js文件中只能有一个默认暴露，默认暴露的可以是一个常量，函数，对象等。

let a = 1
function fun (){
	console.log("你好")
}
export { a , fun }

//默认暴露一个对象
let a = 1
function fun (){
	console.log("你好")
}
export default { a , fun }

引入方式

1.解构赋值引入

对于分别暴露，一般使用解构赋值来引入

import { a , fun } from "文件路径"
//此时当前模块便含有 a 变量，和fun函数
console.log(a)// 1
fun()// 你好

2.直接引入

对于默认暴露，直接引入即可
如果要引入的js模块默认暴露的是一个函数

//如果要引入的js模块默认暴露的是一个函数
import f from "文件路径"  //此处引入的就是一个函数
f() // 你好

如果要引入的js模块默认暴露的是一个对象

//如果要引入的js模块默认暴露的是一个对象
import objName from "文件路径"  //此处引入的也是一个对象
 console.log(objName.a) // 1
 objName.fun() // 你好

3. 通配符导入

在import的时候可以使用通配符*导入外部的模块：
import * as xxx from ‘xxx’: 会将若干export导出的内容组合成一个对象返回；
import xxx from ‘xxx’：（export default Din）只会导出这个默认的对象作为一个对象;

// 暴露.js
export fn1;
export fn2;
export fn3;
// 引用.js
import * as fns from '暴露.js';