微信小程式中module.exports和exports的區別

微信小程式中module.exports與exports的用法可以查看下面官方提供的文檔，使用起來還是比較簡單方便的，但時對於這兩者的區別解釋的不是很明白。

微信小程式官方文件--框架--邏輯層--模組化.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暴露接口。

以上是微信小程式中module.exports和exports的區別的詳細內容。更多資訊請關注PHP中文網其他相關文章！