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