Javascript Modular programming (1): Writing modules

As websites gradually become & quot; Internet applications & quot;, Javascript code embedded into webpages becomes increasingly large and complex. Web pages are getting more and more like desktop programs, requiring a team to work together, schedule management, unit testing, and so on ...... developers have to use software engineering methods to manage web pages... syntaxHighlighter. al

As websites gradually become "Internet applications", Javascript code embedded into webpages becomes increasingly large and complex.

 

Web pages are becoming more and more like desktop programs, requiring a division of labor and collaboration between teams, schedule management, unit testing, and so on... developers have to use software engineering methods to manage the business logic of web pages.

Javascript Modular programming has become an urgent demand. Ideally, developers only need to implement the core business logic, and others can load modules already written by others.

However, Javascript is not a modular programming language. It does not support "classes", let alone "modules. (The sixth version of The ECMAScript standard being developed will officially support "classes" and "modules", but it will take a long time to make it practical .)

The Javascript community has made a lot of efforts to achieve the "module" effect in the existing runtime environment. This article summarizes the current best practices of "Javascript Modular programming" and explains how to put it into practice. Although this is not a preliminary tutorial, you only need to understand the basic syntax of Javascript.

 

I. Original Writing

A module is a set of methods to implement specific functions.

Simply put different functions (and variables that record state) together, it is a module.

Function m1 (){
//...
}

Function m2 (){
//...
}

The above functions m1 () and m2 () form a module. You can call it directly.

The disadvantage of this approach is obvious: "contaminated" global variables, cannot ensure that there is no conflict with other modules variable names, and there is no direct relationship between module members.

Ii. Object writing

To solve the preceding disadvantages, you can write the module as an object. 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 used, the property of this object is called.

Module1.m1 ();

However, this write method exposes all module members and the internal status can be changed externally. For example, external code can directly change the internal counter value.

Module1. _ count = 5;

3. Execute function writing immediately

You can use Immediately-Invoked Function Expression (IIFE) to avoid exposing private members.

Var module1 = (function (){

Var _ count = 0;

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

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

Return {
M1: m1,
M2: m2
};

})();

Using the above Code, external code cannot read the internal _ count variable.

Lele.info (module1. _ count); // undefined

Module1 is the basic writing method of the Javascript module. Next, we will process this writing method.

Iv. Zoom-in Mode

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

Var module1 = (function (mod ){

Mod. m3 = function (){
//...
};

Return mod;

}) (Module1 );

The code above adds a new method m3 () for the module1 module, and then returns the new module1 module.

5. Loose augmentation)

In the browser environment, each part of the module is usually obtained from the Internet, and sometimes cannot know which part will be loaded first. If you use the method described in the previous section, the first part of the execution may load a non-null object. In this case, you must use the "wide amplification mode ".

Var module1 = (function (mod ){

//...

Return mod;

}) (Window. module1 | {});

Compared with "zoom in mode", "wide zoom in mode" means that the parameter of "immediate function execution" can be a null object.

6. Enter global variables

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

To call global variables within the module, other variables must be explicitly input to the module.

Var module1 = (function ($, YAHOO ){

//...

}) (JQuery, YAHOO );

The above module1 module needs to use the jQuery library and YUI library, and the two libraries (actually two modules) are used as the parameter input module1. In addition to ensuring the independence of modules, this also makes the dependency between modules obvious. For more information, 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 the browser environment.

(End)