AMD Async Module Definition Introduction and methods of using jquery and jquery plugins in Require.js

AMD Modules

The overall goal of 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 modules and dependencies can be loaded asynchronously. It has many unique advantages, including innate asynchronous and highly flexible features that remove the tight coupling between common code and module identities. It is now accepted by many projects, including jquery (1.7).

Requirejs

Requirejs is a tool library that is used primarily for client-side module management. It allows the client's code to be separated into modules for asynchronous or dynamic loading, which improves the performance and maintainability of the code. Its module management complies with the AMD specifications.

JQuery's support for AMD

jquery 1.7 began to support the registration of jquery as an AMD asynchronous module. There are a number of compatible script loaders (both Requirejs and curl) that can load modules in an asynchronous module format, which means that you don't need too much hack to get everything up and running. You can look at the source code in jquery 1.7:

//Expose JQuery as an AMD module with only for AMD loaders that//understand the issues with loading multiple versions of JQuery//In a page, all might call define (). The loader would indicate//They has special allowances for multiple jQuery versions by//Specifying Define.amd.jQuery = True. Register as a named module,//since JQuery can is concatenated with and other files The may use define,//But does use a proper concatenation script that understands anonymous//AMD modules. A named AMD is safest and the robust to register.//lowercase jquery is used because AMD module names be derived from//file names, and JQuery is normally delivered in a lowercase file name.if(typeofdefine = = = "function" && define.amd &&define.amd.jQuery) {define ("jquery", [],function() {returnJQuery;} );}

The principle of its work is that the script loader used specifies that it can support multiple jQuery versions by specifying a property, 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 may be a risk that it may be pieced together with other files that use the AMD define () method instead of using an appropriate, understanding anonymous AMD A flattened script defined by the module.

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

if typeof Define = = = "function" &&function(  ) {return  JQuery; });}

Using jquery in Require.js

Using jquery in Require.js is convenient and simple to configure, for example:

//Simple ConfigurationRequire.config ({//Requirejs loads all the code through a relative path BaseURL. BaseURL is typically set to the Data-main property to specify the sibling directory of the script. BASEURL: "./js",    //third-party script module alias, jquery than Libs/jquery-1.11.1.min.js concise and clear;paths: {"jquery": "Libs/jquery-1.11.1.min.js"    }});//Getting Started with the jquery moduleRequire (["jquery"],function ($) {    //Your code    //the method of jquery can be used directly here, for example: $ ("#result"). HTML ("Hello world!");});

Using the jquery plugin in Require.js

While jquery supports AMD's API, this does not mean that the jquery plugin is also compatible with AMD.

General jquery Plugin Format:

(function  ($) {    function  () {        // your own plug-in code     };}) (jQuery);

But we can change it a little bit to use require.js to load a jquery plugin:

;(function(Factory) {if(typeofdefine = = = "function" &&define.amd) {//AMD Modedefine (["jquery"], factory); } Else {        //Global ModeFactory (JQuery); }}(function($) {$.fn.jqueryplugin=function () {        //plug-in code    };}));

Using the jquery UI component in Require.js

Using the jquery UI component in Require.js is similar, as long as you retrofit the jquery Widget Factory code and feel the dependencies of the jquery UI load. For example:

(function(widgetfactory) {if(typeofdefine = = = "function" &&define.amd) {//AMD ModeDefine ("Jquery.ui.widget", ["jquery"],function() {widgetfactory (window.jquery);    }); } Else {        //Global Modewidgetfactory (window.jquery); }}(function($, undefined) {//jQuery Widget Factory code}));

AMD Async Module Definition Introduction and methods of using jquery and jquery plugins in Require.js