exports、module.exports和export、export default到底是咋回事

前言

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

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

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

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

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

node模块

Node里面的模块系统遵循的是CommonJS规范。
那问题又来了,什么是CommonJS规范呢?
由于js以前比较混乱,各写各的代码,没有一个模块的概念,而这个规范出来其实就是对模块的一个定义。

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

先解释 exportsmodule.exports
在一个node执行一个文件时,会给这个文件内生成一个 exportsmodule对象,
module又有一个exports属性。他们之间的关系如下图,都指向一块{}内存区域。

exports = module.exports = {};

clipboard.png

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

//utils.js
let a = 100;console.log(module.exports); //能打印出结果为:{}
console.log(exports); //能打印出结果为:{}exports.a = 200; //这里辛苦劳作帮 module.exports 的内容给改成 {a : 200}exports = '指向其他内存区'; //这里把exports的指向指走//test.jsvar 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中的模块,就非常清晰了。不过也有一些细节的东西需要搞清楚。
比如 exportexport default,还有 导入的时候,import a from ..,import {a} from ..,总之也有点乱,那么下面我们就开始把它们捋清楚吧。

export 和 export default

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

  1. export与export default均可用于导出常量、函数、文件、模块等
  2. 在一个文件或模块中,export、import可以有多个,export default仅有一个
  3. 通过export方式导出,在导入时要加{ },export default则不需要
  4. 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); // 100res.send('恭喜你,成功验证');
});module.exports = router;

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

代码地址

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

参考文献

1.老树新芽,在ES6下使用Express
2.exports 和 module.exports 的区别
3.module.exports与exports,export与export default之间的关系

感谢这三位前辈的分享。

写在最后

如果文章对你有所帮助,不妨点个赞或者收藏一下,这将是支持我继续写下去的动力。

谢谢亲们。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/402431.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

linux自动备份网站和数据库,到另外服务器上,为当前用户创建定时任务

2019独角兽企业重金招聘Python工程师标准>>> 两台服务器111,和117服务器,每天完成111服务器上网站和数据库自动备份到117服务器上 1:我的111服务器上是当前用户:sx A: 查看当前用户的计划任务:crontab -l是查看当前…

自定义控件三部曲之动画篇(一)——alpha、scale、translate、rotate、set的xml属性及用法...

前言:这几天做客户回访,感触很大,用户只要是留反馈信息,总是一种恨铁不成钢的心态,想用你的app,却是因为你的技术问题,让他们不得不放弃,而你一个回访电话却让他们尽释前嫌&#xff…

Linux c 算法与数据结构--栈

前段时间写了双向链表,现在写个栈,写之前,先简单介绍链表 队列  栈的区别: 链表,队列,堆栈的区别 1、栈是个有底的口袋,像袜子。 队列是没底的口袋,像通心粉。 所以:栈…

Spring 实现数据库读写分离

Spring 实现数据库读写分离 现在大型的电子商务系统,在数据库层面大都采用读写分离技术,就是一个Master数据库,多个Slave数据库。Master库负责数据更新和实时数据查询,Slave库当然负责非实时数据查询。因为在实际的应用中&#xf…

vue 3.x 中使用ele-image时相对路径的图片加载失败

参考文档: https://element.eleme.cn/#/zh-CN/component/installation 环境: Mac OS X 10.12 [zcmele 2]$node -v v12.6.0 [zcmele 3]$npm -v 6.9.0 [zcmele 4]$cnpm -v cnpm6.1.0 (/usr/local/lib/node_modules/cnpm/lib/parse_argv.js) npm6.10.2 (/usr/local/li…

ie6兼容问题汇总

这几天在查找和解决网页在ie6下的兼容性问题花了我不少的时间,参考了网上的一些解决方法和自己做出来比较有效果的给大家参考一下,也方便我日后再用到: 1.IE的cache设置为Every visit to the page,而不是默认的Automatically。基本…

Linux C 数据结构---线性表

