Detailed explanation of the working principle and solution of Js modularization

1. Modular concept

Encapsulate a complex program into several blocks (files) according to certain rules (specifications) and combine them together; the internal data and implementation of the block are private, and only some interfaces (methods) are exposed to the outside to communicate with other external modules.

2. Modularization

Why use modular JavaScript?

Because in the actual development process, conflicts in the names of variables, functions, objects, etc. are often encountered, which can easily cause conflicts and pollute global variables;
At the same time, when the program is complex, a lot of code needs to be written, and many libraries need to be introduced, which can easily cause confusion in file dependencies if you are not careful;
In order to solve the above problems, we started to use modular js, so the role of modularization is:

• Avoid global variables from being polluted
• Easy to write and maintain code

3. Modularization Process

1. Ordinary writing (global functions and variables)

In fact, as long as different functions or variables are put together, it is a simple module. The disadvantage of this is obvious, that is, the variables are easily polluted;

var name = 'Kaka';
function cat1(){
    name = 'Year after year';
}
function cat2(){
    name = 'There is fish';
}

2. Object Encapsulation

Put the entire module in an object, and call the object's properties or methods directly when accessing it externally.

var cat = {
    name:'Kaka',
    cat1:function(){
        var name = 'Year after year';
        console.log(name);
    },
    cat2:function(){
        var name = 'There are fish';
        console.log(name);
    }
}
cat.name;// Kakacat.cat1();// Nian Niancat.cat2();// There is fish

Although this method solves the variable conflict problem, it is easy to be modified by external parties at will:

cat.name = 'Lou Lou';

3. Anonymous function method

var cat = (function () {
    // Local variable name of anonymous function
    var name = 'Kaka';
    // Local function cat1 of anonymous function
    var cat1 = function () {
        var name = 'Year after year';
        console.log(name);
    };
    // Local function cat2 of anonymous function
    var cat2 = function () {
        var name = 'There are fish';
        console.log(name);
    };
    //Expose an external port through window. If you want to be accessed by the outside world, you can put it here window.myModule = {
        cat1:cat1,
        cat2:cat2,
        name:name,
    };
})();
console.log(myModule.name);// The name variable is placed in the exposure port and can be output. The result is: KakamyModule.cat1();// The cat1 function is placed in the exposure port and can be output. The result is: Nian NianmyModule.cat2();// The cat2 function is placed in the exposure port and can be output. The result is: There are fish

If the variable name is removed, it cannot be accessed at this time and the result is undefined. This solves the problem of variables not being modified arbitrarily, that is:

window.myModule = {
    cat1:cat1,
    cat2:cat2,
};
console.log(myModule.name); // undefined

The anonymous function method basically solves the problem of function pollution and arbitrary modification of variables, which is also the cornerstone of modular specifications!

4. Modular Solution

Based on the way anonymous functions call themselves and to enhance code dependencies, most JavaScript runtime environments now have their own modular specifications.

It can be divided into four categories: Commonjs, AMD, CMD, and ES6 module

1. CommonJS

①Use in node environment, not support browser environment②NodeJS follows the specification③Use require() to introduce dependencies④Use exports to expose modules

2. AMD

①Asynchronous loading of modules in the browser environment ②Specifications followed by RequireJS ③Depends on require.js module management tool library ④AMD advocates dependency pre-position

3. CMD

①In the browser environment, it supports both asynchronous and synchronous loading ②SeaJS follows the specifications ③CMD advocates relying on the nearest

4. ES6 modules

ES6 modular syntax can determine the dependencies of modules at compile time, and can also determine the variable declarations of input and output. It is no longer just a module specification, but is now used as the standard syntax of the JS language, with the following features:

① Both browser and server environments support it ② The module dependencies and variables can be determined at compile time, and other module specifications are determined at runtime ③ The export command is used to specify the module's external interface ④ The import command is used to input functions provided by other modules

One more thing to add here: The modularization solution of the ES5 version only realizes modularization at the language level. The disadvantage is that it cannot be directly run in most JavaScript operating environments. It must be converted into standard ES5 through a build tool before it can run normally. Here we need to use the automated build tool webpack.

The above is a detailed explanation of the working principles and solutions of Js modularization. For more information about Js modularization, please pay attention to other related articles on 123WORDPRESS.COM!