node.js的exports、module.exports与ES6的export、export default深入详解


Posted in Javascript onOctober 26, 2017

前言

最近难得有空,决定开始重新规范的学习一下node编程。但是引入模块我看到用 require的方式,再联想到咱们的ES6各种export 、export default。

阿西吧,头都大了....

头大完了,那我们坐下先理理他们的使用范围。

  • require: node 和 es6 都支持的引入
  • export / import : 只有es6 支持的导出引入
  • module.exports / exports: 只有 node 支持的导出

这一刻起,我觉得是时候要把它们之间的关系都给捋清楚了,不然我得混乱死。话不多少,咱们开干!!

node模块

Node里面的模块系统遵循的是CommonJS规范。

那问题又来了,什么是CommonJS规范呢?

由于js以前比较混乱,各写各的代码,没有一个模块的概念,而这个规范出来其实就是对模块的一个定义。

CommonJS定义的模块分为: 模块标识(module)、模块定义(exports) 、模块引用(require)

先解释 exports 和 module.exports

在一个node执行一个文件时,会给这个文件内生成一个 exports和module对象,

而module又有一个exports属性。他们之间的关系如下图,都指向一块{}内存区域。

exports = module.exports = {};

node.js的exports、module.exports与ES6的export、export default深入详解

那下面我们来看看代码的吧。

//utils.js
let a = 100;

console.log(module.exports); //能打印出结果为:{}
console.log(exports); //能打印出结果为:{}

exports.a = 200; //这里辛苦劳作帮 module.exports 的内容给改成 {a : 200}

exports = '指向其他内存区'; //这里把exports的指向指走

//test.js

var a = require('/utils');
console.log(a) // 打印为 {a : 200}

从上面可以看出,其实require导出的内容是module.exports的指向的内存块内容,并不是exports的。

简而言之,区分他们之间的区别就是 exports 只是 module.exports的引用,辅助后者添加内容用的。

用白话讲就是,exports只辅助module.exports操作内存中的数据,辛辛苦苦各种操作数据完,累得要死,结果到最后真正被require出去的内容还是module.exports的,真是好苦逼啊。

其实大家用内存块的概念去理解,就会很清楚了。

然后呢,为了避免糊涂,尽量都用 module.exports 导出,然后用require导入。

ES中的模块导出导入

说实话,在es中的模块,就非常清晰了。不过也有一些细节的东西需要搞清楚。

比如 export 和 export default,还有 导入的时候,import a from ..,import {a} from ..,总之也有点乱,那么下面我们就开始把它们捋清楚吧。

export 和 export default

首先我们讲这两个导出,下面我们讲讲它们的区别

  • export与export default均可用于导出常量、函数、文件、模块等
  • 在一个文件或模块中,export、import可以有多个,export default仅有一个
  • 通过export方式导出,在导入时要加{ },export default则不需要
  • export能直接导出变量表达式,export default不行。

下面咱们看看代码去验证一下

testEs6Export.js

'use strict'
//导出变量
export const a = '100'; 

 //导出方法
export const dogSay = function(){ 
 console.log('wang wang');
}

 //导出方法第二种
function catSay(){
 console.log('miao miao'); 
}
export { catSay };

//export default导出
const m = 100;
export default m; 
//export defult const m = 100;// 这里不能写这种格式。

index.js

//index.js
'use strict'
var express = require('express');
var router = express.Router();

import { dogSay, catSay } from './testEs6Export'; //导出了 export 方法 
import m from './testEs6Export'; //导出了 export default 

import * as testModule from './testEs6Export'; //as 集合成对象导出



/* GET home page. */
router.get('/', function(req, res, next) {
 dogSay();
 catSay();
 console.log(m);
 testModule.dogSay();
 console.log(testModule.m); // undefined , 因为 as 导出是 把 零散的 export 聚集在一起作为一个对象,而export default 是导出为 default属性。
 console.log(testModule.default); // 100
 res.send('恭喜你,成功验证');
});

module.exports = router;

从上面可以看出,确实感觉 ES6的模块系统非常灵活的。

代码地址

GitHub: https://github.com/XuXiaoGH/exportImportTest

本地下载:http://xiazai.3water.com/201710/yuanma/exportImportTest(3water.com).rar

参考文献

1.老树新芽,在ES6下使用Express