数据结构指的是数据元素及数据元素之间的相互关系,包含下面三方面的内容: 其中,线性表是最基本、最简单、也是最常用的一种数据结构。线性表中数据元素之间的关系是一对一的关系,即除了第一个和最后一个数据元素之外,其…

Postman发送请求时带上登录信息

正常情况下,没有登录验证等公共接口,用postman进行get或post请求都很方便,加上相应的参数就行。 但是对于某些接口,可能需要先登录后才能请求,这时如果按正常的思路请求,可能就会被拦截了。 对于这种情况…

Chrome跨域问题

2019独角兽企业重金招聘Python工程师标准>>> 在chrome图标,右键--->属性 --->目标 路径末尾添加 “--disable-web-security” 重启即可 转载于:https://my.oschina.net/u/861562/blog/152171

Linux C 数据结构---单向链表

线性表存储结构分为顺序存储、链式存储。 顺序存储的优点: 顺序存储的缺点: 链表就是典型的链式存储,将线性表L (a0,a1,a2,........an-1)中个元素分布在存储器的不同存储块,成为结点(Node&…

分页插件--根据Bootstrap Paginator改写的js插件

刚刚出来实习,之前实习的公司有一个分页插件,和后端的数据字典约定好了的,基本上是看不到内部是怎么实现的,新公司是做WPF的,好像对于ASP.NET的东西不多,导师扔了一个小系统给我和另一个同事,指…

Linux C 算法分析初步

提到算法,必须提到数据结构,我们要知道一个著名公式: 数据结构 算法 程序 我们先看看下面这张图: 算法是什么?算法是一个有穷规则(或语句、指令)的有续集和。他确定了解决某一问题的一个运算序…

hive实例,GPRS流量统计

2019独角兽企业重金招聘Python工程师标准>>> 最近面试,发现很多公司在使用hive对数据进行处理。 hive是hadoop家族成员,是一种解析like sql语句的框架。它封装了常用MapReduce任务,让你像执行sql一样操作存储在HDFS的表。 hive的表…

Linux C 数据结构—-循环链表

前面我们学习了单向链表,现在介绍单向循环链表,单向循环链表是单链表的一种改进,若将单链表的首尾节点相连,便构成单向循环链表结构,如下图: 对于一个循环链表来说,其首节点和末节点被连接在一起。这种方式…

预备作业03 20162320刘先润

第一次编代码 这几周自学了Linux基础入门,有好多想吐槽的地方,所以这篇随笔是带有半吐槽性质的,这是我学完后最真实的感受 我在电脑上按照教程安装了虚拟机,对于Linux这个完全陌生的概念也稍微算是有些理解,但是还有很…

JTable 失去焦点时取消编辑状态

为什么80%的码农都做不了架构师?>>> reference: http://tips4java.wordpress.com/2008/12/12/table-stop-editing/ 当JTable的单元格处于编辑状态时,如果用户触发以下事件,表格就会退出编辑状态,进而调用T…

Linux C 数据结构——栈

还是先把这张图贴出来,以便对比和理解 栈是限制在一段进行插入操作和删除操作的线性表(俗称堆栈),允许进行操作的一端称为“栈顶”,另一固定端称为“栈底”,当栈中没有元素称为“空栈”。特点:先…

常用的HTTP状态码

2019独角兽企业重金招聘Python工程师标准>>> 第一、成功的状态码: 1)200 OK – 服务器成功返回网页 2)304 Not Modified – 未修改 第二、失败的状态码: 3)404 Not F…

Linux C 数据结构——队列

还是先放这张图,以便对比和理解: 队列是限制在两端进行插入操作和删除操作的线性表,允许进行存入操作的一端称为“队尾”,允许进行删除操作的一端称为“队头”。当线性表中没有元素时,称为“空队”。特点:先…

如何使用FF的Firebug组件中的net工具查看页面元素加载消耗时间

1.安装FF的Firebug组件:点击FF的Tools的Add-ons菜单,输入Firebug关键字,并选择合适的版本Install。 2.安装完毕后地址栏右边会出现一个小虫图标,右边还有一个下拉箭头。如下图: 3.点击下拉箭头,选择“on fo…