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 中的源码：

js 代码:

1. // Expose jQuery as an AMD module, but only for AMD loaders that
2. // understand the issues with loading multiple versions of jQuery
3. // in a page that all might call define(). The loader will indicate
4. // they have special allowances for multiple jQuery versions by
5. // specifying define.amd.jQuery = true. Register as a named module,
6. // since jQuery can be concatenated with other files that may use define,
7. // but not use a proper concatenation script that understands anonymous
8. // AMD modules. A named AMD is safest and most robust way to register.
9. // Lowercase jquery is used because AMD module names are derived from
10. // file names, and jQuery is normally delivered in a lowercase file name.
11. if ( typeof define === "function" && define.amd && define.amd.jQuery ) {
12. define( "jquery", [], function () { return jQuery; } );
13. }

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

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

js 代码:

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

Require.js中使用jQuery

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

js 代码:

1. // 简单的配置
2. require.config({
3.  
4. // RequireJS 通过一个相对的路径 baseUrl来加载所有代码。baseUrl通常被设置成data-main属性指定脚本的同级目录。
5. baseUrl: "./js",
6.  
7. // 第三方脚本模块的别名,jquery比libs/jquery-1.11.1.min.js简洁明了；
8. paths: {
9.  
10. "jquery": "libs/jquery-1.11.1.min.js"
11.  
12. }
13.  
14. });
15.  
16. // 开始使用jQuery 模块
17. require(["jquery"], function ($) {
18.  
19. //你的代码
20. //这里直接可以使用jquery的方法，比如：$( "#result" ).html( "Hello World!" );
21.  
22. });

Require.js中使用jQuery 插件

虽然jQuery的支持AMD的API， 这并不意味着jQuery插件也是和AMD兼容的。

一般的jQuery 插件格式：

js 代码:

1. (function ($) {
2. $.fn.m​​yPlugin = function () {
3. //你自己的插件代码
4. };
5. })(jQuery);

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

js 代码:

1. ;(function (factory) {
2. if (typeof define === "function" && define.amd) {
3. // AMD模式
4. define([ "jquery" ], factory);
5. } else {
6. // 全局模式
7. factory(jQuery);
8. }
9. }(function ($) {
10. $.fn.jqueryPlugin = function () {
11. //插件代码
12. };
13. }));

Require.js中使用jQuery UI组件

Require.js中使用jQuery UI组件也类似的，只要改造一下jQuery Widget Factory 代码就可以了，并且感觉jQuery UI的依赖关系加载就可以了。例如：

js 代码:

1. ;(function (widgetFactory) {
2.  
3. if (typeof define === "function" && define.amd) {
4. // AMD模式
5. define("jquery.ui.widget", ["jquery"], function () {
6.  
7. widgetFactory(window.jQuery);
8.  
9. });
10. } else {
11. // 全局模式
12. widgetFactory(window.jQuery);
13. }
14. }
15. (function ($, undefined) {
16.  
17. // jQuery Widget Factory 代码
18.  
19. }));

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