Introduction to AMD asynchronous module definition and methods for using jQuery and jQuery plug-ins in Require. js _ jquery

This article mainly introduces the definition of AMD asynchronous modules and the methods for using jQuery and jQuery plug-ins in Require. js. For more information, see AMD Module

The overall goal of AMD (Asynchronous Module Definition) format is to provide an available modular JavaScript solution for developers.

The AMD module format itself is a proposal about how to define a module. In this definition, both modules and dependencies can be loaded asynchronously. It has many unique advantages, including inherent asynchronous and highly flexible features, which can remove the Close coupling between common codes and module identifiers. Currently, it has been accepted by many projects, including jQuery (1.7 ).

RequireJS

RequireJS is a tool library mainly used for client module management. It divides the client code into modules for asynchronous or dynamic loading, thus improving the Code Performance and maintainability. Its Module management complies with AMD specifications.

JQuery's support for AMD

JQuery 1.7 began to support registering jQuery as an AMD asynchronous module. Many compatible script loaders (including RequireJS and curl) can use an asynchronous module format to load modules. This means that it can run everything without too many hack. Let's take a look at the source code in jQuery 1.7:

The Code is as follows:

// Expose jQuery as an AMD module, but only for AMD loaders that
// Understand the issues with loading multiple versions of jQuery
// In a page that all might call define (). The loader will indicate
// They have special allowances for multiple jQuery versions
// Specifying define. amd. jQuery = true. Register as a named module,
// Since jQuery can be concatenated with other files that may use define,
// But not use a proper concatenation script that understands anonymous
// AMD modules. A named AMD is safest and most robust way to register.
// Lowercase jquery is used because AMD module names are derived from
// File names, and jQuery is normally delivered in a lowercase file name.
If (typeof define = "function" & define. amd & define. amd. jQuery ){
Define ("jquery", [], function () {return jQuery ;});
}

The working principle is that the used script loader specifies that it can support multiple jQuery versions by specifying an attribute, that is, define. amd. jQuery is true. If you are interested in understanding specific implementation details, we can register jQuery as a named module, because there may be such a risk that it may be used with other define () method files are combined without a suitable combination script that understands the definition of the anonymous AMD module.

The higher version of jQuery (1.11.1) removes the define. amd. jQuery judgment:

The Code is as follows:

If (typeof define = "function" & define. amd ){
Define ("jquery", [], function (){
Return jQuery;
});
}

Use jQuery in Require. js

It is very convenient to use jQuery in Require. js. You can simply configure it, for example:

The Code is as follows:

// Simple configuration
Require. config ({

// RequireJS loads all code using a relative path baseUrl. BaseUrl is usually set to the data-main attribute to specify the same directory of the script.
BaseUrl: "./js ",

// Third-party scripting module alias, jquery than libs/jquery-1.11.1.min.js concise and clear;
Paths :{

"Jquery": "libs/jquery-1.11.1.min.js? 1.1.9"

}

});

// Start using the jQuery Module
Require (["jquery"], function ($ ){

// Your code
// Jquery can be used directly here, for example: $ ("# result" ).html ("Hello World! ");

});

Use the jQuery Plugin in Require. js

Although jQuery supports AMD APIs, this does not mean that the jQuery plug-in is also compatible with AMD.

General jQuery plug-in format:

The Code is as follows:

(Function ($ ){
$. Fn. m yPlugin = function (){
// Your own plug-in code
};
}) (JQuery );

But we can use Require. js to load a jQuery plug-in with a slight modification:

The Code is as follows:

; (Function (factory ){
If (typeof define = "function" & define. amd ){
// AMD Mode
Define (["jquery"], factory );
} Else {
// Global Mode
Factory (jQuery );
}
} (Function ($ ){
$. Fn. jqueryPlugin = function (){
// Plug-in code
};
}));

Use jQuery UI components in Require. js

The jQuery UI component used in Require. js is similar. You only need to modify the jQuery Widget Factory Code and load the dependencies of jQuery UI. For example:

The Code is as follows:

(Function (widgetFactory ){

If (typeof define = "function" & define. amd ){
// AMD Mode
Define ("jquery. ui. widget", ["jquery"], function (){

WidgetFactory (window. jQuery );

});
} Else {
// Global Mode
WidgetFactory (window. jQuery );
}
}
(Function ($, undefined ){

// JQuery Widget Factory Code

}));