From the NodeJS tutorial at Coderwhy

common.js

  • An import or export is a reference to a value. If the export is a value of a primitive data type, the export file changes the value and the import file does not change the value of the variable.

  • It is imported via the require function, and module dependencies are not known until the JS code is executed.

  • The code is executed synchronously.

  • Modules are introduced multiple times and only loaded once. A loaded module exists inside each module to determine whether it has been loaded

  • When code loops are introduced, depth-first loads modules. Then breadth first.

Here is an example of the execution order: main, AAA, CCC, DDD,eee, BBB (this BBB load is loaded through the main module.)

The following example is intended to illustrate the basic data types of common.js exports, imports, and changes to files that do not affect each other. But for reference data types, they influence each other.

    // foo.js
    let age = 'ppp';
    const obj = {
      name: 'llm'
    }

    setTimeout(() = > {
      age = 10000;
    }, 1000)


    setTimeout(() = > {
      console.log("Export file obj.name", obj.name)//zh
    }, 2000)

    exports.age = age;
    exports.obj = obj;
Copy the code
    // bar.js
    const bar = require("./foo.js")
    
    setTimeout(() = > {
      console.log("Age of imported file", bar.age)// PPP will not output 10000
    }, 2000)


    setTimeout(() = > {
      bar.obj.name = "zh"
    }, 1000)
Copy the code

es6 Module

  • It imports and exports by keyword. (the import and export)

  • Asynchronous loading is equivalent to adding async property.

  • Module dependencies are known when the JS code is compiled.

  • Variables in import and export files are bound in real time.

Note: The following example needs to be started on the server side. Otherwise, an error will be reported.

This example shows that the exported basic data type can be changed in the export file and is bound to the import file in real time, but the import file cannot change the basic data type.

    // foo.js
    let name = "zh";
    const obj = {
      name: 'llm'
    }

    setTimeout(() = > {
      console.log("Exported obj.name", obj.name) // pppp
    }, 2000)

    setTimeout(() = > {
      name = 'qqqq'
    })

    export {
      name,
      obj
    }
Copy the code
//bar.js
    import * as bar from './foo.js'

    console.log("The bar")
    console.log(bar.name)
    // setTimeout(() => {
    // bar.name = "PPPP" // there is no way to modify imported variables of normal type. Because inside JS, it redeclares the variable itself via const, doing real-time binding.
    // }, 1000)


    setTimeout(() = > {
      bar.obj.name = "pppp" // It is possible to modify imported variables of normal type.
    }, 1000)



    setTimeout(() = > {
      console.log("Changed value of exported file", bar.name)// qqqq
    }, 2000)

    console.log("name=====", bar.name)
    console.log("obj.name======", bar.obj.name)
Copy the code
<script src="./bar.js" type="module"></script>
Copy the code