AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法

amd 模块

amd（异步模块定义，asynchronous module definition）格式总体的目标是为现在的开发者提供一个可用的模块化 javascript 的解决方案。

amd 模块格式本身是一个关于如何定义模块的提案，在这种定义下模块和依赖项都能够异步地进行加载。它有很多独特的优势，包括天生的异步及高度灵活等特性，这些特性能够解除常见的代码与模块标识间的那种紧密耦合。目前它已经被很多项目所接纳，包括jquery（1.7）。

requirejs

requirejs是一个工具库，主要用于客户端的模块管理。它可以让客户端的代码分成一个个模块，实现异步或动态加载，从而提高代码的性能和可维护性。它的模块管理遵守amd规范。

jquery 对amd的支持

jquery 1.7 开始支持将 jquery 注册为一个amd异步模块。有很多兼容的脚本加载器（包括 requirejs 和 curl）都可以用一个异步模块格式来加载模块，这也就表示不需要太多 hack 就能让一切运行起来。可以看看jquery 1.7 中的：

. 代码如下:

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

 

其工作的原理是，所使用的脚本加载器通过指定一个属性，即 define.amd.jquery 为 true，来标明自己可以支持多个 jquery 版本。如果有兴趣了解特定的实现细节的话，我们可以将 jquery 注册为一个具名模块，因为可能会有这样的风险，即它可能被与其它使用了 amd 的 define() 方法的文件拼合在一起，而没有使用一个合适的、理解匿名 amd 模块定义的拼合脚本。

高版本的jquery （1.11.1） 去掉了define.amd.jquery判断：

 

. 代码如下:

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

 

require.js中使用jquery

require.js中使用jquery非常方便，简单配置就可以了，例如：

 

. 代码如下:

// 简单的配置
require.config({

    // requirejs 通过一个相对的路径 baseurl来加载所有代码。baseurl通常被设置成data-main属性指定脚本的同级目录。
    baseurl: "./js",

    // 第三方脚本模块的别名,jquery比libs/jquery-1.11.1.min.js简洁明了；
    paths: {

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

    }

});

// 开始使用jquery 模块
require(["jquery"], function ($) {

    //你的代码
    //这里直接可以使用jquery的方法，比如：$( "#result" ).html( "hello world!" );

});

 

require.js中使用jquery 插件

虽然jquery的支持amd的api， 这并不意味着jquery插件也是和amd兼容的。

一般的jquery 插件格式：

. 代码如下:

(function ($) {
    $.fn.m​​yplugin = function () {
        //你自己的插件代码
    };
})(jquery);

不过我们稍微修改一下就可以使用require.js加载一个jquery插件：

. 代码如下:

;(function (factory) {
    if (typeof define === "function" && define.amd) {
        // amd模式
        define([ "jquery" ], factory);
    } else {
        // 全局模式
        factory(jquery);
    }
}(function ($) {
    $.fn.jqueryplugin = function () {
        //插件代码
    };
}));

 

require.js中使用jquery ui

require.js中使用jquery ui组件也类似的，只要改造一下jquery widget factory 代码就可以了，并且感觉jquery ui的依赖关系加载就可以了。例如：

. 代码如下:

(function (widgetfactory) {

    if (typeof define === "function" && define.amd) {
        // amd模式
        define("jquery.ui.widget", ["jquery"], function () {

            widgetfactory(window.jquery);

        });
    } else {
        // 全局模式
        widgetfactory(window.jquery);
    }
}
(function ($, undefined) {

    // jquery widget factory 代码

}));