module.exports和exports得区别

对module.exports和exports的一些理解

可能是有史以来最简单通俗易懂的有关Module.exports和exports区别的文章了。

exports = module.exports = {};

所以module.exportsexports的区别就是var a={}; var b=a;,a和b的区别

看起来木有什么太大区别,但实际用起来的时候却又有区别,这是为啥呢,请听我细细道来

关于Module.exports和exports有什么区别,网上一搜一大把,但是说的都太复杂了…
听说exports是Module.exports对象的一个引用(reference)^1,什么是引用?!…_(:з」∠)_

当然啦,如果要彻底理解这两个导出的区别,最好肯定是去看源码,看看都是怎么封装的,功力深厚的童鞋应该一看就懂了。不过,源码我也是看不懂的…(ಥ_ಥ)

但是最近感觉杂七杂八看了好多文章做了好多实验之后,像是打开了任督二脉,机智的我好像有点上道了…

module

首先要明确的一点,module是一个对象 {Object}
当你新建一个文件,比如mo.js,文件内容如下:

1
console.log(module);

 

然后在CMD里执行这个文件node mo.js,就能看到module其实是一个Module实例,你可以这么理解,NodeJS中定义了一个Module类,这个类中有很多属性和方法,exports是其中的一个属性:

1
2
3
4
5
function Module {
id : 'blabla',
exports : {},
blabla...
}

 

当每个js文件在执行或被require的时候,NodeJS其实创建了一个新的实例var module = new Module(),这个实例名叫module
这也就是为什么你并没有定义module这个变量,却能console.log出来而不会报错的原因

module.exports

假设我有一个JS文件内容如下:

console.log(module); //你会看到Module中的exports为空对象{}
module.exports = {print : function(){console.log(12345)} } console.log(module); //你会看到Module中的exports对象已经有了print()方法 

有了上面的基础,很容易理解module.export其实是给Module实例中的exports对象中添加方法/属性

exports

通常使用exports的时候,是这么用的:

exports.print = function(){console.log(12345)} 

假设我有一个JS文件内容如下:

console.log(module); //你会看到Module中的exports为空对象{}
console.log(exports); //你会看到Module中的exports为空对象{} module.exports = { print : function(){console.log(12345)} } console.log(module); //你会看到Module中的exports对象有了print()方法 exports.name = '小白妹妹'; console.log(module); //你会看到Module中的exports对象不仅有了print()方法,还有了name属性 

由此也能看出,传说中的exports其实是module.exports的引用,你可以这么理解,NodeJS在你的代码之前悄悄的加了以下代码:

var module = new Module();
var exports = module.exports;

这也就是为什么你并没有定义exports这个变量,却能console.log出来而不会报错的原因

require

当你从外部调用某个模块,require其实是在require什么?^2
require的时候NodeJS会到处去找有没有这个模块,如果有,return的就是module.exports里的东东。

DOs & DONTs

  • √你可以这样:
    module.exports.name = '小白妹妹';
    exports.age = 10;
    module.exports.print = function(){console.log(12345)};
    
    如果只是使用.来添加属性和方法,module.exportsexports混用是完全可以的,这种情况下,感觉exports就是给懒人用的…毕竟能少写几个7个字符呢!
  • √也可以这样:
    module.exports = {
    name = '小白妹妹';
    };
    exports.age = 10;
    module.exports.print = function(){console.log(12345)};
    
  • ×但不可以这样
    module.exports = {
    name = '小白妹妹';
    };
    exports = {age:10}; // exports现在是{age:10}这个对象的引用,不再是module.exports的引用了
    console.log(module); //你会看到Module的exports中只有name属性!!!
    
  • ×也不可以这样
    exports.age = 10; 
    console.log(module); //你会看到Module的exports中多了age属性
    module.exports = {
    name = '小白妹妹';
    };
    console.log(module); //你会看到Module的exports中还是只有name属性!!!
    

    总结

    还是那一句话,module.exportsexports的区别就是var a={}; var b=a;,a和b的区别
    • 改变exports的指向后所添加的exports.xxx都是无效的。因为require返回的只会是module.exports
  • 不能在使用了exports.xxx之后,改变module.exports的指向。因为exports.xxx添加的属性和方法并不存在于module.exports所指向的新对象中。
  • 对于要导出的属性,可以简单直接挂到exports对象上
  • 对于类,为了直接使导出的内容作为类的构造器可以让调用者使用new操作符创建实例对象,应该把构造函数挂到module.exports对象上,不要和导出属性值混在一起

