Learn about JavaScript's modular development _javascript skills

Small A is a pioneering team of front-end engineers, responsible for writing the project's JavaScript program.

Global variable Conflict

According to his own experience, little a first pulls out some commonly used functions and writes functions into a common file base.js:

Copy Code code as follows:

var _ = {
$: function (ID) {return document.getElementById (ID);},
Getcookie:function (key) {...},
Setcookie:function (key, value) {...}
};

Small a puts these functions in the _ object to prevent excessive global variables from causing conflicts. He told the other members of the team that if anyone wanted to use these functions, they could just introduce base.js.

Small C is a colleague of small a, he reflected to small a: his own page introduced a class library called Underscore.js, and, this class library will occupy _ This global variable, this will be with the _ Base.js in conflict. Small a thought, Underscore.js is a third party class library, estimate is not good to change, but Base.js has been in many pages spread, it is impossible to change. The last little a had to underscore.js the global variable occupied by the other.

At this point, small a found that the function is placed in a namespace, can reduce the probability of global variable conflict, but did not solve the problem of global variable conflict.

Depend on

With the development of the business, small A has also written a series of library and UI components, such as the label switching component Tabs.js, this component needs to call Base.js and Util.js functions.

One day, the new colleague Little D and small a reflect that they have been quoted in the page tabs.js, the function is not normal. Small a saw the problem, the original small d do not know tabs.js rely on base.js and util.js, he did not add these two file references. So he immediately made the change:

Copy Code code as follows:

<script src= "Tabs.js" ></script>
<script src= "Base.js" ></script>
<script src= "Util.js" ></script>

However, the function is still not normal, at this time small a lesson small D said: "All say is relies on, that the dependent party must put on the relying party before AH". The original small d put Base.js and util.js after tabs.js.

Small a thought, he is the author, naturally know the dependency of components, but others are hard to say, especially new.

After a while, the small a to the label switching component added functionality, in order to achieve this function, Tabs.js also need to call the Ui.js function. At this point, little a found a serious problem and he needed to add ui.js references to all pages that called Tabs.js!!!

After a while, little a optimizes the tabs.js, and this component is no longer dependent on util.js, so he removes util.js references in all pages used to tabs.js to improve performance. He this change, a big deal, test group mm told him, some pages are not normal. Small a look, suddenly dawned, some of the other features of the page used in the Util.js function, he took the file's reference to remove the cause of the error. In order to ensure that the function is normal, he restores the code again.

Small A and think, there is no way to modify the dependencies at the same time do not modify the page, also does not affect other functions?

of modular

Small a browsing the internet, inadvertently found a novel modular coding, you can put it all the problems encountered before the solution.

In modular programming, each file is a module. Each module is created by a function named define. For example, when you transform a base.js into a module, the code becomes like this:

Copy Code code as follows:

Define (function (Require, exports, module) {
exports.$ = function (ID) {return document.getElementById (ID);
Exports.getcookie = function (key) {...};
Exports.setcookie = function (key, value) {...};
});

The Base.js interface is added to the exports object. And exports is a local variable, the entire module's code does not occupy half of the global variable.

So how do you invoke the interface provided by a module? Take tabs.js, for example, to rely on Base.js and util.js:

Copy Code code as follows:

Define (function (Require, exports, module) {
var _ = require (' base.js '), Util = require (' util.js ');
var div_tabs = _.$ (' tabs ');
// .... Other code
});

A module can obtain the interface of other modules through local function require. At this point, the variables _ and util are local variables, and the variable names are completely controlled by the developer, and if you don't like _, you can also use base:

Copy Code code 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 the util.js and add ui.js, just modify the tabs.js:

Copy Code code as follows:

Define (function (Require, exports, module) {
var base = require (' Base.js '), UI = require (' ui.js ');
var div_tabs = base.$ (' tabs ');
// .... Other code
});

Loading Device

Because of the lack of native support for browsers, if we want to encode in a modular way, we have to resort to something called a loader (loader).

There are many implementations of the loader at present, such as Require.js, Seajs. The Jraiser class Library also has its own loader.