jQuery 对AMD的支持(Require.js中如何使用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 代码

}));

感谢,huugle在jQuery插件开发入门留言,不然也不会专门整理这个文章。

赞(0) 打赏
未经允许不得转载:WEB前端开发 » jQuery 对AMD的支持(Require.js中如何使用jQuery)

评论 7

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #-49

    发现只有jquery需要在paths中定义一下路径才能成功引用。
    如果在require函数中直接写路径会报错。
    例如:
    require([“js/jquery”], function ($) {
    })

    会报错

    wgang5年前 (2014-06-16)回复
  2. #-48

    如何是zepto怎么改阿?

    H君4年前 (2014-10-17)回复
  3. #-47

    1楼的那个原因是因为jq本身不是一个amd模块,它只是兼容amd的require引用方式(非加载)而已, 它内部兼容引入的那块代码将自己定义成了”jquery”,也就是说,如果事先jq已经加载了,你其它模块要用它,只需要define(["jquery"], function ($){});就成,否则,除非你的Jq文件路径为./jquery.js;这时候require拉取时的路径和模块名称相互对应,就能正常使用, 不然是不会有正确的返回的(因为模块名称对不上),因此,解决的方式要么事先加载好Jq,要么在paths里配置jquery

    BottleLiu4年前 (2015-04-29)回复
  4. #-46

    require.js中使用jquery ui组件,最后的
    (function ($, undefined) {
    // jQuery Widget Factory 代码
    })
    这里为什么要传一个undefined呢?
    调用widgetFactory(window.jQuery);的时候并没有用啊?

    刘贝贝2年前 (2016-11-30)回复

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