转载于:https://www.cnblogs.com/wang-z-z/p/9262456.html

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

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

相关文章

[vue-element]ElementUI的穿梭组件如果数据量大会变卡怎么解决不卡的问题呢?

[vue-element]ElementUI的穿梭组件如果数据量大会变卡怎么解决不卡的问题呢? 在 left-footer 的 slot 里面加个翻页组件, 并修改 filter-method 方法重绘穿梭机组件, 大概保持每页 50 条这样子。个人简介 我是歌谣,欢迎和大家一…

华强北耳机为啥老是有人翻车?

我发现买华强北耳机的很多很多人,根本就不了解华强北耳机,估计在搜索耳机时,看到那些推送过来的「华强北耳机」链接就上车了,尤其是「评论区、买家秀」,男模、女模的模版式精彩评论,让你上头… 所以这篇文…

[vue-element] ElementUI表格组件如何实现动态表头?

[vue-element] ElementUI表格组件如何实现动态表头&#xff1f; <template v-for"item in tableColownms"> <el-table-column v-if"item.type!hidden" :key"item.id" :prop"item.field" sortable :label"item.label&qu…

docker时区问题

解决&#xff1a; dockerfile: RUN cp /usr/share/zoneinfo/Asia/Shanghai /etc/localtime#update application timezoneRUN echo "Asia/Shanghai" >> /etc/timezon转载于:https://www.cnblogs.com/Qing-840/p/9263778.html

为什么只推荐入主流版本华强北耳机?

这篇是针对三代的&#xff0c;如下为正文。 现在华强北耳机系列里&#xff0c;洛达 1562A 都快吹上天了~ 热度越高&#xff0c;翻车的就越多。 经常有小伙伴在某宝、某多多上看到那种 140-170 左右的洛达 1562A&#xff0c;说卖家坚称说可以过我的黄色 logo 的检测软件&…

[vue-element] ElementUI使用表格组件时有遇到过问题吗?

[vue-element] ElementUI使用表格组件时有遇到过问题吗&#xff1f; isbase Object.freeze 这算是一个性能优化的小技巧吧。在我们遇到一些 big data的业务场景&#xff0c;它就很有用了。尤其是做管理后台的时候&#xff0c;经常会有一些超大数据量的 table&#xff0c;或者一…

前后端数据加密传输 RSA非对称加密

任务需求&#xff1a;要求登陆时将密码加密之后再进行传输到后端。 经过半天查询摸索折腾&#xff0c;于是有了如下成果&#xff1a; 加密方式&#xff1a;RSA非对称加密。实现方式&#xff1a;公钥加密&#xff0c;私钥解密。研究进度&#xff1a;javascript与java端皆已实现。…

[vue-element]有阅读过ElementUI的源码吗?

[vue-element]有阅读过ElementUI的源码吗&#xff1f; 读过, 公司封装自己的UI库的时候, 我都过很多UI库的源码, 比如element, iview, vuetifyjs, 等个人简介 我是歌谣&#xff0c;欢迎和大家一起交流前后端知识。放弃很容易&#xff0c; 但坚持一定很酷。欢迎大家一起讨论 …

css3-12 transition+css或transform实现过渡动画

css3-12 transitioncss或transform实现过渡动画 一、总结 一句话总结&#xff1a;首先要设置hover后的效果&#xff0c;然后在transition里面指定执行哪些样式和执行时间为多长。 1、哪些样式可以设置过渡动画&#xff1f; transform加别的css 11 transition: width 2s, he…

[vue-element]项目中有使用过ElementUI吗?有遇到过哪些问题?它的使用场景主要是哪些?

