国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看

打開(kāi)APP
userphoto
未登錄

開(kāi)通VIP,暢享免費(fèi)電子書(shū)等14項(xiàng)超值服

開(kāi)通VIP
jQuery 對(duì)AMD的支持(Require.js中如何使用jQuery) – WEB前端開(kāi)發(fā)

AMD 模塊

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

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

RequireJS

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

jQuery 對(duì)AMD的支持

jQuery 1.7 開(kāi)始支持將 jQuery 注冊(cè)為一個(gè)AMD異步模塊。有很多兼容的腳本加載器(包括 RequireJS 和 curl)都可以用一個(gè)異步模塊格式來(lái)加載模塊,這也就表示不需要太多 hack 就能讓一切運(yùn)行起來(lái)。可以看看jQuery 1.7 中的源碼:

  1. // Expose jQuery as an AMD module, but only for AMD loaders that
  2. // understand the issues with loading multiple versions of jQuery
  3. // in a page that all might call define(). The loader will indicate
  4. // they have special allowances for multiple jQuery versions by
  5. // specifying define.amd.jQuery = true. Register as a named module,
  6. // since jQuery can be concatenated with other files that may use define,
  7. // but not use a proper concatenation script that understands anonymous
  8. // AMD modules. A named AMD is safest and most robust way to register.
  9. // Lowercase jquery is used because AMD module names are derived from
  10. // file names, and jQuery is normally delivered in a lowercase file name.
  11. if ( typeof define === "function" && define.amd && define.amd.jQuery ) {
  12. define( "jquery", [], function () { return jQuery; } );
  13. }

其工作的原理是,所使用的腳本加載器通過(guò)指定一個(gè)屬性,即 define.amd.jQuery 為 true,來(lái)標(biāo)明自己可以支持多個(gè) jQuery 版本。如果有興趣了解特定的實(shí)現(xiàn)細(xì)節(jié)的話(huà),我們可以將 jQuery 注冊(cè)為一個(gè)具名模塊,因?yàn)榭赡軙?huì)有這樣的風(fēng)險(xiǎn),即它可能被與其它使用了 AMD 的 define() 方法的文件拼合在一起,而沒(méi)有使用一個(gè)合適的、理解匿名 AMD 模塊定義的拼合腳本。

高版本的jQuery (1.11.1) 去掉了define.amd.jQuery判斷:

  1. if ( typeof define === "function" && define.amd ) {
  2. define( "jquery", [], function() {
  3. return jQuery;
  4. });
  5. }

Require.js中使用jQuery

Require.js中使用jQuery非常方便,簡(jiǎn)單配置就可以了,例如:

  1. // 簡(jiǎn)單的配置
  2. require.config({
  3.  
  4. // RequireJS 通過(guò)一個(gè)相對(duì)的路徑 baseUrl來(lái)加載所有代碼。baseUrl通常被設(shè)置成data-main屬性指定腳本的同級(jí)目錄。
  5. baseUrl: "./js",
  6.  
  7. // 第三方腳本模塊的別名,jquery比libs/jquery-1.11.1.min.js簡(jiǎn)潔明了;
  8. paths: {
  9.  
  10. "jquery": "libs/jquery-1.11.1.min.js"
  11.  
  12. }
  13.  
  14. });
  15.  
  16. // 開(kāi)始使用jQuery 模塊
  17. require(["jquery"], function ($) {
  18.  
  19. //你的代碼
  20. //這里直接可以使用jquery的方法,比如:$( "#result" ).html( "Hello World!" );
  21.  
  22. });

Require.js中使用jQuery 插件

雖然jQuery的支持AMD的API, 這并不意味著jQuery插件也是和AMD兼容的。

一般的jQuery 插件格式:

  1. (function ($) {
  2. $.fn.m??yPlugin = function () {
  3. //你自己的插件代碼
  4. };
  5. })(jQuery);

不過(guò)我們稍微修改一下就可以使用Require.js加載一個(gè)jQuery插件:

  1. ;(function (factory) {
  2. if (typeof define === "function" && define.amd) {
  3. // AMD模式
  4. define([ "jquery" ], factory);
  5. } else {
  6. // 全局模式
  7. factory(jQuery);
  8. }
  9. }(function ($) {
  10. $.fn.jqueryPlugin = function () {
  11. //插件代碼
  12. };
  13. }));

Require.js中使用jQuery UI組件

Require.js中使用jQuery UI組件也類(lèi)似的,只要改造一下jQuery Widget Factory 代碼就可以了,并且感覺(jué)jQuery UI的依賴(lài)關(guān)系加載就可以了。例如:

  1. ;(function (widgetFactory) {
  2.  
  3. if (typeof define === "function" && define.amd) {
  4. // AMD模式
  5. define("jquery.ui.widget", ["jquery"], function () {
  6.  
  7. widgetFactory(window.jQuery);
  8.  
  9. });
  10. } else {
  11. // 全局模式
  12. widgetFactory(window.jQuery);
  13. }
  14. }
  15. (function ($, undefined) {
  16.  
  17. // jQuery Widget Factory 代碼
  18.  
  19. }));

感謝,huugle在jQuery插件開(kāi)發(fā)入門(mén)留言,不然也不會(huì)專(zhuān)門(mén)整理這個(gè)文章。

本站僅提供存儲(chǔ)服務(wù),所有內(nèi)容均由用戶(hù)發(fā)布,如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請(qǐng)點(diǎn)擊舉報(bào)。
打開(kāi)APP,閱讀全文并永久保存 查看更多類(lèi)似文章
猜你喜歡
類(lèi)似文章
RequireJS和AMD規(guī)范
詳解JavaScript模塊化開(kāi)發(fā)
RequireJS 2.0 正式發(fā)布
使用require.js編寫(xiě)模塊化JS
js模塊化歷程
RequireJS入門(mén)(一)
更多類(lèi)似文章 >>
生活服務(wù)
分享 收藏 導(dǎo)長(zhǎng)圖 關(guān)注 下載文章
綁定賬號(hào)成功
后續(xù)可登錄賬號(hào)暢享VIP特權(quán)!
如果VIP功能使用有故障,
可點(diǎn)擊這里聯(lián)系客服!

聯(lián)系客服