As the website gradually becomes“ Internet applications "The Javascript code embedded in web pages is becoming larger and more complex.
Web pages are more and more like desktop programs, requiring a team to work together, schedule management, unit testing, etc Developers have to use software engineering methods to manage the business logic of web pages.
Javascript modular programming has become an urgent need. Ideally, developers only need to implement core business logic, and others can load modules already written by others.
However, Javascript is not a modular programming language and does not support“ class "(class), let alone" module " ECMAScript Standard The sixth version will officially support "class" and "module", but it will take a long time to put them into practice.)
The Javascript community has made a lot of efforts to achieve the effect of "module" in the existing running environment. This article summarizes the best practices of current "Javascript modular programming" and explains how to put them into practice. Although this is not an initial tutorial, you can understand it as long as you have a little knowledge of the basic syntax of Javascript.
1、 Primitive writing
A module is a set of methods to achieve a specific function.
As long as different functions (and variables that record state) are simply put together, it is a module.
function m1(){
//...
}
function m2(){
//...
}
The above functions m1() and m2() form a module. When using, just call directly.
The disadvantage of this approach is obvious: it "pollutes" the global variables, cannot guarantee that the variable names will not conflict with other modules, and there is no direct relationship between module members.
2、 Object Writing
To solve the above shortcomings, you can write a module as an object, and all module members are placed in this object.
var module1 = new Object({
_count : 0,
m1 : function (){
//...
},
m2 : function (){
//...
}
});
The above functions m1() and m2() are encapsulated in the module1 object. When using, it is to call the properties of this object.
module1.m1();
However, such writing will expose all module members, and the internal state can be overwritten externally. For example, external code can directly change the value of internal counter.
module1._count = 5;
3、 Execute function writing immediately
Using“ Execute function now "(Immediate Invoked Function Expression, IIFE) can achieve the goal of not exposing private members.
var module1 = (function(){
var _count = 0;
var m1 = function(){
//...
};
var m2 = function(){
//...
};
return {
m1 : m1,
m2 : m2
};
})();
Using the above writing method, the external code cannot read the internal _count variable.
console.info(module1._count); // undefined
Module1 is the basic way to write Javascript modules. Next, we will process this writing method.
4、 Zoom in mode
If a module is large and must be divided into several parts, or one module needs to inherit another module, then it is necessary to adopt "amplification mode".
var module1 = (function (mod){
mod.m3 = function () {
//...
};
return mod;
})(module1);
The above code adds a new method m3() for module1 module, and then returns the new module1 module.
5、 Loose amplification
In the browser environment, each part of the module is usually obtained from the Internet, and sometimes it is impossible to know which part will be loaded first. If the writing method in the previous section is used, the first execution part may load an object that does not exist empty. In this case, the "Wide Enlargement Mode" should be used.
var module1 = ( function (mod){
//...
return mod;
})(window.module1 || {});
Compared with "zoom in mode", "wide zoom in mode" means that the parameters of "execute function immediately" can be empty objects.
6、 Enter global variables
Independence is an important feature of a module. It is better not to directly interact with other parts of the program inside the module.
In order to call global variables within a module, other variables must be explicitly entered into the module.
var module1 = (function ($, YAHOO) {
//...
})(jQuery, YAHOO);
The module1 module above needs to use the jQuery library and YUI library, so these two libraries (actually two modules) are input as parameters into module1. This not only ensures the independence of modules, but also makes the dependency between modules obvious. 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 different modules and manage dependencies between modules in the browser environment.
(End)
