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

PHPz
發布: 2017-04-04 11:46:52
原創
1884 人瀏覽過

微信小程式中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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板