What is js modularization? Introduction to js modularization

What is js modularization? JS modularity is not a concept that existed from the beginning, but the requirements for engineering are getting higher and higher, and the need for JS module development has emerged. Therefore, there is about js module development. Let's take a look at some examples of JavaScript modularization.

Modular development history

JS did not have the concept of modularity at the beginning. Until ajax was proposed, the front end could request data from the back end. The front end logic became more and more complex, and many problems appeared. Problem: Global variables, function name conflicts, dependencies are difficult to handle.
At that time, sub-execution functions were used to solve these problems. For example, the classic jquery used anonymous self-executing functions to encapsulate the code and mounted them all under the global variable jquery.

CommonJs

CommonJs is developed through nodeJs. Each js file is a module, and each module has a separate scope. The module uses module.exports as the export and outputs an object. Use the require method to read the file and return its internal module.exports object.

The problem with CommonJs is that its loading is synchronous, which is normal on the server side, but does not apply in a browser full of asynchronous. The community was divided over adapting to the browser.

AMD

AMD is Asynchronous Module Definition. The Chinese name means asynchronous module definition. It is a specification for modular development on the browser side. Since it is not natively supported by JavaScript, the author of AMD personally implemented RequireJS that complies with the AMD specification.
The AMD specification stipulates that the global function define is used to define the module. The usage is define(id, dependencies, factory); where id is the module identifier, dependencies is an array, and inside the array are other modules that the module depends on, and factory is An anonymous function, which contains the logic of the module.
The company currently uses AMD specifications.
For example:

//main.jsrequire(['a', 'b'], function(a, b){
     console.log('main.js执行');
     a.hello();
     $('#b').click(function(){
          b.hello();
     });
})

The problem with requireJs is that when added to a module, all dependent modules of the module will be preloaded, but these dependencies are likely not to be used at the beginning. It is also very troublesome to write a long list of dependencies at the same time. What's better is that AMD retains the three functions of require, exprots, and module in commonJs. You don't need to write them all in dependencies, but use require to introduce them when needed.

CMD

Since requirejs has all the above-mentioned inelegant aspects, there must be new things to improve it. This is the rising star seajs. The author of seajs is a domestic Taobao front-end trailblazer. Uncle Yu. seajs fully embraces the Modules/Wrappings specification and does not use the callback method to write modules like requirejs. And it does not completely follow the Modules/Wrappings specification. seajs does not use declare to define modules, but uses the same define as requirejs. Maybe the author prefers this name. (However, this will more or less cause confusion in people’s understanding). The way to define a module using seajs is as follows:

//main.jsdefine(function(require, exports, module){
     console.log('main.js执行');     var a = require('a');
     a.hello();    
     $('#b').click(function(){
          var b = require('b');
          b.hello();
     });

});

When defining a module, there is no need to list the dependency array, and formal parameters need to be passed in the factory function. require, exports, module, and then it will call the toString method of the factory function, perform regular matching on the content of the function, and analyze the dependencies through the matched require statement, thus truly realizing commonjs style code.

The difference between AMD and CMD

The most obvious difference between AMD and CMD is the different handling of dependencies when defining modules
AMD advocates pre-dependency, which is required when defining modules Declare the modules it depends on
CMD recommends nearby dependencies, and only require when a certain module is used
This difference has its own advantages and disadvantages, it is just a syntactic gap, and both requireJS and SeaJS support each other. Writing method

Future-oriented ES6 module standard

ES6 considers modularity and uses import and export, but currently browsers do not support it, and this standard is only a prototype.

Related recommendations:

Encapsulate a method in js - modularization

First contact with JS require.js Modular tools

The above is the detailed content of What is js modularization? Introduction to js modularization. For more information, please follow other related articles on the PHP Chinese website!