Modular distal JS Specification

• Often used when importing the module in the development requireand import;
• When using the derivation module module.exports/exports, or export/export default;
• Sometimes in order to reference a module will use the requirestrange thing is that you can use import? ? ? ? What is the difference between them?

1, CommonJS specification (synchronous loading module)

• The method allows the module to require by synchronizing loading of other modules to be dependent, and to derive the required interfaces exposed or exports module.exports.
• Use:

// 导入
require("module");
require("../app.js"); // 导出 exports.getStoreInfo = function() {}; module.exports = someValue;

• • advantage:

    1. Simple and easy to use
    2. Server module facilitates multiplexing

  • Disadvantages:

    1. Synchronous loading is not suitable for use in a browser environment, synchronous means that the blocking load, the browser is loaded asynchronously resources
    2. A plurality of parallel non-blocking can not be loaded modules

  • ? Why not use the browser to load synchronization, the server can?

    • Because modules on the server side, it is for the server module is loaded
    • As for the browser, because the modules are on the server side, the load time speed also depends on factors such as speed, if necessary wait a long time, the entire application will be blocked.
    • Therefore, the browser module, not a "synchronous load" (CommonJs), only a "loaded asynchronously" (AMD).
• Referring CommonJs modular system of modules represent node.js

---

AMD (Asynchronous load module)

• Asynchronously load module, the module does not affect the running back load statement. All dependent modules statements are defined in a callback function, wait until after the completion of loading, the callback function was executed.
• Example:

// 定义
define("module", ["dep1", "dep2"], function(d1, d2) {...}); // 加载模块 require(["module", "../app"], function(module, app) {...}); 

• Load Module require([module], callback);The first parameter [module], is an array, which is a member of the module to be loaded; the second parameter is a callback function callback after loading.

• advantage:

  1. For asynchronous loading in a browser environment module
  2. Loading a plurality of parallel modules

• Disadvantages:

  1. Increase development costs, read and write the code more difficult, semantic module defines the way is not smooth
  2. The modular way of thinking does not conform to the universal, it is a compromise to achieve
• AMD representatives achieve specificationrequire.js

RequireJS is the attitude of pre-execution module. Since AMD RequireJS specification is performed, so that all modules are executed first dependent; i.e., the advance RequireJS dependent execution module, which is equivalent to require advance

• RequireJS execution process:

1. require function module dependency checks, according to the configuration file, to obtain the actual path of the file js
2. Js file according to the actual path to insert script node in the dom, and binds onload event to get notified of the completion of the module is loaded.
3. After all depend script is loaded, the callback function

---

CMD specification (asynchronous load module)

• CMD norms and AMD is very similar, simple, and with CommonJS and Node.js Modules specification of keeping a lot of compatibility; in CMD specification, a module is a file.
• DEFINE function using a global definition module, which receives the factory parameter, a factory may be a function may be an object or character string;

• factory is a function, there are three parameters, function (require, exports, module):

  1. require a method, as the only parameter identification accepting module for obtaining an interface provided by other modules: require (id)
  2. exports is an object to provide an interface module outwardly
  3. module is an object stored thereon the properties and methods associated with the current module
• Example:

define(function(require, exports, module) { var a = require('./a'); a.doSomething(); // 依赖就近书写，什么时候用到什么时候引入 var b = require('./b'); b.doSomething(); });

• advantage:

1. Reliance nearby, delayed execution
2. You can easily run in Node.js

• Disadvantages:

1. SPM dependent packaging, loading logic module emphasis

• Implementation represents library sea.js: SeaJS is lazy attitude towards the implementation of the module, SeaJS module only when the module is executed in real need (dependence)

---

The difference between AMD and the CMD

1. For dependent modules, AMD is executed in advance, CMD is deferred execution. Since 2.0 RequireJS However, the delay may be performed also changed (depending wording handled differently). CMD respected as lazy as possible.
2. AMD respected rely Front; CMD respected rely nearby, only when used in a module again require.

// AMD
define(['./a', './b'], function(a, b) { // 依赖必须一开始就写好 a.doSomething() // 此处略去 100 行 b.doSomething() ... }); // CMD define(function(require, exports, module) { var a = require('./a') a.doSomething() // 此处略去 100 行 var b = require('./b') // 依赖可以就近书写 b.doSomething() // ... });

---

UMD

• UMD is a blend of AMD and CommonJS
• AMD to develop the first principle of the browser asynchronous loading module.
• CommonJS module to the first principle of the development server, select Sync loaded, its modules without having to packaging.
• UMD first judgment module (Exports) support Node.js whether there exists Node.js module using mode; determining whether to support AMD (DEFINE if present), the present embodiment the load module with AMD.

(function (window, factory) {
    if (typeof exports === 'object') {
    
        module.exports = factory();
    } else if (typeof define === 'function' && define.amd) { define(factory); } else { window.eventUtil = factory(); } })(this, function () { //module ... });

---

Modular ES6

• ES6 on the level of language standards, to achieve the function modules, and achieve quite simple, and can replace CommonJS AMD specification, become generic browser and server module solutions.

• Module dependencies can be determined, as well as input and output variables (CommonJS and AMD modules, these things can only be determined at run time) when the static as possible, so that the compiler: ES6 module design.

  • Use:

// 导入
import "/app";
import React from “react”; import { Component } from “react”; // 导出 export function multiply() {...}; export var year = 2018; export default ... ...

• advantage:

1. Easy static analysis
2. EcmaScript standard for the future

• Disadvantages:

1. Native browser has not yet achieved the standard
2. The new command word, the new version of Node.js is supported.

---

Back to "distinguish require the import of" problem

• CommonJs specifications require use, import module used in the specification Es6; therefore the difference between the two is substantial difference between the two specifications;
• CommonJS：

1. For basic data types, it is copied. That module will be cached; Meanwhile, the re-assignment module output variable in a different module.
2. For complex data types, it is shallow copy. Since the object of two modules referenced point to the same memory space, thus affecting another module when making changes to the value of the module.
3. When loading a module require command, it will run the code for the entire module.
4. When a module is loaded with the require command, the module will not be executed, but rather, to a value in the cache. In other words, CommonJS load module regardless of how many times, will only run once when you first load, load later, it returns the results of the first run, unless you manually clear the system cache.
5. When cyclic loading, execution belonging to load. That script code when require, it will perform all. Once a module is "cyclic loading", has been performed on only a subset of, the execution is not yet part of the output.

• ES6 module

1. Dynamic read-only reference value belongs] [ES6 module.
2. For read-only it, i.e. not allowed to modify the value of variable is introduced, the Import variable is read, whether the basic data types or complex data type. When the import command module encounters, it will generate a read-only reference. Wait until the script actually executed, and then based on this read-only reference to the module is loaded inside to value.
3. For dynamic, the original value changes, the value of import load will also change. Whether basic data types or complex data types.
4. When the loading cycle, ES6 are dynamically referenced module. As long as there is a reference between two modules of code to execute.

• Finally: require / exports is essential universal and necessary; because the fact, you write import / export are ultimately compiled to require / exports performed.