Understand the modular development of Javascript and the modularization of javascript

Understand the modular development of Javascript and the modularization of javascript

Mr. A is A front-end engineer of A startup team responsible for compiling the project's Javascript program.

Global variable conflict

Based on your experience, Mr. A first extracts some common functions and writes them into A public file base. js:
Copy codeThe Code is as follows:
Var _ = {
$: Function (id) {return document. getElementById (id );},
GetCookie: function (key ){...},
SetCookie: function (key, value ){...}
};

Small A places all these functions in the _ OBJECT To prevent conflicts caused by excessive global variables. He told other members of the team that if anyone wants to use these functions, they only need to introduce base. js.

Mr. C is A colleague of Mr. A. He told Mr. A that he introduced an underscore to his page. js class library, and this class library will also occupy the global variable _, so that it will follow the base. _ conflict in js. Mr. A thought that underscore. js is A third-party class library and cannot be modified. However, base. js is already deployed on many pages and cannot be modified. At last, John had to reluctantly change the global variables occupied by underscore. js.

At this point, John finds that placing all functions in A namespace can reduce the probability of global variable conflicts, but it does not solve the problem of global variable conflicts.

Dependency

With the development of the business, Mr. A has compiled A series of function libraries and UI components. For example, the tag switching component tabs. js needs to call the functions in base. js and util. js.

One day, new colleagues, Mr. D and Mr. A, reported that they have referenced tabs. js on the page, but the function is not normal. A found the problem at A Glance. Originally, D did not know that tabs. js relied on base. js and util. js. He did not add references to these two files. So he immediately made the changes:
Copy codeThe Code is as follows:
<Script src = "tabs. js"> </script>
<Script src = "base. js"> </script>
<Script src = "util. js"> </script>

However, the function is still abnormal. At this time, Xiao A learned that Xiao D said: "All are dependent, so the dependent party must be placed before the dependent party ". Originally, D put base. js and util. js after tabs. js.

Mr. A thought that he is the author and naturally knows the dependencies of components, but it is hard for others to say, especially new people.

After A while, Mr. A added A function to the tag switching component. To implement this function, tabs. js also needs to call functions in ui. js. At this time, John finds A serious problem. He needs to add reference to ui. js on all pages that call tabs. js !!!

After A while, John optimized tabs. js. This component is no longer dependent on util. js, so he used tabs in all. remove util. js references to improve performance. He made this change, and the test group MM told him that some pages were abnormal. At A glance, I suddenly realized that some other functions on some pages used functions in util. js. He removed the reference of this file, causing an error. To ensure normal functionality, he restored the code.

Mr. A also thought, is there A way to modify the dependencies without having to modify pages one by one or affecting other functions?

Modular

When Mr. A visited the Internet, he accidentally discovered A novel modular encoding method that could solve all the problems he encountered before.

In Modular programming, each file is a module. Each module is created by a function named define. For example, after converting base. js into a module, the code will become like this:
Copy codeThe Code is as follows:
Define (function (require, exports, module ){
Exports. $ = function (id) {return document. getElementById (id );};
Exports. getCookie = function (key ){...};
Exports. setCookie = function (key, value ){...};
});

Base. js interfaces provided externally are added to the exports object. Exports is a local variable, and the code of the entire module does not occupy half of the global variables.

So how do I call the interfaces provided by a module? Take tabs. js as an example. It depends on base. js and util. js:
Copy codeThe Code is as follows:
Define (function (require, exports, module ){
Var _ = require ('base. js'), util = require ('util. js ');
Var div_tabs = _. $ ('tabs ');
// Other code...
});

One module can obtain interfaces of other modules through the local function require. In this case, both variables _ and util are local variables, and the variable names are completely controlled by developers. If you do not like _, you can also use base:
Copy codeThe Code is as follows:
Define (function (require, exports, module ){
Var base = require ('base. js'), util = require ('util. js ');
Var div_tabs = base. $ ('tabs ');
// Other code...
});

Once you want to remove util. js and add ui. js, you only need to modify tabs. js:
Copy codeThe Code is as follows:
Define (function (require, exports, module ){
Var base = require ('base. js'), ui = require ('ui. js ');
Var div_tabs = base. $ ('tabs ');
// Other code...
});

Loader

Due to the lack of native support for browsers, if we want to use modular encoding, we must use something called loader.

Currently, many loaders are implemented, such as require. js and seajs. The JRaiser Class Library also has its own loader.