How to use exports and module.exports

This time I will bring you how to use exports and module.exports, what are the precautions when using exports and module.exports, the following is a practical case, let's take a look.

1. exports is the auxiliaryobject of module.exports. When exports provides api to the outside world, you need to use return to return the exports object

2. module.exports can also directly provide api

Reference: https://github.com/seajs/seajs/issues/242

exports Object

exports is an object used to provide module interfaces to the outside world.

define(function(require, exports) {
 // 对外提供 foo 属性
 exports.foo = 'bar';
 // 对外提供 doSomething 方法
 exports.doSomething = function() {};
});

In addition to adding members to the exports object, you can also use return to directly provide interfaces to the outside world.

define(function(require) {
 // 通过 return 直接提供接口
 return {
  foo: 'bar',
  doSomething: function() {}
 };
});

If the return statement is the only code in the module, it can also be simplified to:

define({
 foo: 'bar',
 doSomething: function() {}
});

The above format is particularly suitable for defining JSONP modules.

Special note: The following way of writing is wrong!

define(function(require, exports) {
 // 错误用法！！!
 exports = {
  foo: 'bar',
  doSomething: function() {}
 };
});

The correct way to write it is to use return or assign a value to module.exports:

define(function(require, exports, module) {
 // 正确写法
 module.exports = {
  foo: 'bar',
  doSomething: function() {}
 };
});

Tip: exports is just a reference to module.exports. When exports is reassigned inside the factory, the value of module.exports will not be changed. Therefore, assigning a value to exports is invalid and cannot be used to change the module interface.

module.exports Object

The interface provided by the current module to the outside world.

The exports parameter passed to the factory Constructor is a reference to the module.exports object. Providing interfaces only through the exports parameter sometimes cannot meet all the needs of developers. For example, when the interface of a module is an instance of a certain class, it needs to be implemented through module.exports:

define(function(require, exports, module) {
 // exports 是 module.exports 的一个引用
 console.log(module.exports === exports); // true
 // 重新给 module.exports 赋值
 module.exports = new SomeClass();
 // exports 不再等于 module.exports
 console.log(module.exports === exports); // false
});

Note: The assignment to module.exports needs to be executed synchronously and cannot be placed in the callback function. The following will not work:

// x.jsdefine(function(require, exports, module) {
 // 错误用法
 setTimeout(function() {
  module.exports = { a: "hello" };
 }, 0);
});

In y.js, the above x.js is called:

// y.jsdefine(function(require, exports, module) {
 var x = require('./x');
 // 无法立刻得到模块 x 的属性 a
 console.log(x.a); // undefined
});

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

Array change detection problem in vue

Display progress bar when JS uploads files

The above is the detailed content of How to use exports and module.exports. For more information, please follow other related articles on the PHP Chinese website!