JavaScript modular Programming (i): JS Modular Evolution Process __ Algorithm

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.