module.exports和export详解

前言
一、commonJs:
- 使用步骤
- 1.导出属性
- 2.导出类
二、ES6规范
- 对外暴露的方式
- - 分别暴露
  - 统一暴露
  - - 暴露的时候指定别名
  - 默认暴露
- 引入方式
- - 1.解构赋值引入
  - 2.直接引入
  - 3. 通配符导入

前言

概念：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) // 1objName.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';

ES6 module.exports和export详解相关推荐

【ES6】 let与const详解
[ES6] let与const详解 ES6,全称为ECMAScript6.ES6与js的关系是:前者是后者的规格,后者是前者的实现.换句话说,ES是js的国际化版本,js是ES的子集. 1. let ...
一文解读exports、module.exports 和 export、export default
对于前端初学者来说,exports.module.exports 和 export.export default 容易让人产生误解,笔者顺便写篇文章解读一下. 第一部分:exports 和 modul ...
【JavaScript 教程】ES6 中的 Promise对象详解
[JavaScript 教程]ES6 中的 Promise对象详解 1.Promise对象含义 promise是异步编程的一种解决方法. 所谓promise,简单说是一个容器,里面保存着某个未来才会 ...
DB2 export详解
DB2 export详解 EXPORT实用程序使用SQL select语句或XQUERY语句抽取数据,并将信息放到文件中.可使用输出文件移动数据以便执行IMPORT或LOAD操作,或者将数据用于分析. ...
ES6的 for of 循环详解
ES6的 for of 循环详解其实使用ES6中的 for of 循环还是有一定的要求,就是循环的对象必须有Symbol.iterator这个属性,而且属性值一定要是一个函数. 循环的对象一定要有S ...
module.exports 和 export default
CommonJS模块规范和ES6模块规范完全是两种不同的概念 CommonJS模块规范 Node应用由模块组成,采用CommonJS模块规范. 根据这个规范,每个文件就是一个模块,有自己的作用域.在一 ...
exports、module.exports和export、export default到底是咋回事
地址1:https://segmentfault.com/a/1190000010426778 地址2:https://blog.csdn.net/caixiaowang/article/detail ...
exports、module.exports和export、export default之间的区别
总结: require: node 和 es6 都支持的引入(CommonJS规范) export / import : 只有es6 支持的导出引入 module.exports / exports: ...
ES6中的class类详解
目录一.class简介二.静态方法和静态属性 2.1 静态方法 2.2 静态属性三.class继承extends 四.class的取值函数getter和存值函数setter 五.Super关键字 ...

ES6 module.exports和export详解