[vue-element]项目中有使用过ElementUI吗&#xff1f;有遇到过哪些问题&#xff1f;它的使用场景主要是哪些&#xff1f; 当然是用过了 很多后台系统&#xff0c;都会是用vue结合上ElementUI来实现&#xff0c;很大程度上提高了开发效率&#xff1b; 遇到的问题&#xff1a;对…

nginx的location、root、alias指令用法和区别

nginx指定文件路径有两种方式root和alias&#xff0c;指令的使用方法和作用域&#xff1a; [root] 语法&#xff1a;root path 默认值&#xff1a;root html 配置段&#xff1a;http、server、location、if[alias]语法&#xff1a;alias path 配置段&#xff1a;location root与…

[vue-element] 有用过哪些vue的ui?说说它们的优缺点?

[vue-element] 有用过哪些vue的ui&#xff1f;说说它们的优缺点&#xff1f; 个人认为iview比elementUI好看&#xff0c;elementUI在多级联动菜单有一个bug&#xff08;父子value一样的时候不显示&#xff09;个人简介 我是歌谣&#xff0c;欢迎和大家一起交流前后端知识。放…

bootstrap简单使用

1.bootstrap实例&#xff1a; 1 <title>Bootstrap 实例 - 代码</title>2 <link href"https://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel"stylesheet">3 <script src"https://libs.baidu.com/jquery/2.0.0/jqu…

[vue] vue中data的属性可以和methods中的方法同名吗?为什么

[vue] vue中data的属性可以和methods中的方法同名吗&#xff1f;为什么 源码 中的 initData() 方法 if (methods && hasOwn(methods, key)) { warn( Method “${key}” has already been defined as a data property., vm ) } 会取出 methods 中的方法进行判断&#xf…

BFC与合并 浅析

BFC BFC 全称 Block Formatting Context。每个渲染区域用formatting context表示&#xff0c;它决定了其子元素将如何定位&#xff0c;以及和其他元素的关系和相互作用在正常流中的盒子要么属于块级格式化上下文&#xff0c;要么属于内联格式化上下文 BFC特性&创建条件 特性…

[vue] 怎么给vue定义全局的方法

[vue] 怎么给vue定义全局的方法 第一种&#xff1a;挂载到Vue的prototype上。把全局方法写到一个文件里面&#xff0c;然后for循环挂载到Vue的prototype上&#xff0c;缺点是调用这个方法的时候没有提示Object.keys(tools).forEach(key > {Vue.prototype[key] tools[key]})…

python3.6安装【scrapy】-最保守方法

系统:win10平台 python版本:3.6.1 1. 下载并安装 pywin32&#xff1a; 进入https://sourceforge.net/projects/pywin32/files/&#xff0c;按照下图目录点击pywin32&#xff0c;选择Build 221&#xff0c;找到自己对应版本的pywin32点击连接即可自己下载&#xff0c;安装按步…

[vue] vue2.0不再支持v-html中使用过滤器了怎么办?

[vue] vue2.0不再支持v-html中使用过滤器了怎么办&#xff1f; 在method中定义方法 htmlFilter(htmlString){ return htmlString.replace(/s/g,’’) } 在vue中 v-html"htmlFilter(htmlString)"即可 个人简介 我是歌谣&#xff0c;欢迎和大家一起交流前后端知识…

java设置项目根目录 工作目录 working dictionary

改变java项目中&#xff0c;绝对路径的根目录 run->run configuration ->Arguments 更改 working dictioinary 转载于:https://www.cnblogs.com/YuQiao0303/p/9277669.html

[vue] 怎么解决vue打包后静态资源图片失效的问题?

[vue] 怎么解决vue打包后静态资源图片失效的问题&#xff1f; 上面蛮多回答感觉像开玩笑似的&#xff0c;静态资源图片失效分几种情况。 1、确定线上环境是否在根路径上&#xff0c;配置资源根目录&#xff0c;vue-cli2 和 vue-cli3 字段不一致&#xff08;assetsPublicPath 和…