微信小程序中的module.exports、exports详解

微信小程序官方文档已经介绍了module.exports与exports的用法，使用方便，下面是截取自官方的内容，但是解释的不明不白：


    微信小程序模块化文档地址：https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/module.html

为了更好的理解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);
    }
})

运行结果：

{ 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暴露接口。


部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！