CommonJS,AMD,CMD,ES6

CommonJS loads modules synchronously. On the server side, the module files are stored on local disk and are very fast to read, so this should not be a problem. However, on the browser side, it is more reasonable to use asynchronous loading for network reasons.

CMD is another JS modularization solution, which is similar to AMD, except that AMD advocates relying on front-loading and up-front execution, while CMD advocates relying on nearby and delayed execution. This specification was actually created during the promotion of Sea-js.

/** AMD define **/ define(["a"."b"."c"."d"."e"."f"].function(a, b, c, d, e, f) {// initialize all modules that need to be used first.if (false) {// Even if a module b is not used, b is still implemented ahead of time b.dosomething ()}});Copy the code
/** CMD **/ define(function(require, exports, module) {
    var a = require('./a'); // declare a.dosomething () if needed;if (false) {
        var b = require('./b'); b.doSomething(); }});Copy the code

ES6 modules are dynamic references :ES6 modules are not objects, and the import command is statically analyzed by the JavaScript engine. The module code is introduced at compile time, rather than loaded at runtime, so conditional loading cannot be implemented. Because of this, static analysis is possible.

Differences between ES6 modules and CommonJS modules

1. The CommonJS module outputs a copy of a value, while the ES6 module outputs a reference to a value

The CommonJS module outputs a copy of the value, meaning that once a value is output, changes within the module do not affect that value.

The operating mechanism of ES6 module is different from CommonJS. When the JS engine statically analyzes a script, it generates a read-only reference to the module load command import. When the script is actually executed, it will be evaluated in the loaded module based on the read-only reference. In other words, the IMPORT of ES6 is a bit like the “symbolic link” of Unix systems, where the original value changes and the import load value changes with it. Therefore, ES6 modules are referenced dynamically and do not cache values. Variables in modules are bound to the module in which they are located. 2. CommonJS module is run time loading, ES6 module is compile time output interface. 3. Runtime loading: CommonJS modules are objects; That is, the entire module is loaded on input, an object is generated, and methods are read from that object. This loading is called “runtime loading.” Compile-time loading: ES6 modules are not objects, but are output code explicitly specified through the export command and static commands when importing. That is, when you import, you can specify that an output value is loaded instead of the entire module, which is called “compile-time loading.” CommonJS loads an object (that is, the module.exports property) that is generated only after the script runs. An ES6 module is not an object, and its external interface is a static definition that is generated during the code static parsing phase.

preface

JS modular programming is the front-end partners essential knowledge, the following sister will be listed in a more clear way.

1 require

Features:

  • 1. Run time loading
  • 2. Copy the files to this page
  • 3. Introduce them all

1.1 CommonJS

Node.js uses the CommonJS idea. In CommonJS, there is a global method require() for loading modules.

1.1.1 usage
var math = require('math'); math.add(2, 3); Var math = require('math'); constMath = new math(2, 3) Math.add(); Copy the codeCopy the code
1.1.2 Module writing method

Modules are exports and module.exports.

exports.add = (x,y) => x+y; Module.exports = classmath{constructor(x,y) {this.x = x; this.y = y; } add() { return x+y; }}; Copy the codeCopy the code

1.2 AMD

Require.js and cujo.js are AMD thinking.

AMD stands for “Asynchronous Module Definition”. It loads modules asynchronously without affecting the execution of subsequent statements. All statements that depend on this module are defined in a callback function that will not run until the load is complete.

The second line math.add(2, 3) runs after the first line require(‘ math ‘), so must wait for math.js to finish loading. That is, if it takes a long time to load, the entire application will just sit there and wait. This is not a problem on the server because all modules are stored on the local hard disk and can be loaded synchronously, and the wait time is the hard disk read time. However, for browsers, this is a big problem because modules are on the server side and the wait time can be long depending on the speed of the network, leaving the browser in a state of “suspended animation”. Therefore, browser-side modules cannot be synchronous, they can only be asynchronous. This is the background from which the AMD specification was born.

1.2.1 usage
//require([module], callback); require(['math'], function (math) {   math.add(2, 3); }); Copy the codeCopy the code
1.2.1 Module writing method

define(id? , dependencies? , factory)

  • Id: string, module name (optional)
  • Dependencies: is the optional dependency module we load, using relative paths. , note the array format
  • Factory: Factory method that returns a module function

A module is independent of other module writing methods

// math.js define(function (){ var add = function (x,y){ return x+y; }; return { add: add }; }); Copy the codeCopy the code

Modules also depend on other modules

define(['a','b'], function(a,b){ functionfoo(){ a.doSomething(); B.dosomething (); } return { foo : foo }; }); Copy the codeCopy the code

When the require() function loads the module above, it loads the lib.js file first.

1.3 CMD

Sea.js uses the CMD idea. CMD is short for “Common Module Definition”. It’s similar to RequireJS, but seaJS relies on nearby, delayed execution, and Requirejs relies on front-loaded, front-loaded execution.

1.3.1 usage
Seajs. Config ({alias: {' jquery ':' http://modules.seajs.org/jquery/1.7.2/jquery.js'}}); seajs.use(['./hello', 'jquery'], function(hello, $) { $('#beautiful-sea').click(hello.sayHello); }); Copy the codeCopy the code
1.3.1 Module writing method
define(function(require, exports, module) { var $ = require('jquery'); exports.sayHello = function() { $('#hello').toggle('slow'); }; var b = require("b"); b.doSomething(); // rely on nearby, delay execution}); Copy the codeCopy the code

2 import

Features:

  • 1. Load at compile time
  • 2. Only refer to definitions
  • 3. Load as needed

By comparing the features of require, it is found that import is superior to require, and it is recommended to replace require with import

2.1.1 usage

There are two types of module imports for import: named import(name import) and default import(definition import), and import().

import defaultMember from"module-name"; import * as name from"module-name"; import { member } from"module-name"; import { member as alias } from"module-name"; import { member1 , member2 } from"module-name"; import { member1 , member2 as alias2 , [...]  } from"module-name"; import defaultMember, { member [ , [...] ] } from"module-name"; import defaultMember, * as name from"module-name"; import"module-name"; Copy the codeCopy the code
  • Name – The name of the exported value received from the module to be imported
  • Member, memberN- Imports multiple members with specified names from the export module
  • DefaultMember – Imports the default export member from the export module
  • Alias, aliasN- alias, renaming the specified import member
  • Module-name – Specifies the module to be imported. It’s a file name
  • As-renaming import member names (” identifiers “)
  • From – Imports from existing modules, script files, etc
import()

Import () returns a Promise object.

If (x === 2) {import MyModual from'./ MyModual '; } Duplicate codeCopy the code

The engine handles import statements at compile time and does not parse or execute if statements, so it makes no sense for import statements to be placed in an if block of code and therefore reports syntactic errors rather than run-time errors. There’s no way to dynamically load conditions like require. The proposal then introduces an import() function that analyzes the if statement at compile time for dynamic loading.

if(x === 2){ import('myModual').then((MyModual)=>{ new MyModual(); })} copy the codeCopy the code
2.2.1 Module writing method

There are two export modes: named export (name export) and default export (definition export). A named export can have multiple modules, while the default export mode has only one module.

Export {name1, name2,... , nameN }; Export {variable1 as name1, variable2 as name2,... , nameN }; Exportlet name1 name2,... , nameN; // Also varexportlet name1 =... , name2 =... ,... , nameN; // also var, constexportdefault expression; Exportdefaultfunction (...). {... } / / of the class, the function * exportdefaultfunctionname1 (...). {... } // also class, function*export {name1 asdefault... }; Export * from... ; Export {name1, name2,... , nameN} from... ; Export {import1 as name1, import2 as name2,... , nameN} from... ; Copy the codeCopy the code
  • Name1… NameN – Exported identifier. After the export, you can use this “identifier” to use the * import reference in another module
  • Default – Sets the default export for the module. Import is set to reference the default import without identifier
  • – Inherits the module and exports all methods and properties of the inherited module
  • As-rename export “identifier”
  • From – From existing modules, script files… export

The resources

  • Raoenhui. Making. IO/es6/2018/12…
  • Es6.ruanyifeng.com/#docs/modul…
  • www.cnblogs.com/liaojie970/…

Happy coding .. 🙂