JavaScript modular programming (note) _ javascript skills

This article mainly introduces JavaScript modular programming (notes). If you need it, you can refer to it and have always been familiar with JavaScript. Recently, I encountered this problem, so I learned it online, I don't fully understand it yet. I need to take notes first;

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