Front-end modular understanding:

Front-end modular is a complex file into a separate module, such as JS files, divided into independent modules for reuse (reuse) and maintenance (version iteration), this will lead to the problem of interdependence between modules, all have commonJS specification, AMD, CMD specification, etc., And webpack, a tool for JS packaging (compilation processing)

CommonJS, AMD, CMD

A commonJS.

Node.js is a major practitioner of the commonJS specification. It has four important environment variables that support modular implementations: Module, exports, require, global. Module. exports defines the interface of the current module (not recommended), and requires loads the module.

Math.js var basicNum = 0; function add(a,b){ return a+b; } module.exports = {add:add, basicNum:basicNum} Math = require('./math') math.add(2,3) var HTTP = require(' HTTP ');Copy the code

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

2. AMD and require. Js

The AMD specification uses asynchronous loading of modules, which does not affect 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. Here is an introduction to implement the modularization of THE AMD specification with require.js: use require.config() to guide the path, define modules with define(), and load modules with require ().

3. CMD and sea. Js

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

4. ES6 Module

ES6 implements module functionalization at the level of language standards, and the implementation is very simple, aiming to be a common modular solution for browsers and servers. Its module functions are mainly composed of two commands: export and import. The export command is used to specify external interfaces of modules, and the import command is used to import and export functions provided by other modules.

Math.js var basicNum = 0; var add = function(a,b){ return a+b; Import {basicNum,add} from './math' function test(ele){el.textContent = add(99 + basicNum); }Copy the code

As shown in the example above, when using the import command, the user knows the name of the variable or function to load. ES6 also provides the export default command, which specifies the default output for the module. The corresponding import statement does not require curly braces. More AMD style of reference writing.

Export default{basicNum,add}; // import math from './math'; function test(ele){ ele.textContent = math.add(99 + math.basicNum); }Copy the code

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 when the code is running, so conditional loading cannot be implemented. Because of this, static analysis is possible.

5.ES6 module and CommonJS module differences

The 1.CommonJS module outputs a copy of a value, 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.
  • ES6 modules operate differently 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. The IMPORT of ES6 is a bit like the ‘symlink’ of Unix systems, where the original value changes and so does the loaded value of the import. Therefore, ES6 modules are referenced dynamically and do not return cached values. Variables in modules are bound to their modules.
2.CommonJS module is run time loading, ES6 module is compile time output interface
  • 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: The ES6 module is not an object, but displays code for the specified output through the export command, while import takes the form of static commands. 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’.

The module path imported by 3.CommonJS can be an expression because it uses the require() method; ES6 Modules can only be strings

4.comMonjs’ this refers to the current module, ES6 Modules’ this refers to undefined

Note: browser compatibility with ES6 Module is not very good. Export /import used in webpack will be packaged as exports/require

AMD and CMD differences

The biggest difference between AMD and CMD is that the execution time of the dependent module is different. Note that it is not the loading time or the way is different. Both are asynchronous loading modules.

  • AMD advocates dependency preloading, declaring the module it depends on when defining a module
  • CMD advocates relying on proximity, requiring only when a module is needed

7. To summarize

  • CommonJS is used on the server, AMD and CMD in the browser environment
  • AMD is the canonical output of RequireJS’s module definition in its promotion process
  • CMD is the normalized output of SeaJS module definitions during the roll-out process
  • AMD early execution (asynchronous loading: dependent execution first)+ delayed execution
  • CMD deferred execution (run until needed to load, execute sequentially)