JS Modular/JS Module Loader/JS Module Packager

Before these several concepts have been very vague, can not be expressed in their own language, today read the great God of the article, try to summarize according to their own understanding, is a book review.

The Great God article: http://www.css88.com/archives/7628
(Great God's article is written in very detailed, suggest to read the Great God's article first)

One. JS Modular

What is JS modularity, we start from the history.

1. How do we write a script at the beginning? is to write the code in the HTML file with <script></script>

The disadvantage of this approach is that code multiplexing relies on replication, which is basically a global variable.

2. Later we use JS file to write code, with the <script></script> SRC introduced html,html/css/js separation

Disadvantages of this approach:

Although the code is reusable, but <script></script> more and more, an HTML file loaded a lot of JS (too many HTTP requests, affecting performance),

There are also many global variables, and dependencies are becoming more and more replicated, for example, B depends on a, the a file must be loaded before the B file

(The problem with this approach is that there are too many global variables and complex dependencies)

3. To solve the problem of global objects, we evolved to the third phase, with module objects and Iife (execute functions immediately)

Disadvantages of this approach:

Although the exposed global variables are less, only this one module object, can be said to solve the problem of pollution global variables, but the dependency is not resolved, because Iife relies on this module object for each file operation, that is, import and export rely on this module object.

(This time has been implemented JS Modular, each file is wrapped in anonymous functions, so that each file is a module, module and module calls through the Global module object, this time the problem is that the global variable is less, but the dependency module is not solved, all the JS files rely on the Global module object, This means that the global module object to be introduced before the other JS files, so that our next solution is to solve the dependency relationship)

Two. JS Module loader

The new modular approach proposes that the problem of global variables and dependencies is resolved, but the performance aspect can also be optimized.

The COMMONJS specification puts forward a new scheme to solve the problems of the global variable pollution and the complexity of the dependency relationship. (at first it runs on the server side.) Let us first understand what is COMMONJS.

COMMONJS is a specification, not a library, he proposed a modular scheme, defined a modular API, let us write the modular JS easier, no longer need to rely on iife.

Usage: In a JS file, export the variable with export, import it with require

A.jsvar A=1;module.exports=a;//b.jsvar A=require (/a.js);

This approach works well on the server side

But there is a problem, this way is synchronous operation, commonly known as cmd (Synchronization module definition), (of course, the server to read files particularly fast, no problem, not like the browser to send a request to get), that is, when b.js in require (a.js), this time JS code will not go down to execute, He had to wait until the a.js loaded, and if the A.js file was particularly large, the page would be stuck, why? (Because Commonjs is running synchronously, and JS is single-threaded, will block the rendering of JS file), so the browser can not use this scheme, so COMMONJS proposed AMD (asynchronous module definition), is to get the file is asynchronous, the specification proposed, but how to implement in the browser? The great gods of the industry made wheels, and many of them were require.js and sea.js.

Requirejs and Seajs are module loaders

Using the module loader, we only have a portal file, and then according to the dependency to load the corresponding JS file, the dependency on the entry file to write, (only a portal file, but to resolve the dependency of the time will load the corresponding dependent module, loaded JS file more than one)

The difference between the two:

1. Both are asynchronous loading JS, but a notation to follow the AMD, a syntax to follow the CMD, in fact, is to let the browser support modular notation library.

2.requirejs is whether the module needs to load the full part of the dependent files, Seajs is a module needs to be used to load, so that the AMD experience is good, because the dependent modules are all loaded at the beginning, cmd performance is good, because the need to load the corresponding module

In this way we can implement modular development in the browser side, solve the problem of global variables, but also solve the problem of dependency, but also brought a new problem, the page depends on the number of files (browser parsing will load the corresponding dependent module, a module is a file), the number of HTTP requests initiated, This is followed by the impact of the load performance (HTTP1, the number of concurrent HTTP requests is limited). This time the module Packer came into being.

Three. Module Packager

On the basis of the modular loader processing, in order to reduce the parsing load of the dependent module added HTTP requests, we can package the import file, in the process of packaging, let it load the corresponding dependent module, the resulting file is the file containing the dependent module, so that can reduce the HTTP request, Such a packaging operation we give to build tools or packaging tools to implement, such as Webpack/browserify/rollup, so that we can only focus on how to write a modular, maintainable, high aggregation, low-coupling code

With the advent of Es6, JS native also appeared the module development definition, also has the corresponding specification, exports with export, imports with import, so that we can not use the Requirejs and SEAJS can be modular development, but the current browser compatibility is limited, But we can use webpack to achieve compatibility, webpack not only can help us to make the dependent files into a package, but also can help us to play a compatible package (with some loader).

Welcome to Exchange ~

JS Modular/JS Module Loader/JS Module Packager