Introduction to AMD asynchronous module definition and how to use jQuery and jQuery plug-ins in Require.js_jquery

AMD Module

The overall goal of the AMD (Asynchronous Module Definition) format is to provide current developers with a usable modular JavaScript solution.

The AMD module format itself is a proposal for how to define modules so that both modules and dependencies can be loaded asynchronously. It has many unique advantages, including being inherently asynchronous and highly flexible, which can break the tight coupling between code and module identity that is common. It has been adopted by many projects, including jQuery (1.7).

RequireJS

RequireJS is a tool library mainly used for client module management. It allows the client code to be divided into modules for asynchronous or dynamic loading, thereby improving the performance and maintainability of the code. Its module management adheres to AMD specifications.

jQuery support for AMD

jQuery 1.7 starts to support registering jQuery as an AMD asynchronous module. There are many compatible script loaders (including RequireJS and curl) that can load modules using an asynchronous module format, which means it doesn't take much hacking to get everything working. You can take a look at the source code in jQuery 1.7:

Copy the code 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 by
// 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 way it works is that the script loader used indicates that it can support multiple jQuery versions by specifying a property, define.amd.jQuery, as true. If you are interested in knowing the specific implementation details, you can register jQuery as a named module, since there is a risk that it may be spliced ​​together with other files that use AMD's define() method without Use a suitable stitching script that understands anonymous AMD module definitions.

Higher version of jQuery (1.11.1) removes define.amd.jQuery judgment:

Copy code 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, just configure it simply, for example:

Copy code The code is as follows:

// Simple configuration
require.config( {

// RequireJS loads all code through a relative path baseUrl. baseUrl is usually set to the same level directory of the script specified by the data-main attribute. baseUrl: "./js",

// Alias ​​of third-party script module, jquery is more concise and clear than libs/jquery-1.11.1.min.js;
paths: {

"jquery": "libs/jquery- 1.11.1.min.js"

}

});

// Start using jQuery module
require(["jquery"], function ($ ) {

//Your code
//You can use jquery methods directly here, such as: $( "#result" ).html( "Hello World!" );

});

Use jQuery plug-in in Require.js

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

General jQuery plug-in format:

Copy code The code is as follows:

(function ($) {

$.fn.myPlugin = function () {
//Your own plug-in code
};
})(jQuery);

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

Copy the code The code is as follows:

;(function (factory) {
if (typeof define === "function" && define.amd) {
// AMD mode
define([ "jquery" ] , factory);
} else {
                                                                                                                                                                                                                              ) {
//Plug-in code
};
}));



Using jQuery UI components in Require.js

The use of jQuery UI components in Require.js is similar. Just modify the jQuery Widget Factory code and load the dependencies of jQuery UI. For example:

Copy code

The code is as follows:(function (widgetFactory) {

if (typeof define === "function" && define.amd) {

// AMD mode
define("jquery.ui.widget", ["jquery"], function () {

                                                                                                                       }
}
(function ($, undefined) {

// jQuery Widget Factory code

}));