The difference between module.exports and exports in WeChat mini program

In the WeChat applet, module.exports and exports can be used in the official documents provided below. It is relatively simple and convenient to use, but the difference between the two is not very clear at the time.

WeChat Mini Program Official Document--Framework--Logic Layer--Modularization.png

In order to better understand the relationship between exports and module.exports, let’s first cover some js basics. Example:

// 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);
    }
})

The result of running app.js is:

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

Explain:
a is an object, b is a reference# to a ##, that is, a and b point to the same object, that is, a and b point to the same memory address, so the first two outputs are the same. When b is modified, that is, the contents of a and b pointing to the same memory address have changed, so a will also be reflected, so the third and fourth outputs are the same.
When b is completely covered, b points to a new memory address (the original memory block is not modified), and a still points to the original memory block, that is, a and b no longer point to the same memory block. In other words, a and b have nothing to do with each other at this time, so the last two outputs are different.

• exports is a reference to module.exports;

• The initial value of module.exports is an empty object {}, so the initial value of exports is also {};

• require() returns module.exports and Not exports. So: When we assign a value to exports through
  

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

  Copy after login
  , we actually add two

  attributes to the empty object module.exports. The above code is equivalent to:

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

  Copy after login

// 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;

Therefore, when the relationship between the two is not clear, please use module.exports to expose the interface, and try not to use exports to expose the interface.

The above is the detailed content of The difference between module.exports and exports in WeChat mini program. For more information, please follow other related articles on the PHP Chinese website!