AMD 模塊

AMD（異步模塊定義，Asynchronous Module Definition）格式總體的目標是為現(xiàn)在的開發(fā)者提供一個可用的模塊化 JavaScript 的解決方案。

AMD 模塊格式本身是一個關(guān)于如何定義模塊的提案，在這種定義下模塊和依賴項都能夠異步地進行加載。它有很多獨特的優(yōu)勢，包括天生的異步及高度靈活等特性，這些特性能夠解除常見的代碼與模塊標識間的那種緊密耦合。目前它已經(jīng)被很多項目所接納，包括jQuery（1.7）。

RequireJS

RequireJS是一個工具庫，主要用于客戶端的模塊管理。它可以讓客戶端的代碼分成一個個模塊，實現(xiàn)異步或動態(tài)加載，從而提高代碼的性能和可維護性。它的模塊管理遵守AMD規(guī)范。

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 版本。如果有興趣了解特定的實現(xiàn)細節(jié)的話，我們可以將 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通常被設(shè)置成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的依賴關(guān)系加載就可以了。例如：

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

?轉(zhuǎn)載地址：http://www.css88.com/archives/4826

總結(jié)

以上是生活随笔為你收集整理的jQuery 对AMD的支持（Require.js中如何使用jQuery）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。