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 相关文章推荐
jQuery中bind()方法用法实例
Jan 19 Javascript
jQuery判断对象是否存在的方法
Feb 05 Javascript
jQuery插件实现多级联动菜单效果
Dec 01 Javascript
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
Mar 22 Javascript
javaScript如何跳出多重循环break、continue
Sep 01 Javascript
学习使用jQuery表单验证插件和日历插件
Feb 13 Javascript
Node.js简单入门前传
Aug 21 Javascript
Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
Sep 15 Javascript
Webstorm2016使用技巧(SVN插件使用)
Oct 29 Javascript
如何利用vue+vue-router+elementUI实现简易通讯录
May 13 Javascript
vue使用nprogress实现进度条
Dec 09 Javascript
vue+vant使用图片预览功能ImagePreview的问题解决
Apr 10 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生成xml简单实例代码
2009/12/16 PHP
php中批量替换文件名的实现代码
2011/07/20 PHP
基于php常用函数总结(数组,字符串,时间,文件操作)
2013/06/27 PHP
php实现mysql数据库操作类分享
2014/02/14 PHP
phpmyadmin配置文件现在需要绝密的短密码(blowfish_secret)的2种解决方法
2014/05/07 PHP
yii操作cookie实例简介
2014/07/09 PHP
php 使用ActiveMQ发送消息,与处理消息操作示例
2020/02/23 PHP
JS 拼图游戏 面向对象,注释完整。
2009/06/18 Javascript
JavaScript 创建对象
2009/07/17 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
2013/11/22 Javascript
jQuery使用append在html元素后同时添加多项内容的方法
2015/03/26 Javascript
AngularJS快速入门
2015/04/02 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
2016/01/04 Javascript
JS 终止执行的实现方法
2016/11/24 Javascript
jQuery鼠标移动图片上实现放大效果
2017/06/25 jQuery
Javascript中this关键字指向问题的测试与详解
2017/08/11 Javascript
axios发送post请求,提交图片类型表单数据方法
2018/03/16 Javascript
简述JS浏览器的三种弹窗
2018/07/15 Javascript
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
2018/11/13 Javascript
js实现坦克移动小游戏
2019/10/28 Javascript
vue项目中使用rem,在入口文件添加内容操作
2020/11/11 Javascript
[01:56]2014DOTA2西雅图邀请赛 MVP外卡赛老队长精辟点评
2014/07/09 DOTA
[47:26]完美世界DOTA2联赛 LBZS vs Forest 第二场 11.07
2020/11/09 DOTA
基于Python的身份证号码自动生成程序
2014/08/15 Python
Python 编码Basic Auth使用方法简单实例
2017/05/25 Python
Python实现监控Nginx配置文件的不同并发送邮件报警功能示例
2019/02/26 Python
Python面向对象之类和实例用法分析
2019/06/08 Python
详解python路径拼接os.path.join()函数的用法
2019/10/09 Python
Django User 模块之 AbstractUser 扩展详解
2020/03/11 Python
canvas线条的属性详解
2018/03/27 HTML / CSS
蛋白质世界:Protein World
2017/11/23 全球购物
英国和世界各地鲜花速递专家:Arena Flowers
2018/02/10 全球购物
Theo + George官方网站:都柏林时尚品牌
2019/04/08 全球购物
什么是网络协议
2016/04/07 面试题
装修致歉信
2014/01/15 职场文书
目标管理责任书
2014/04/15 职场文书