Detailed description of JavaScript Modular programming

This article describes JavaScript Modular programming. This article describes JavaScript Modular programming.

Chapter 1 JavaScript Modular programming

(1): module writing

Original Writing
// A module is a set of methods to implement specific functions. If you simply put different functions (and the variables that record the status) together, it is a module;
Function m1 (){
//...
}
Function m2 (){
//...
}
// The above functions m1 () and m2 () form a module, which can be called directly during use;
// Disadvantage: "contaminated" global variables; there is no guarantee that there will be no conflict with other modules of the variable name, and no direct relationship can be seen between module members;

2. Object writing

// Write the module as an Object, and all module members are put in this Object; var module = new Object ({_ count: 0, m1: function () {//...}, m2: function (){//...}}); // The above functions m1 () and m2 () are encapsulated in the module object; the attributes of this object are called directly during use; module. m1 (); // However, this write method exposes all module members and the internal status can be changed externally; module. _ count = 4;

3. Execute function writing immediately

Var module = (function () {var _ count = 0; var m1 = function (){//...}; var m2 = function () {}; return {m1: m1, m2: m2 };}) (); // use the preceding method, external Code cannot read the internal _ count variable; console.info (module. _ count); // undefined; // the above method is the basic method of writing JavaScript modules;

Quad-zoom Mode

// If the module is large, it must be divided into several parts, or a module must inherit from another module, it is necessary to adopt the "zoom mode"; var module = (function (mod) {mod. m3 = function (){//...}; return mod ;}) (module); // the above Code adds a new method m3 () to the module, and then returns the new module;

5-width zoom-in Mode

// In the browser environment, each part of the module is usually obtained from the Internet, and sometimes it cannot be known which part will be loaded first; // if the previous section is written, the first part of the execution may load a non-null object. In this case, we need to use the "wide zoom mode"; var module = (function (mod ){//... return mod;}) (window. module | {}); // compared with "zoom in mode", "wide zoom in mode" means that the parameter of "instant function execution" can be a null object;

Six input 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 variable input modules must be explicitly input; var module = (function ($, YAHOO ){//...}) (jQuery, YAHOO); // The module above needs to use the jQuery library and YUI library, and the two libraries (actually two modules) are used as parameter input modules; // In addition to ensuring the independence of modules, the dependency between modules becomes obvious;

Chapter 2 JavaScript Modular programming (II): AMD specifications

Specification of Module 1
// Currently, there are two common JavaScript module specifications: CommonJS and AMD;

2. CommonJS
// Node. js uses the javascript language for server-side programming, which marks the birth of "JavaScript Modular programming;
// The node. js module system is implemented by referring to the CommonJS specification;
In CommonJS, there is a global method require () for Loading modules;
Var math = require ('Math'); // load the module;
Math. add (2, 3); // call the module method => 5;

3. browser Environment
// The code in the previous section has a big problem in the browser;
Var math = require ('Math ');
Math. add (2, 3 );
// Problem: math. add (2, 3) is executed only after loading of math. js such as require ('Math );
// The browser module cannot adopt "synchronous loading", but can only adopt "asynchronous loading"; ==> AMD;

Four AMD
AMD (Asynchronous Module Definition) Asynchronous Module Definition;
// The asynchronous loading module is used. The module loading does not affect the execution of subsequent statements. All statements dependent on this module are defined in a callback function,
// This callback function will run only after loading is complete;
// AMD also uses the require () statement to load the module, but it requires two parameters:
Require ([module], callback );
// Module: it is an array and its members are the modules to be loaded;
// Callback: the callback function after successful loading;
Require (['Math'], function (math ){
Math. add (2, 3 );
});
// The math. add () and math modules are not synchronized, And the browser will not be suspended; therefore, AMD is suitable for the browser environment;

Chapter 3 JavaScript Modular programming (III): Use of require. js
1. Why do I use require. js?
// Multiple js files need to be loaded in sequence;
// Disadvantage:
// 1. When loading, the browser will stop rendering the webpage. The more files are loaded, the longer the webpage will lose response;
// 2. Due to the dependency between js files, the loading sequence must be strictly ensured. When the dependency is complex, coding and maintenance become difficult;
// Therefore, require. js solves these two problems:
// 1. asynchronous loading of js files to prevent webpage response loss;
// 2. Manage dependencies between modules to facilitate code compilation and maintenance;

2. Loading of require. js
1. Load require. js