Require.js中使用jQuery 插件

jQuery 对AMD的支持

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

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.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组件也类似的，只要改造一下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 代码
 
}));