2.exports 和 module.exports 的区别
3.module.exports与exports,export与export default之间的关系

感谢这三位前辈的分享。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JS预览图像将本地图片显示到浏览器上
Aug 25 Javascript
javascript 回到顶部效果的实现代码
Feb 17 Javascript
Dojo Javascript 编程规范 规范自己的JavaScript书写
Oct 26 Javascript
JavaScript实现网页加载进度条代码超简单
Sep 21 Javascript
微信小程序 开发指南详解
Sep 27 Javascript
微信小程序实现滑动删除效果
May 19 Javascript
JavaScript方法_动力节点Java学院整理
Jun 28 Javascript
JavaScript如何借用构造函数继承
Nov 06 Javascript
JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】
May 01 Javascript
解决vant title-active-color与title-inactive-color不生效问题
Nov 03 Javascript
javascript实现放大镜功能
Dec 09 Javascript
JavaScript实现外溢动态爱心的效果的示例代码
Mar 21 Javascript
详解Webstorm 新建.vue文件支持高亮vue语法和es6语法
Oct 26 #Javascript
Node.js中环境变量process.env的一些事详解
Oct 26 #Javascript
Sublime Text新建.vue模板并高亮(图文教程)
Oct 26 #Javascript
vue+swiper实现组件化开发的实例代码
Oct 26 #Javascript
canvas+gif.js打造自己的数字雨头像的示例代码
Oct 26 #Javascript
使用Bootrap和Vue实现仿百度搜索功能
Oct 26 #Javascript
Vue利用路由钩子token过期后跳转到登录页的实例
Oct 26 #Javascript
You might like
PHP获取photoshop写入图片文字信息的方法
2015/03/31 PHP
thinkphp微信开发(消息加密解密)
2015/12/02 PHP
Laravel-添加后台模板AdminLte的实现方法
2019/10/08 PHP
KindEditor在php环境下上传图片功能集成的方法示例
2020/07/20 PHP
Nigma vs Alliance BO5 第四场2.14
2021/03/10 DOTA
js href的用法
2010/05/13 Javascript
JavaScript中数组的排序、乱序和搜索实现代码
2011/11/30 Javascript
js实现页面转发功能示例代码
2013/08/05 Javascript
jQuery中事件对象e的事件冒泡用法示例介绍
2014/04/25 Javascript
jquery实现上下左右滑动的方法
2015/02/09 Javascript
JavaScript通过prototype给对象定义属性用法实例
2015/03/23 Javascript
JavaScript中getUTCMinutes()方法的使用详解
2015/06/10 Javascript
jQuery取得iframe中元素的常用方法详解
2016/01/14 Javascript
JS根据生日月份和日期计算星座的简单实现方法
2016/11/24 Javascript
JS监控关闭浏览器操作的实例详解
2017/09/12 Javascript
Node.js 使用递归实现遍历文件夹中所有文件
2017/09/18 Javascript
详解基于Koa2开发微信二维码扫码支付相关流程
2018/05/16 Javascript
jQuery 同时获取多个标签的指定内容并储存为数组
2018/11/20 jQuery
node事件循环和process模块实例分析
2020/02/14 Javascript
python3 读写文件换行符的方法
2018/04/09 Python
Python使用re模块正则提取字符串中括号内的内容示例
2018/06/01 Python
用Python实现读写锁的示例代码
2018/11/05 Python
Python从函数参数类型引出元组实例分析
2019/05/28 Python
python 实现的发送邮件模板【普通邮件、带附件、带图片邮件】
2019/07/06 Python
Python Matplotlib 基于networkx画关系网络图
2019/07/10 Python
关于TensorFlow新旧版本函数接口变化详解
2020/02/10 Python
10行Python代码实现Web自动化管控的示例代码
2020/08/14 Python
python实现KNN近邻算法
2020/12/30 Python
html5录音功能实战示例
2019/03/25 HTML / CSS
会展策划与管理专业大学生职业生涯规划
2014/02/07 职场文书
乡镇组织委员个人整改措施
2014/09/16 职场文书
党支部三会一课计划
2014/09/24 职场文书
社区安置帮教工作总结2015
2015/05/20 职场文书
入党申请书怎么写?
2019/06/21 职场文书
jQuery实现影院选座订座效果
2021/04/13 jQuery
详解用Python把PDF转为Word方法总结
2021/04/27 Python