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 中的源碼:
- // 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
判斷:
- 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.myPlugin = 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 代碼
- }));
感謝,huugle在jQuery插件開發入門留言,不然也不會專門整理這個文章。