1. Exports

  • Module. exports default value: {}
  • Exports is a reference to module.exports
  • Exports point to the memory space of module.exports by default
  • / / module.exports (
  • If exports are reassigned, then exports are disconnected from module.exports

Reference:

  • Both require and import can be referenced
//foo.js
exports.foo="foo"// equivalent to module.exports.foo="foo"

//bar.js
const { foo } = require('./foo.js') console.log(foo); //'foo'

Copy the code
//foo.js
exports={
    foo: 'foo'
}

//bar.js
const { foo } = require('./foo.js'// exports {} console.log(foo); // exports {} console.log(foo); //undefinedCopy the code

2. Differences between commonJs and esModule

  • CommonJs is run when it is loaded, esModule is run when it is compiled
  • CommonJs outputs a shallow copy of the value, and esModule outputs a reference to the value
  • CommentJs has a cache. When first loaded, the entire file is run and an object is output, copied (shallow copy) in memory. The next time the file is loaded, the value is directly from memory
CommonJs output value copy
/*************** a.js**********************/
letcount = 0 exports.count = count; Add = ()=>{// this does not change the count attribute of module.exports ++; // this does not change the count attribute of module. } /*************** b.js**********************/ const { count, add } = require('./a.js') // Equivalent to import {count, add} from where es6 modules are supported'./a.js'

console.log(count) //0
add();
console.log(count)//0
Copy the code
EsModule Output value reference
/*************** a.js**********************/
export letcount = 0; // The output is a reference to the value, pointing to the same block of memoryexportconst add = ()=>{ count++; / / when the reference is to change the memory value of} / * * * * * * * * * * * * * * * b.j s * * * * * * * * * * * * * * * * * * * * * * / import {count, the add} the from'./a.js'

console.log(count) //0
add();
console.log(count)//1
Copy the code
Shallow copy validation of commonJs output
/*************** a.js**********************/ const foo = { count: } //module.exports foo is a shallow copy of foo, pointing to the same memory of exports. window.setTimeout(()=>{ foo.count += 1 console.log('changed foo')
},1000)

/*************** b.js**********************/
const  { foo }  = require('./a.js')

console.log('foo', foo); //'foo',{count: 0}
window.setTimeout(()=>{
  console.log('after 2s foo', foo); //'after 2s foo ',{count: 1}
}, 2000)
Copy the code
Dangerous operations on commonJs output

Const {foo} = require(‘./a.js’) or const foo = require(‘./a.js’).foo is dangerous. Because a copy of the value output by commonJs will not be updated if the memory point of foo is later changed in a.js.

Let’s make a small change to the chestnuts on top:

/*************** a.js**********************/ const foo = { count: 0 } exports.foo=foo; Window.settimeout (()=>{// change foo's memory to refer to exports.foo='haha';
},1000)

/*************** b.js**********************/
const  { foo }  = require('./a.js'); // Copy the reference of foo property to {count: 0} memory address console.log('foo', foo); //'foo',{count: 0} window.setTimeout(()=>{// look! Nothing has changed! console.log('after 2s foo', foo); //'after 2s foo ',{count: 0}
}, 2000)
Copy the code

Improvement:

/*************** b.js**********************/
const test = require('./a.js'); 
//testCopy the entire output object {foo:{count: 0}} reference to the memory address // When the value of the property in memory changes, you can get the latest value because it points to the same memory console.log('foo', test.foo); //'foo',{count: 0} window.settimeout (()=>{// make sure you get the latest console.log('after 2s foo', test.foo); //'after 2s foo '.'haha'}, 2000).Copy the code

Advanced:

/*************** child.js**********************/
let foo = 1

setTimeout(()=>{
  foo=2;
  exports.foo= foo
},1000)
exports.foo=foo

/*******************index.js***************************/
var test =require('./child'); console.log(test.foo); / / 1setTimeout(()=>{
  console.log(test.foo) // 2
},2000)
Copy the code

Make a change to the output in child.js and the result is different.

/*************** child.js**********************/
let foo = 1

setTimeout(()=>{ foo=2; module.exports={foo}; {foo:2}},1000) module.exports={foo}; / / to memory {foo: 1} / * * * * * * * * * * * * * * * * * * * index in js * * * * * * * * * * * * * * * * * * * * * * * * * * * / vartest =require('./child'); // A shallow copy, which points to the memory of {foo:1} and is cached in memory console.log(test.foo); // A shallow copy, which points to the memory of {foo:1} and is cached in memory console.log(test.foo); // 1 // From the cache memory valuesetTimeout(()=>{console.log(test.foo) // 1 // value from cached memory},2000)Copy the code

3. The ES6 module loads the CommonJS module

Module. exports is the same as export Default and can be imported with import

4. The CommonJS module loads the ES6 module

The CommonJS module loads the ES6 module, using the import() function instead of the require command.

// es.mjs
let foo = { bar: 'my-default' };
export default foo;

// cjs.js
const es_namespace = await import('./es.mjs');
// es_namespace = {
//   get default() {/ /... // } // } console.log(es_namespace.default); // { bar:'my-default' }
Copy the code

Reference links:

  • Nguyen Dada: es6.ruanyifeng.com/#docs/modul…
  • JS basic data types and the difference between the reference data type and depth of copy: www.cnblogs.com/c2016c/arti…