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 相关文章推荐
解决遍历时Array.indexOf产生的性能问题
Jul 03 Javascript
JS 在指定数组中随机取出N个不重复的数据
Jun 10 Javascript
如何书写高质量jQuery代码(使用jquery性能问题)
Jun 30 Javascript
jquery中$(#form :input)与$(#form input)的区别
Aug 18 Javascript
JavaScript实现关键字高亮功能
Nov 12 Javascript
javascript结合CSS实现苹果开关按钮特效
Apr 07 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
Sep 12 Javascript
vue.js 表格分页ajax 异步加载数据
Oct 18 Javascript
jQuery实现的checkbox级联选择下拉菜单效果示例
Dec 26 Javascript
vue2滚动条加载更多数据实现代码
Jan 10 Javascript
微信小程序表单验证错误提示效果
May 19 Javascript
jQuery实现轮播图效果demo
Jan 11 jQuery
详解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
叶罗丽:为什么大家对颜冰这对CP非常关心,却对金茉两人十分冷漠
2020/03/17 国漫
jQuery+PHP发布的内容进行无刷新分页(Fckeditor)
2015/10/22 PHP
如何做到打开一个页面,过几分钟自动转到另一页面
2007/04/20 Javascript
cnblogs csdn 代码运行框实现代码
2009/11/02 Javascript
JavaScript 学习笔记一些小技巧
2010/03/28 Javascript
有趣的javascript数组定义方法
2010/09/10 Javascript
JavaScript获取按钮所在form表单id的方法
2015/04/02 Javascript
WebApi+Bootstrap+KnockoutJs打造单页面程序
2016/05/16 Javascript
Web程序员必备的7个JavaScript函数
2016/06/14 Javascript
ES6记录异步函数的执行时间详解
2016/08/31 Javascript
jQuery的三种bind/One/Live/On事件绑定使用方法
2017/02/23 Javascript
vue 组件中添加样式不生效的解决方法
2018/07/06 Javascript
实例详解BootStrap的动态模态框及静态模态框
2018/08/13 Javascript
JavaScript展开操作符(Spread operator)详解
2019/07/20 Javascript
微信小程序点餐系统开发常见问题汇总
2019/08/06 Javascript
node.js使用 http-proxy 创建代理服务器操作示例
2020/02/10 Javascript
js实现简单的贪吃蛇游戏
2020/04/23 Javascript
git使用.gitignore设置不生效或不起作用问题的解决方法
2017/06/01 Python
python3.4用函数操作mysql5.7数据库
2017/06/23 Python
Python tkinter模块弹出窗口及传值回到主窗口操作详解
2017/07/28 Python
Python3 queue队列模块详细介绍
2018/01/05 Python
Python定时任务sched模块用法示例
2018/07/16 Python
Python实现个人微信号自动监控告警的示例
2019/07/03 Python
python global关键字的用法详解
2019/09/05 Python
Selenium获取登录Cookies并添加Cookies自动登录的方法
2020/12/04 Python
css3实现一款模仿iphone样式的注册表单
2013/03/20 HTML / CSS
DELPHI面试题研发笔试试卷
2015/11/08 面试题
追悼会上的答谢词
2014/01/10 职场文书
秋季开学典礼主持词
2014/03/19 职场文书
党支部创先争优活动总结
2014/08/28 职场文书
个人三严三实对照检查材料
2014/09/25 职场文书
常务副县长“三严三实”对照检查材料思想汇报
2014/10/05 职场文书
大学生安全教育主题班会
2015/08/12 职场文书
追悼会答谢词范文
2015/09/29 职场文书
2016中学教师读书心得体会
2016/01/13 职场文书
2016计划生育先进个人事迹材料
2016/02/29 职场文书