AMD非同步模組定義和Require.js中使用jquery介紹

一.AMD模組:

AMD（非同步模組定義，Asynchronous Module Definition）格式總體的目標是為現在的開發者提供一個可用的模組化 JavaScript 的解決方案。

AMD 模組格式本身是一個關於如何定義模組的提案，在這種定義下模組和依賴項都能夠非同步地進行載入。它有很多獨特的優勢，包括天生的非同步及高度靈活等特性，這些特效能夠解除常見的程式碼與模組標識間的那種緊密耦合。目前它已經被很多專案所接納。

二.RequireJS:

RequireJS是一個工具庫，主要用於客戶端的模組管理。它可以讓客戶端的程式碼分成一個個模組，實現非同步或動態載入，從而提高程式碼的效能和可維護性。它的模組管理遵守AMD規範。

三.jQuery對AMD的支援:

jQuery 1.7 開始支援將 jQuery 註冊為一個AMD非同步模組。有很多相容的指令碼載入器（包括 RequireJS 和 curl）都可以用一個非同步模組格式來載入模組，這也就表示不需要太多 hack 就能讓一切執行起來。可以看看jQuery 1.7 中的原始碼：

[JavaScript] 純文字檢視 複製程式碼
// Expose jQuery as an AMD module, but only for AMD loaders that
// understand the issues with loading multiple versions of jQuery
// in a page that all might call define(). The loader will indicate
// they have special allowances for multiple jQuery versions by
// specifying define.amd.jQuery = true. Register as a named module,
// since jQuery can be concatenated with other files that may use define,
// but not use a proper concatenation script that understands anonymous
// AMD modules. A named AMD is safest and most robust way to register.
// Lowercase jquery is used because AMD module names are derived from
// file names, and jQuery is normally delivered in a lowercase file name.
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判斷:

[JavaScript] 純文字檢視 複製程式碼
if ( typeof define === "function" && define.amd ) {
define( "jquery", [], function() {
  return jQuery;
});
}

四.Require.js中使用jQuery:

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

[JavaScript] 純文字檢視 複製程式碼
// 簡單的配置
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:

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

[JavaScript] 純文字檢視 複製程式碼
// 簡單的配置
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 外掛格式：

[JavaScript] 純文字檢視 複製程式碼
(function($){
  Plugin=function(){
    //你自己的外掛程式碼
  };
})(jQuery);

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

[JavaScript] 純文字檢視 複製程式碼
;(function (factory) {
  if (typeof define === "function" && define.amd) {
    // AMD模式
    define([ "jquery" ], factory);
  }
  else {
    // 全域性模式
    factory(jQuery);
  }
}
(function ($) {
  $.fn.jqueryPlugin = function () {
    //外掛程式碼
  };
}));