Introduction to AMD asynchronous module definitions and methods for using jquery and jquery plug-ins in Require.js _jquery

AMD Module

The overall goal of the AMD (asynchronous module definition, asynchronous module definition) format is to provide an available modular JavaScript solution for today's developers.

The AMD module format itself is a proposal on how to define a module, under which both modules and dependencies can be loaded asynchronously. It has a number of unique advantages, including innate asynchronous and highly flexible features that unlock the tight coupling between common code and module identities. Currently it has been accepted by many projects, including jquery (1.7).

Requirejs

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

JQuery's support for AMD

jquery 1.7 begins to support the registration of jquery as an AMD asynchronous module. There are a number of compatible script loaders (including Requirejs and curl) that can load modules in an asynchronous module format, which means that it doesn't take too much hack to get everything running. Take a look at the source code in jquery 1.7:

Copy Code code as follows:

Expose JQuery as an AMD module, but a for AMD loaders
Understand the issues with loading multiple versions of JQuery
In a page so all might call define (). The loader would 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 the other files of may use define,
But not with a proper concatenation script that understands anonymous
AMD modules. A named AMD are safest and most robust way to register.
lowercase jquery used because AMD module names are derived from
File names, and JQuery normally delivered in a lowercase file name.
if (typeof define = = "function" && define.amd && define.amd.jQuery) {
Define ("jquery", [], function () {return jquery;});
}

It works by using the script loader to indicate that it can support multiple jQuery versions by specifying a property, that is, define.amd.jQuery to true. If you are interested in knowing the specific implementation details, we can register JQuery as a named module because there is a risk that it may be pieced together with other files that use the Define () method of AMD instead of using a suitable, understanding anonymous AMD The flattener script defined by the module.

The high version of jquery (1.11.1) removed the Define.amd.jQuery judgment:

Copy Code code as follows:

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

Using jquery in Require.js

It is easy to use jquery in Require.js, simple configuration is OK, for example:

Copy Code code as follows:

Simple configuration
Require.config ({

Requirejs loads all the code through a relative path BaseURL. BaseURL is usually set to the Data-main property to specify the sibling directory of the script.
BaseURL: "./js",

The alias of the third party script module, jquery is simpler and clearer than libs/jquery-1.11.1.min.js;
Paths: {

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

}

});

Start using the jquery module
Require (["jquery"], function ($) {

Your code
jquery can be used directly here, such as: $ ("#result"). HTML ("Hello world!");

});

Using jquery plug-ins in Require.js

While jquery's support for AMD's APIs, this does not mean that the jquery plugin is also compatible with AMD.

The general jquery plug-in format:

Copy Code code as follows:

(function ($) {
$.FN.M yplugin = function () {
Your own plug-in code
};
}) (JQuery);

But we can use require.js to load a jquery plugin with a little modification:

Copy Code code 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
};
}));

Using the jquery UI component in Require.js

The jquery UI components in Require.js are similar, as long as the jquery Widget Factory code is modified, and the dependencies of the jquery UI are felt to be loaded. For example:

Copy Code code 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

}));