Commonjs 2, Module. exports and exports Exports = () => {} // exports = ’11’ // can be exports = () // commonJS/ES6 Module

commonjs

Specifications in NodeJS, environment variables:

  • module
  • exports
  • require
  • global

Each file is a module with its own scope. Variables, functions, and classes defined in a file are private and not visible to other files. Global is a global variable that can be shared across multiple files. Commonjs specifies that within each module, the module variable represents the current module, and that variable is an object. It has an exports property, which is an interface to the outside world. To load a module, you load the module’s module.exports property.

Commonjs module features:

  • All code runs in module scope and does not pollute global variables
  • Modules can be loaded multiple times, but only run once on the first load. The results of the run are then cached and loaded later, meaning that the results are read directly from the cache.

The Module object

Node provides a Module builder function inside. Inside each module is a Module object that represents the current module. It has the following properties:

  • Id Module identifier, usually the module file name with an absolute path
  • Path Specifies the file name of the module, the absolute path
  • The value of the exports module
  • Parent The module that calls the module
  • Children Other modules used by this module
  • Loaded Specifies whether the module has been loaded. (The parent module requires a child module before its loaded becomes true.)

module.exports

Exports interface. Other files that load this module read the module.exports variable

exports

For convenience, Node provides an exports variable for each module, pointing to module.exports. Is equivalent to

var exports = module.exports
Copy the code

Exports cannot be assigned a value directly, which breaks the link between exports and module.exports.

exports = () = > {}
Copy the code

You can only add attributes on exports. If the module outputs a value of a simple type. Module. Exports = ‘xx’

Load mode – synchronous/runtime load

First, commonJS loads modules synchronously. Load the entire module on input and generate an object. The method is then read from this object, and this load is called a runtime load. You can perform subsequent operations only after the submodule is loaded. Why is it synchronous? Because Nodejs is used for server-side programming, module files live on hard disk and are very fast to read.

Loading time

The input value is a copy of the output value. A parent module introduces a child module, which actually introduces a copy of the value that the child module outputs. Once this value is output, changes within the module do not affect the value.

AMD

Asynchronously load modules. To load resources in the browser environment, modules need to be loaded from the server and downloaded from the network, which takes a long time. So asynchronous modules are needed.

AMD implementer require.js

Amd-related API define, used to define modules, if we define a module that also depends on other modules, then we need to put it in the array, as the first parameter

define(['xx/lib.js'].(lib) = > {
  function foo(){
    lib.log('hello world! ');
  }
  return {
    foo
  };
})
Copy the code

CMD

All sea.js are asynchronously loaded. AMD advocates front-loading dependency, which means loading all modules in the previous array with CMD at the first time. AMD advocates nearby dependency, lazy loading

UMD

Is an idea compatible with CommonJS, AMD, CMD. Check whether the Nodejs module (exports exists) is supported. If so, use the Nodehs module. If not, determine whether AMD/CMD is supported (determine whether define exists). If neither fails, mount it on the Window global object

(function(t, e) {
  if (typeof module= = ='object' && module.exports) { / / Nodejs environment
    module.exports = e(require('react'))}else if (typeof define === 'function' && define.amd) { // Browser environment
    define('react', e)
  } else { // Other runtime environments, such as applets
    t.xx = e(t.React)  
  }
)(window.function () {})
Copy the code

ES6 Module

ES6 in the language standard level, the realization of the module function, and the realization of the very simple, the purpose is in the browser and server universal module solution. Its module function consists of two commands: export and import.

Features of ES6 module:

  • Import is a read-only attribute and cannot be assigned. The equivalent of const
  • Export /import promotion, import/export must be at the top of the module, not in scope, and import/export within the module will be promoted to the top of the module.

Load time of ES6 Module

Import is a static command. When the JS engine statically analyzes the script, it generates a read-only reference to the module loading command import. When the script is actually executed, the value is evaluated in the recorded module based on the read-only reference. Changes to references within a module are reflected externally.

When importing, you can specify that an output value is loaded instead of the entire module, which is called compile-time loading. Module code is introduced at compile time, not loaded at run time, so conditional loading is not possible. Because of this, static analysis is possible.

None of the above notes are original