Date: 2012 October 26
With the site becoming " Internet applications ", Javascript code embedded in web pages increasingly large and more complex.
Web more like a desktop program, you need a team of division of labor, business logic schedule management, unit testing, and so on ...... developers had to use software engineering methods, management pages.
Javascript modular programming, has become an urgent need. Ideally, developers only need to implement core business logic, other modules can be loaded others have written.
However, Javascript is not a modular programming language, it does not support the " class " (class), let alone "module" (module) up. (Being developed in the ECMAScript standard sixth edition, will officially support the "class" and "module", but also take a long time to put into practical use.)
Javascript do a lot of community effort in the existing operating environment, to achieve the effect of "module". This paper summarizes the current "Javascript modular programming" best practices, explain how to put into practical use. Although this is not the primary curriculum, but just a little understanding of the basic grammar of Javascript, you can understand.
First, the original wording
A module is a set of methods achieve a particular functionality.
As long as the different functions (as well as the recording state variable) is simply put together, even if one module.
function m1(){
//...
}function m2(){
//...
}
The above function M1 () and m2 (), to form a module. When in use, a direct call on the line.
The disadvantage of this approach is obvious: "pollution" of the global variables can not be guaranteed variable name does not conflict with other modules, but do not see a direct relationship between the module members.
Second, the object of writing
In order to address the shortcomings of the above, can be written in an object module, all modules are put members of the object inside.
var module1 = new Object({
_count : 0,
m1 : function (){
//...
},m2 : function (){
//...
}});
The above function M1 () and m2 (), are encapsulated in module1 object. When in use, it is to call the object's properties.
module1.m1();
However, the wording will expose all the members of the module, the internal state can be externally rewritten. For example, the outer code can change the value of the internal counter directly.
module1._count = 5;
Third, the wording immediately execute the function
Use " function is executed immediately " (Immediately-Invoked Function Expression, IIFE), can not achieve the purpose of exposure of private members.
var module1 = (function(){
was _count = 0;
were m1 = function () {
// ...
};were m2 = function () {
// ...
};return {
m1 : m1,
m2 : m2
};})();
Using the above wording, the interior of the external code can not be read _count variables.
console.info(module1._count); //undefined
module1 Javascript is basic writing module. Hereinafter, this formulation is processed again.
Four, amplification mode
If a large module, it must be divided into several parts, or the need to inherit one module to another module, then it is necessary to use "zoom mode" (augmentation).
was Module1 = (function (v) {
mod.m3 = function () {
//...
};return mod;
})(module1);
The above code adds a new method M3 () is module1 module, and the module returns the new module1.
V. Wide Zoom mode (Loose augmentation)
In the browser environment, the various parts of the module are usually obtained from the Internet, you may not know which part will be loaded. If the wording on a first portion of the execution possible to load an empty object does not exist, then we must use "Wide Zoom Mode."
was Module1 = (function (v) {
//...
return mod;
})(window.module1 || {});
Compared with the "zoom mode", "Wide Zoom mode" parameter is "immediate execution function" may be an empty object.
Sixth, global variable input
Independence is an important feature of the module, internal module is best not to directly interact with the rest of the program.
In order to call the global variables in the module, the other must explicitly variable input module.
var module1 = (function ($, YAHOO) {
//...
})(jQuery, YAHOO);
The above module1 module requires the use of the jQuery library and YUI library, put these two libraries (actually two modules) as a parameter input module1. In addition to doing so to ensure the independence of the module, so that further dependencies between modules become apparent. In this regard more discussion, see Ben Cherry's famous article "JavaScript Module Pattern: an In-Depth" .
The second part of this series, will discuss how the dependencies between different browsers environmental organization module, management module.
(Finish)