微信小程序 - module.exports & exports 区别

简介: 微信小程序 - module.exports & exports 区别

微信小程序中module.exports与exports的用法可以查看下面官方提供的文档,使用起来还是比较简单方便的,但时对于这两者的区别解释的不是很明白。


image.png


为了更好的理解 exports 和module.exports 的关系,我们先来补点 js 基础。示例:

// index.js
Page({
    onLoad: function(){
        var a = {name: '张三'};
        var b = a;
        console.log(a);
        console.log(b);
        b.name = '李四';
        console.log(a);
        console.log(b);
        var b = {name: '王五'};
        console.log(a);
        console.log(b);
    }
})

运行 app.js 结果为:

{ name: '张三' }
{ name: '张三' }
{ name: '李四' }
{ name: '李四' }
{ name: '李四' }
{ name: '王五' }

解释一下:

a 是一个对象,b 是对 a 的引用,即 a 和 b 指向同一个对象,即 a 和 b 指向同一块内存地址,所以前两个输出一样。

当对 b 作修改时,即 a 和 b 指向同一块内存地址的内容发生了改变,所以 a 也会体现出来,所以第三四个输出一样。

当对 b 完全覆盖时,b 就指向了一块新的内存地址(并没有对原先的内存块作修改),a 还是指向原来的内存块,即 a 和 b 不再指向同一块内存,也就是说此时 a 和 b 已毫无关系,所以最后两个输出不一样。

明白了上述例子后,我们进入正题。我们只需知道三点即可知道exports 和module.exports 的区别了:

  • exports 是指向的module.exports 的引用;
  • module.exports 初始值为一个空对象{},所以exports 初始值也是{};
  • require() 返回的是module.exports 而不是exports。

所以:我们通过:

var name = '张三';
exports.name = name;
exports.sayName = function() {
    console.log(name);
}


给 exports 赋值其实是给 module.exports 这个空对象添加了两个属性而已,上面的代码相当于:

var name = '张三';
module.exports.name = name;
module.exports.sayName = function() {
     console.log(name);
}

下面就在微信小程序中module.exports和exports的区别做出示例

// common.js 
function sayHello(name) {
    console.log(`Hello ${name} !`);
}
function sayGoodbye(name) {
    console.log(`Goodbye ${name} !`);
}
// 第一种情况,module.exports初始值为空对象,两个函数使用module.exports或exports都一样效果
module.exports.sayHello = sayHello;
module.exports.sayGoodbye = sayGoodbye; 
exports.sayHello = sayHello;
exports.sayGoodbye = sayGoodbye; 
// 第二种情况,module.exports初始值不为空对象,只能使用module.exports暴露接口,而不能使用exports暴露,会出现is not a function错误。
module.exports = {name:1};// module.exports给一个初始值
//以下两个正常使用
module.exports.sayHello = sayHello;  
module.exports.sayGoodbye = sayGoodbye;
//使用以下两个会报错误sayHello is not a function
exports.sayHello = sayHello;  
exports.sayGoodbye = sayGoodbye;  

综上所述,当module.exports 指向新的对象时,exports 断开了与 module.exports 的引用,module.exports 指向了新的内存块,而 exports 还是指向原来的内存块。

因此,在不是很清楚两者关系的时候,请采用module.exports来暴露接口,而尽量不采用exports暴露接口。

目录
相关文章
|
小程序 JavaScript
小程序中的数据双向绑定和Vue的有什么区别
小程序中的数据双向绑定和Vue的有什么区别
274 1
|
小程序 JavaScript 前端开发
小程序wx:if 和hidden的区别?
小程序wx:if 和hidden的区别?
|
存储 小程序
微信小程序的bindtap和catchtap的区别
微信小程序的bindtap和catchtap的区别
477 0
|
移动开发 小程序 安全
【个人小程序和企业小程序的区别】
【个人小程序和企业小程序的区别】
2344 0
|
小程序
小程序wx:if和hidden的区别?
小程序wx:if和hidden的区别?
|
小程序 JavaScript
小程序bindtap 和 catchtap 的区别以及如何使用
小程序bindtap 和 catchtap 的区别以及如何使用
927 0
|
小程序 前端开发 中间件
ThinkPHP 配置跨域请求,使用TP的内置跨域类配置,小程序和web网页跨域请求的区别及格式说明
本文介绍了如何在ThinkPHP框架中配置跨域请求,使用了TP内置的跨域类`\think\middleware\AllowCrossDomain::class`。文章还讨论了小程序和web网页在跨域请求格式上的区别,并提供了解决方案,包括修改跨域中间件源码以支持`Origin`和`token`。此外,还介绍了微信小程序跨域请求的示例和web网页前端发送Axios跨域请求的请求拦截器配置。
ThinkPHP 配置跨域请求,使用TP的内置跨域类配置,小程序和web网页跨域请求的区别及格式说明
|
小程序 前端开发 JavaScript
小程序中wx:if 和hidden的区别
在微信小程序中,wx:if和hidden都是用于控制元素显示与隐藏的方法,但它们在工作原理和性能上存在显著差异。
678 3
|
JavaScript 小程序 前端开发
小程序和vue写法的区别
小程序和vue写法的区别
328 1
|
小程序 JavaScript
Vue和小程序的区别
Vue和小程序的区别
390 1