Initial understanding of Require.js modular programming

Preliminary understanding of Require.js modular programming one, JavaScript modular programming

Currently, there are two types of JavaScript module specifications available: Commonjs and AMD.

1, Commonjs

In 2009, US programmer Ryan Dahl created the node. JS project, which uses JavaScript for server-side programming, a sign that JavaScript modular programming is officially born.

In the browser environment, no module is not particularly big problem, after all, the complexity of the Web-page program is limited, but on the server side, must have the module, and the operating system and other applications to interact with, otherwise there is no programming.

Node. JS's module system is implemented with reference to the COMMONJS specification. In Commonjs, there is a global method require () that is used to load the module.

Assuming that a mathematical module is math.js, it can be loaded as follows.

var math = require (' math ');

Then, you can invoke the method provided by the module:

var math = require (' math '); Math.add (//  5

Since this series is primarily for browser programming and does not involve node. js, there is no more introduction to COMMONJS. As long as we know here, require () is used to load the module on the line.

2. AMD

AMD is the abbreviation for "Asynchronous module definition", meaning "async module definition". It loads the module asynchronously, and the module's load does not affect the execution of the statement behind it. All statements that rely on this module are defined in a callback function that will not run until the load is complete.

Module definition
Define (ID?, dependencies, Factory);
which

• ID: module identification, can be omitted.
• Dependencies: The dependent module can be omitted.
• Factory: The implementation of a module, or a JavaScript object.

　　Module loading

AMD also uses the Require () statement to load the module, but unlike COMMONJS, it requires two parameters:

Require ([module], callback);

The first parameter, [module], is an array in which the member is the module to be loaded, and the second parameter, callback, is the callback function after the load succeeds. If you rewrite the previous code in AMD form, this is the following:

function (math) {Math.add (2, 3);});

Math.add () is not synchronized with the math module, and the browser does not take place in animation. So it's clear that AMD is better suited for a browser environment.

Currently, there are two main JavaScript libraries that implement the AMD specification: Require.js and Curl.js. The third part of this series will introduce require.js to further explain AMD's usage and how to put modular programming into combat.

Second, Requirejs modular programming

Require.js loaded modules with AMD (Asynchronous Module definition Specification) specification. In other words, the module must be written in accordance with AMD's requirements.

Two important features of the require.js:

1, the implementation of JS file asynchronous loading, to avoid web page loss of response

2, the dependency between the management module, easy to write and maintain code

Load Requirejs:

<script src= "Js/require.js" data-main= "Js/main" ></script>

The purpose of the Data-main property is to specify the main module of the Web program. In the example above, is the JS directory below the main.js, this file will be the first to be loaded require.js. Since the require.js default file suffix is JS, main.js can be shortened to main.

Main.js Common examples:

require.config ({    paths: {       Modulea',
Moduleb: ",
Modulec: "
}

require ([function  (Modulea, Moduleb, Modulec) {
　　　　// some code here 　　

});

1, Require.config

Require.config is used to configure some parameters that will affect some of the behavior of the Requirejs library.

Require.config parameter is a JS object, commonly used configuration has baseurl,paths and so on.

The paths parameter is configured here, using the module name "jquery", whose actual file path jquery-1.7.2.js (suffix. js can be omitted).

We know that jquery has been supporting the AMD specification since 1.7, that is, if jquery is running as an AMD module, its module name is "jquery". Note that "jquery" is fixed and cannot be written "jquery" or anything else.

Note: If you change the file name "Jquery-1.7.2.js" to "jquery.js", you do not have to configure the paths parameter.

If you apply jquery to modular development, you can not use the global, that is, can not be exposed. Use the Require function when you need jquery.

2. require () function

The Require () function accepts two parameters. The first parameter is an array that represents the dependent module, the example above is [' Modulea ', ' Moduleb ', ' modulec ', i.e. the main module relies on these three modules; The second parameter is a callback function, which is called when the module specified by the current polygon is loaded successfully. The loaded module passes in the function as a parameter, allowing the modules to be used inside the callback function.

Initial understanding of Require.js modular programming