Disadvantages of older js loading (scripts)

Developers must solve the dependency between modules and the code base subjectively. 3. Files can only be loaded according to the writing order of script tags

Modular definition:

Modularization refers to the systematic decomposition of a complex problem or a series of mixed problems in accordance with a categorical thinking. Modularity is a way of dealing with the decomposition of complex systems into manageable modules with a more rational code structure and higher maintainability. Can imagine a huge system code, by integration and optimization divided into logical modules, is a kind of significance for the existence of software. For the software industry: decoupling the complexity of software systems makes it possible to manage, develop, and maintain systems no matter how large they are.

Modular system capabilities:

  1. Define encapsulated modules.
  2. Define the dependencies of the new module on other modules.
  3. Support can be introduced for other modules.

Commonjs

CommonJS loads modules synchronously, so you can’t perform any operations until the load is complete. For example, Node.js is mainly used for server programming, and the loaded module files are generally stored in the local hard disk, so the loading is relatively fast, without considering the asynchronous loading mode, so the CommonJS specification is more suitable. However, in a browser environment, to load modules from the server, this must be done in asynchronous mode. Hence the AMD CMD solution.

Example

Exp. Js function exp () {this.foo = function () {// do someing… } this.bar = function () {//do someing… }}

var foobar = new exp(); exports.exp = exp;

Var test = require(‘./exp’).exp; test.bar();

AMD

Asynchronous module definition

define(id? , dependencies? , factory); The first parameter ID is a string that represents the module id and is optional. If not, the module id should be defined by default as the id of the requested script in the loader. If present, the module id must be top-level or an absolute id. The second parameter, dependencies, is an array literal that identifies the modules that the current module depends on. The third argument, factory, is a function or object that needs to be instantiated.

[module] : require([module], callback) [module] : is an array in which the members of the module to be loaded; Callback: is a callback function after the module has finished loading.

RequireJS

A function loads in all required or dependent module implementations and returns a new function (module) inside which all of our business code for the new module operates, with unlimited use of modules already loaded in.

Cmd

For dependent modules AMD is executed early, CMD is executed late. However, RequireJS, since 2.0, has also been changed to be able to delay execution (depending on the writing method, the processing method is not passed). CMD advocates dependency nearby, while AMD advocates dependency front-loading

umd

CommonJS server AMD browser

UMD determines whether any module (exports) that supports Node.js exists and uses node.js module mode if it does. Function (window, factory) {if (typeof exports === ‘object’) {

    module.exports = factory();
} else if (typeof define === 'function' && define.amd) {
 
    define(factory);
} else {
 
    window.eventUtil = factory();
}
Copy the code

})(this, function () { //module … });

Reference:

Amd specification: github.com/amdjs/amdjs… Cmd specification: github.com/seajs/seajs…

es6 module

1.Module executes only once 2. Default is cookie without credentials 3. Statically executed, no expressions or variables can be used. An import statement is added to an if statement, which returns a Promise object

Conclusion:

Module management, not you say good, change the person does not scold you, that is really good ~ Es6 used to it will feel very easy to use ~ Ps: I have not used to ~