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 相关文章推荐
为调试JavaScript添加输出窗口的代码
Feb 07 Javascript
jQuery中data()方法用法实例
Dec 27 Javascript
JavaScript设置、获取、清除单值和多值cookie的方法
Nov 17 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
Jan 04 Javascript
JS当前页面登录注册框,固定DIV,底层阴影的实例代码
Sep 29 Javascript
AngularJS双向绑定和依赖反转实例详解
Apr 15 Javascript
vue2.0 datepicker使用方法
Feb 04 Javascript
vue3.0 CLI - 2.5 - 了解组件的三维
Sep 14 Javascript
推荐几个不错的console调试技巧实现
Dec 20 Javascript
javascript实现京东登录显示隐藏密码
Aug 02 Javascript
jQuery实现异步上传一个或多个文件
Aug 17 jQuery
详解Vue数据驱动原理
Nov 17 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入门速成(2)
2006/10/09 PHP
浏览器关闭后,能继续执行的php函数(ignore_user_abort)
2012/08/01 PHP
php缩放图片(根据宽高的等比例缩放)实例介绍
2013/06/09 PHP
使用PHP如何实现高效安全的ftp服务器(一)
2015/12/20 PHP
PHP实现的简单sha1加密功能示例
2017/08/27 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
基于php流程控制语句和循环控制语句(讲解)
2017/10/23 PHP
动态加载js文件 document.createElement
2006/10/14 Javascript
如何让浏览器支持jquery ajax load 前进、后退功能
2014/06/12 Javascript
Jquery使用css方法改变样式实例
2015/05/18 Javascript
js实现TAB切换对应不同颜色的代码
2015/08/31 Javascript
jQuery导航条固定定位效果实例代码
2017/05/26 jQuery
jqueryUI tab标签页代码分享
2017/10/09 jQuery
详解如何将 Vue-cli 改造成支持多页面的 history 模式
2017/11/20 Javascript
Vue实现底部侧边工具栏的实例代码
2018/09/03 Javascript
koa socket即时通讯的示例代码
2018/09/07 Javascript
ant-design表单处理和常用方法及自定义验证操作
2020/10/27 Javascript
[02:07]DOTA2超级联赛专访BBC:难忘网吧超神经历
2013/06/09 DOTA
[43:43]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第三场 11.29
2020/12/02 DOTA
python实现搜索指定目录下文件及文件内搜索指定关键词的方法
2015/06/28 Python
Python3.遍历某文件夹提取特定文件名的实例
2018/04/26 Python
Python检测网络延迟的代码
2018/05/15 Python
详解Python的数据库操作(pymysql)
2019/04/04 Python
三步实现Django Paginator分页的方法
2019/06/11 Python
python GUI库图形界面开发之PyQt5控件QTableWidget详细使用方法与属性
2020/02/25 Python
python GUI库图形界面开发之pyinstaller打包python程序为exe安装文件
2020/02/26 Python
django修改models重建数据库的操作
2020/03/31 Python
使用python matploblib库绘制准确率,损失率折线图
2020/06/16 Python
HTML5 HTMLCollection和NodeList的区别详解
2020/04/29 HTML / CSS
三星美国官网:Samsung美国
2017/02/06 全球购物
AOP的定义以及作用
2013/09/08 面试题
商务英语毕业生自荐信范文
2013/11/08 职场文书
2014年村委会工作总结
2014/11/24 职场文书
暖春观后感
2015/06/08 职场文书
详解Laravel框架的依赖注入功能
2021/05/27 PHP
kubernetes集群搭建Zabbix监控平台的详细过程
2022/07/07 Servers