JQ advanced — jQuery support for AMD (how to use jQuery in require. JS)

Time:2022-1-3

Amd module

The overall goal of AMD (asynchronous module definition) format is to provide an available modular JavaScript solution for current developers.

Amd module format itself is a proposal on how to define modules. Under this definition, 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 code and module identification. At present, it has been accepted by many projects, including jQuery (1.7).

RequireJS

Requirejs is a tool library, which is mainly used for module management on the client side. It can divide the client code into modules to realize asynchronous or dynamic loading, so as to improve the performance and maintainability of the code. Its module management complies with AMD specifications.

JQuery support for AMD

JQuery 1.7 supports the registration of jQuery as an AMD asynchronous module. Many compatible script loaders (including requirejs and curl) can load modules in an asynchronous module format, which means that everything can run without too much hack. Take a look at the source code in jQuery 1.7:

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

It works by using the script loader to specify a property, define amd. JQuery is true to indicate that it can support multiple jQuery versions. If you are interested in understanding the specific implementation details, we can register jQuery as a named module, because there may be a risk that it may be combined with other files using AMD’s define() method without using an appropriate splicing script that understands the anonymous amd module definition.

The higher version of jQuery (1.11.1) removed define amd. JQuery judgment:

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

Require. Using jQuery in JS

Require. JQuery is very convenient to use in JS. It can be configured simply, for example:

//Simple configuration
    require.config({
     
        //Requirejs loads all 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 better than LIBS / jquery-1.11.1 Min.js is concise and clear;
        paths: {
     
            "jquery": "libs/jquery-1.11.1.min.js"
     
        }
     
    });
     
    //Start using the jQuery module
    require(["jquery"], function ($) {
     
        //Your code
        //Here, you can directly use the method of jQuery, such as $("#result") html( "Hello World!" );
     
    });

Require. Using jQuery plug-in in JS

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

General jQuery plug-in format:

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

However, we can use require. With a little modification JS to load a jQuery plug-in:

;(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
        };
    }));

Require. JS using jQuery UI components

Require. The jQuery UI component used in jquery.js is similar. Just modify the jQuery widget factory code, and feel that the dependency of jQuery UI can be loaded. For example:

;(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
     
    }));

Reprint address:http://www.css88.com/archives…