AMD非同步模組定義介紹和Require.js中使用jQuery及jQuery插件的方法_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 中的原始碼：

複製程式碼 程式碼如下:

程式碼如下:// understand the issues with loading multiple versions of jQuery
// in a page that all might call define(). The loader will indicate// specifying define.amd.jQuery = true. Register as a named module,
// since jQuery can be concatenated with others filesdefine sdefine be concatenated with files” >// but not use a proper concatenation script that understands anonymous
// AMD modules. A named AMD is safest and most robust way to register.
// Loweerrcase jquery is robust way to register.
// Loweald from jquery is robust becaive areaare'h 🎜>// file names, and jQuery is normally delivered in a lowercase file name.
if ( typeof define === "function" && define.amd && define.amd.jQuery ) { ", [], function () { return jQuery; } );
}

其工作的原理是，所使用的腳本載入器透過指定一個屬性，即 define.amd.jQuery 為 true，來標明自己可以支援多個 jQuery 版本。如果有興趣了解特定的實作細節的話，我們可以將jQuery 註冊為一個具名模組，因為可能會有這樣的風險，即它可能被與其它使用了AMD 的define() 方法的檔案拼合在一起，而沒有使用一個適當的、理解匿名AMD 模組定義的拼合腳本。

高版的jQu​​ery （1.11.1） 去掉了define.amd.jQuery判斷：

複製程式碼 程式碼如下:

if ( typeof define === "function" & define .amd ) {

 define( "jquery", [], function() {
  return jQuery;
 });
}

Require.js中使用jQuery

Require.js中使用jQuery非常方便，簡單設定就可以了，例如：

複製程式碼 程式碼如下:

// 簡單的設定值{

    // RequireJS 透過一個相對的路徑baseUrl來載入所有程式碼。 >
    // 第三方腳本模組的別名,jquery比libs/jquery-1.11.1.min.js簡潔明了；
    paths: {

      paths: {

    1.11.1.min.js"

    }

});

// 開始使用jQuery 模組
require(["jquery"], function ($ ) {

    //你的程式碼
    //這裡直接可以使用jquery的方法，例如：$( "#result" ).html( "Hello World!" );

});

Require.js中使用jQuery 外掛程式

雖然jQuery的支援AMD的API， 這並不代表jQuery外掛也是和AMD相容的。

一般的jQuery 外掛程式格式：

複製程式碼 程式碼如下:(function ($) {function ($) {function ($     $.fn.myPlugin = function () {

        //你自己的插件程式碼

    };
})(jQuery);
    };
})(jQuery);

不過我們稍微修改一下就可以使用Require.js載入一個jQuery外掛：

複製程式碼 程式碼如下:

;(function (factory) {
    if (typeof define === "function" && define.amd) {
    , factory);
    } else {
        // 全域模式
       ryPlugin = function ( ) {
        //外掛程式碼
    };
}));



Require.js中使用jQuery UI元件

Require.js中使用jQuery UI元件也類似的，只要改造一下jQuery Widget Factory 程式碼就可以了，並且感覺jQuery UI的依賴關係載入就可以了。例如：

複製程式碼

程式碼如下:(function (widgetget)

(function (widgetget) 🎜>    if (typeof define === "function" && define.amd) {
        // AMD模式
     >
            widgetFactory(window.jQuery);

        }      widgetFactory(window.jQuery);
    }
}
(function ($, undefined) {

    // jQuery Widget Factory 程式碼

}));