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

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 代码
     
    }));

 转载地址：http://www.css88.com/archives/4826