JavaScript modular Programming (i): the Writing of modules

As Web sites become "Internet apps," JavaScript code embedded in Web pages is growing larger and more complex.

Web pages are more and more like desktop programs, need a team division of work, progress management, unit testing and so on ... Developers have to use the software engineering approach to manage the business logic of Web pages.

JavaScript modular programming has become an urgent requirement. Ideally, developers only need to implement the core business logic, and others can load the modules that others have already written.

However, JavaScript is not a modular programming language, and it does not support "classes" (class), not to mention "modules" (module). (The sixth edition of the ECMAScript Standard, which is being developed, will formally support "classes" and "modules", but it still takes a long time to put into practice.) ）

The JavaScript community has made a lot of effort to implement the "module" effect in the existing operating environment. This paper summarizes the best practices of current "JavaScript modular Programming", and explains how to put it into practice. Although this is not a beginner's tutorial, you can understand just a little bit about the basic syntax of JavaScript.

First, the original wording

A module is a set of methods for implementing a particular function.

Just put the different functions (and the variables of the record state) simply together, even a module.

function M1 () {
//...
}

function m2 () {
//...
}

The above function m1 () and M2 () to form a module. When used, call directly on the line.

The disadvantage of this approach is obvious: "pollution" of the global variable, can not guarantee that no variable name conflicts with other modules, and module members do not see a direct relationship.

Ii. the wording of the object

To solve the above shortcomings, the module can be written as an object, all module members are placed inside this object.

var module1 = new Object ({

_count:0,

M1:function () {
//...
},

M2:function () {
//...
}

});

The functions above M1 () and M2 () are encapsulated in the Module1 object. When used, the object's properties are invoked.

MODULE1.M1 ();

However, such writing exposes all module members and the internal state can be externally rewritten. For example, external code can directly change the value of an internal counter.

Module1._count = 5;

Third, immediately execute function writing

You can achieve the purpose of not exposing private members by using the Execute function now (immediately-invoked function Expression,iife).

var Module1 = (function () {

var _count = 0;

var m1 = function () {
//...
};

var m2 = function () {
//...
};

return {
M1:M1,
M2:m2
};

})();

Using the above notation, the external code cannot read the internal _count variable.

Console.info (Module1._count); Undefined

Module1 is the basic writing of JavaScript modules. Below, and then to the processing of this writing.

Four, enlarge the mode

If a module is large, it must be divided into several parts, or a module needs to inherit another module, then it is necessary to adopt the "magnification mode" (augmentation).

var Module1 = (function (mod) {

MOD.M3 = function () {
//...
};

return mod;

}) (Module1);

The above code adds a new method M3 () to the Module1 module, and then returns the new Module1 module.

V. Wide magnification mode (Loose augmentation)

In a browser environment, parts of a module are usually retrieved from the web, and sometimes it is not possible to know which part will be loaded first. If the previous section is written, the first part of the execution may load a nonexistent object, and the "wide magnification mode" is used.

var Module1 = (function (mod) {

//...

return mod;

}) (Window.module1 {});

In contrast to "zoom mode", the "wide magnification mode" is the "execute function now" argument can be an empty object.

VI. Input Global Variables

Independence is an important feature of the module, it is best not to interact directly with other parts of the program.

In order to call global variables inside a module, you must explicitly enter the other variables into the module.

var Module1 = (function ($, YAHOO) {

//...

}) (JQuery, YAHOO);

The above Module1 modules need to use the jquery library and Yui Library, the two libraries (in fact, two modules) as a parameter input module1. In addition to ensuring the independence of the module, it makes the dependencies between the modules become apparent. For more discussion, see Ben Cherry's famous article, "JavaScript Module pattern:in-depth."

The second part of this series will discuss how to organize dependencies between different modules and management modules in a browser environment.