These specifications are all intended for modular development of JavaScript,

AMD (Asynchronous Module Definition) [require.js]

Features: asynchronous loading dependent modules, and will be loaded in advance, for the dependent module in advance (dependency front).

define(id? , depencies? , factory) define('add'['utils'].function(utils){
    return utils.add(1.2)})Copy the code

CMD (Common Module Definition) [sea-.js]

Features: asynchronous loading of dependent modules, for the dependent module loading nearby (dependency post)

define('add'.function(require.exports.module){
    exports.run = function(){
        return 2
    }
})
define('minus'.function(require.exports.module){
    exports.run = function(){ return 3}
})

define('main'.function(require.exports.module){
    const add = require('add')
    a.run()
    const minus = require('minus')
    minus.run()
})

seaJs.use('main')
Copy the code

CommonJs

Features: Runtime load, synchronous load modules, suitable for server, Node.js follows this specification

  • 1. References to primitive data types are value references, and variables output by that module can be reassigned in another module
  • 2. For complex data types, references are address references. Because the objects referenced by two modules point to the same memory space, modification will affect the other module
  • 3. The entire module code is run when the module is loaded using the require command
  • 4. When the same module is loaded with the require command, the module is not executed. Instead, the value is extracted from the cache. That is, no matter how many times CommonJs is loaded, it will only run once on the first time it is loaded and will return the result of the first time it is loaded, unless the system cache is actively cleared.
  • 5. When cyclic loading, it is load-time execution, that is, when the script code is required, it will all be executed. Once a module is cyclic loaded, only the executed part will be output, and the part that has not been executed will not be output
// b.js
exports.done = false
let a = require('./a.js')
console.log('b.js:1', a.done)
exports.done = true
console.log('b.js:2'.'end')
// a.js
exports.done = false
let b = require('./b.js')
console.log('a.js:1',b.done)
exports.done = true
console.log('a.js:2'.'end')
// c.js
let a = require('a.js')
let b = require('b.js')
console.log('c.js:1'.'执行完毕', a.done, b.done)
node c.js
// b.js: 1 false
// b.js: 2 No further action is required
// a.js: 1 true
// a.js: 2 No further action is required
// c.js: 1 The command is executed. True True
//----------------------------------------------------encounterrequire('a.js'), to execute a.JS. A. js is only executedexports.done = falseRequrie ('b.js'), to perform B.JS. When performing a b.j sexports.done = false, and then encounteredrequire('a.js'If it encounters a duplicate reference, it will fetch the time of the previous runexports.done = false.Copy the code

  • To implement SAN Antonio s,

    • Require (‘a.js’);
    • a.js
      • Define exports.done = false
      • Let b = require(‘b.js’); let b = require(‘b.js’)
        • b.js
          • Define exports.done = false
          • Let a = require(‘a.js’)// exports. Done = false
          • Print the console. The log (‘ b.j s: 1, a. d. one)
          • exports.done = true
          • Print the console. The log (‘ b.j s: 2 ‘, ‘end’)
    • Proceed with a.js
      • console.log(‘a.js:1’, b.done)
      • exports.done = true
      • console.log(‘a.js:2; ‘end’)

  • Proceed with c.JS

    • Let b = require(‘b ‘) exports. Done = true

ESModule

## ESModule * 1, ES6 module values are [dynamic read-only reference] * 2, for read-only, that is, do not allow to change the value of imported variables, import variables are read-only, whether basic or complex data types. When a module encounters an import command, it generates a read-only reference. When the script is actually executed, it will be evaluated in the loaded module based on the read-only reference. * 3. For dynamics, the original value changes and the import loaded value changes. Both basic and complex data types. * 4. Es6 modules are referenced dynamically during cyclic loading. Javascript export const obj = {} export const add = (a, b) => a+b import {obj, add} from '... 'Copy the code