網(wǎng)站建設(shè)之15個(gè)值得開(kāi)發(fā)人員關(guān)注的jQuery開(kāi)發(fā)技巧和心得
分享 2011.11.24 瀏覽次數(shù):7541次
網(wǎng)站建設(shè)之15個(gè)值得開(kāi)發(fā)人員關(guān)注的jQuery開(kāi)發(fā)技巧和心得
標(biāo)簽:杭州精典網(wǎng)站制作
在這篇文章中,我們將介紹15個(gè)讓你的jQuery更加有效的技巧,大部分關(guān)于性能提升的,希望大家能夠喜歡!
1. 盡量使用最新版本的jQuery類庫(kù)
jQuery項(xiàng)目中使用了大量的創(chuàng)新。最好的方法來(lái)提高性能就是使用最新版本的jQuery。每一個(gè)新的版本都包含了優(yōu)化的bug修復(fù)。對(duì)我們來(lái)說(shuō)唯一要干的就是修改tag,何樂(lè)而不為呢?
我們也可以使用免費(fèi)的CDN服務(wù),例如, Google來(lái)存放jQuery類庫(kù)。
2. 使用簡(jiǎn)單的選擇器
直 到最近,返回DOM元素的方式都是解析選擇器字符串,javascript循環(huán)和內(nèi)建的javascript API例如,getElementbyId(),getElementsByTagName(),getElementsByClassName()三種 方式的整合使用。但是現(xiàn)代瀏覽器都開(kāi)始支持querySelectorAll(),這個(gè)方法能夠理解CSS查詢器,而且能帶來(lái)顯著的性能提升。
然而,我們應(yīng)該避免使用復(fù)雜的選擇器返回元素。更不用說(shuō)很多用戶使用老版本的瀏覽器,強(qiáng)迫jQuery去處理DOM樹(shù)。這個(gè)方式非常慢。
$('li[data-selected="true"] a') // Fancy, but slow $('li.selected a') // Better $('#elem') // Best
選擇id是最快速的方式。如果你需要使用class名稱, 那么你最好帶上tag名稱,這樣會(huì)更快些。特別是在老瀏覽器和移動(dòng)設(shè)備上。
訪問(wèn)DOM是javascript應(yīng)用最慢的方式 ,因此盡量少使用。使用變量去保存選擇器,這樣會(huì)使用cache來(lái)保存。性能更好。
var buttons = $('#navigation a.button'); // Some prefer prefixing their jQuery variables with $: var $buttons = $('#navigation a.button');
另 外一個(gè)值得做的是jQuery給了你很多的額外便利選擇器 ,例如,:visible,:hidden,:animated還有其它,這些不是合法的CSS3選擇器。結(jié)果是你使用這些類庫(kù)就不能有效地利用 querySelectorAll()方法。為了彌補(bǔ)這個(gè)問(wèn)題,你需要先選擇元素,再過(guò)濾,如下:
$('a.button:animated'); // Does not use querySelectorAll() $('a.button').filter(':animated'); // Uses it
3. 數(shù)組方式使用jQuery對(duì)象
運(yùn)行選擇器的結(jié)果是一個(gè)jQuery對(duì)象。然而,jQuery類庫(kù)讓你感覺(jué)你正在使用一個(gè)定義了index和長(zhǎng)度的數(shù)組。
// Selecting all the navigation buttons: var buttons = $('#navigation a.button'); // We can loop though the collection: for(var i=0;i
如果性能是你關(guān)注的,那么使用簡(jiǎn)單for或者while循環(huán)來(lái)處理,而不是$.each(),這樣能使你的代碼更快。
檢查長(zhǎng)度也是一個(gè)檢查你的collection是否含有元素的方式。
if(buttons){ // This is always true // Do something } if(buttons.length){ // True only if buttons contains elements // Do something }
4. 選擇器屬性
jQuery提供了一個(gè)屬性,這個(gè)屬性顯示了用來(lái)做鏈?zhǔn)降倪x擇器。
$('#container li:first-child').selector // #container li:first-child $('#container li').filter(':first-child').selector // #container li.filter(:first-child)
雖然上面的例子針對(duì)同樣的元素,選擇器則完全不一樣。第二個(gè)實(shí)際上是非法的,你不可以使用它來(lái)創(chuàng)建一個(gè)對(duì)象。只能用來(lái)顯示filter方法是用來(lái)縮小collection。
5. 創(chuàng)建一個(gè)空的jQuery對(duì)象
創(chuàng)建一個(gè)新的jQuery空間能極大的減小開(kāi)銷。有時(shí)候,你可能需要?jiǎng)?chuàng)建一個(gè)空的對(duì)象,然后使用add()方法添加對(duì)象。
var container = $([]); container.add(another_element);
這也是quickEach方法的基礎(chǔ),你可以使用這種更快的方式而非each()。
6. 選擇一個(gè)隨機(jī)元素
上面我提到過(guò),jQuery添加它自己的選擇器過(guò)濾。除了類庫(kù),你可以添加自己的過(guò)濾器。只需要添加一個(gè)新的方法到$.expr[':']對(duì)象。一個(gè)非常棒的使用方式是Waldek Mastykarz的博客中提到的:創(chuàng)建一個(gè)用來(lái)返回隨機(jī)元素的選擇器。你可以修改下面代碼:
(function($){ var random = 0; $.expr[':'].random = function(a, i, m, r) { if (i == 0) { random = Math.floor(Math.random() * r.length); } return i == random; }; })(jQuery); // This is how you use it: $('li:random').addClass('glow');
7. 使用CSS Hooks
CSS hooks API是提供開(kāi)發(fā)人員得到和設(shè)置特定的CSS數(shù)值的方法。使用它,你可以隱藏瀏覽器特定的執(zhí)行并且使用一個(gè)統(tǒng)一的界面來(lái)存取特定的屬性。、
$.cssHooks['borderRadius'] = { get: function(elem, computed, extra){ // Depending on the browser, read the value of // -moz-border-radius, -webkit-border-radius or border-radius }, set: function(elem, value){ // Set the appropriate CSS3 property } }; // Use it without worrying which property the browser actually understands: $('#rect').css('borderRadius',5);
更好的在于,人們已經(jīng)創(chuàng)建了一個(gè)支持CSS hooks類庫(kù)
8. 使用自定義的刪除方法
你可能聽(tīng)到過(guò)jQuery的刪除插件,它能夠允許你給你的動(dòng)畫(huà)添加特效。唯一的缺點(diǎn)是你的訪問(wèn)者需要加載另外一個(gè)javascript文件。幸運(yùn)的是,你可以簡(jiǎn)單的從插件拷貝效果,并且添加到j(luò)Query.easing對(duì)象中,如下:
$.easing.easeInOutQuad = function (x, t, b, c, d) { if ((t/=d/2) < 1) return c/2*t*t + b; return -c/2 * ((--t)*(t-2) - 1) + b; }; // To use it: $('#elem').animate({width:200},'slow','easeInOutQuad');
9. $.proxy()
使用callback方法的缺點(diǎn)之一是當(dāng)執(zhí)行類庫(kù)中的方法后,context被設(shè)置到另外一個(gè)元素,例如:
執(zhí)行下面代碼:
$('#panel').fadeIn(function(){ // this points to #panel $('#panel button').click(function(){ // this points to the button $(this).fadeOut(); }); });
你將遇到問(wèn)題,button會(huì)消失,不是panel。使用$.proxy方法,你可以這樣書(shū)寫(xiě)代碼:
$('#panel').fadeIn(function(){ // Using $.proxy to bind this: $('#panel button').click($.proxy(function(){ // this points to #panel $(this).fadeOut(); },this)); });
這樣才正確的執(zhí)行。$.proxy方法接受兩個(gè)參數(shù),你最初的方法,還有context。這里閱讀更多$.proxy in the docs.。
10. 判斷頁(yè)面是否太過(guò)復(fù)雜
一個(gè)非常簡(jiǎn)單的道理,約復(fù)雜的頁(yè)面,加載的速度越慢。你可以使用下面代碼檢查一下你的頁(yè)面內(nèi)容:
console.log( $('*').length );
以上代碼返回的數(shù)值越小,網(wǎng)頁(yè)加載速度越快。你可以考慮通過(guò)刪除無(wú)用多余的元素來(lái)優(yōu)化你的代碼
11. 將你的代碼轉(zhuǎn)化成jQuery插件
如果你要花一定得時(shí)間去開(kāi)發(fā)一段jQuery代碼,那么你可以考慮將代碼變成插件。這將能夠幫助你重用代碼,并且能夠有效的幫助你組織代碼。創(chuàng)建一個(gè)插件代碼如下:
(function($){ $.fn.yourPluginName = function(){ // Your code goes here return this; }; })(jQuery);
你可以在這里閱讀更多開(kāi)發(fā)教程。
12. 設(shè)置全局AJAX為缺省
如果你開(kāi)發(fā)ajax程序的話,你肯定需要有”加載中“之類的顯示告知呼叫中心用戶,ajax正在進(jìn)行,我們可以使用如下代碼統(tǒng)一管理,如下:
// ajaxSetup is useful for setting general defaults: $.ajaxSetup({ url : '/ajax/', dataType : 'json' }); $.ajaxStart(function(){ showIndicator(); disableButtons(); }); $.ajaxComplete(function(){ hideIndicator(); enableButtons(); }); /* // Additional methods you can use: $.ajaxStop(); $.ajaxError(); $.ajaxSuccess(); $.ajaxSend(); */
詳細(xì)你可以查看這篇文章:
- 如何快速創(chuàng)建一個(gè)AJAX的"加載"的圖片效果
- 5個(gè)在線Ajax“加載中”旋轉(zhuǎn)圖標(biāo)生成器工具
13. 在動(dòng)畫(huà)中使用delay()方法
鏈?zhǔn)降膭?dòng)畫(huà)效果是jQuery的強(qiáng)大之處。但是有一個(gè)忽略了的細(xì)節(jié)就是你可以在動(dòng)畫(huà)之間加上delays,如下:
// This is wrong: $('#elem').animate({width:200},function(){ setTimeout(function(){ $('#elem').animate({marginTop:100}); },2000); }); // Do it like this: $('#elem').animate({width:200}).delay(2000).animate({marginTop:100});
jQuery動(dòng)畫(huà)幫了我們大忙,否則我們得自己處理一堆的細(xì)節(jié),設(shè)置timtout,處理屬性值,跟蹤動(dòng)畫(huà)變化等等。
大家可以參考這個(gè)文章:jQuery animations
14. 合理利用HTML5的Data屬性
HTML5的data屬性可以幫助我們插入數(shù)據(jù)。特別合適前后端的數(shù)據(jù)交換。jQuery近來(lái)發(fā)布的data()方法,可以有效的利用HTML5的屬性,來(lái)自動(dòng)得到數(shù)據(jù)。下面是個(gè)例子:
為了存取數(shù)據(jù)你需要調(diào)用如下代碼:
$("#d1").data("role"); // "page" $("#d1").data("lastValue"); // 43 $("#d1").data("hidden"); // true; $("#d1").data("options").name; // "John";
如果你想看看實(shí)際的例子,請(qǐng)參考這篇教程:使用HTML5和jQuery插件Quicksand實(shí)現(xiàn)一個(gè)超酷的星際爭(zhēng)霸2兵種分類展示效果
data()的jQuery文檔:data() in the jQuery docs
15. 本地存儲(chǔ)和jQuery
本地存儲(chǔ)是一個(gè)超級(jí)簡(jiǎn)單的API。簡(jiǎn)單的添加你的數(shù)據(jù)到localStorage全局屬性中:
localStorage.someData = "This is going to be saved across page refreshes and browser restarts";
但是對(duì)于老的瀏覽器來(lái)說(shuō),這個(gè)不是個(gè)好消息。因?yàn)樗麄儾恢С?。但是我們可以使用jQuery的插件來(lái)提供支持一旦本地存儲(chǔ)不能用的話。這種方式可以使得本地存儲(chǔ)功能正常工作。
以上是我們介紹的15個(gè)jQuery的開(kāi)發(fā)技巧,如果你有更多的技巧和評(píng)論,請(qǐng)?jiān)谙旅娼o我們留言, 謝謝支持!
更多杭州網(wǎng)站建設(shè)資訊:畢業(yè)選擇起步型企業(yè)的原因是什么
-
杭州網(wǎng)站設(shè)計(jì)公司:品牌網(wǎng)站開(kāi)發(fā)助力企業(yè)成長(zhǎng)
日期:2024-12-20瀏覽次數(shù):819次
-
杭州網(wǎng)站建設(shè)公司:商城網(wǎng)站建設(shè)的六大關(guān)鍵步驟
日期:2024-12-18瀏覽次數(shù):860次
-
杭州網(wǎng)站制作:醫(yī)院網(wǎng)站設(shè)計(jì)與域名備案的復(fù)雜性探討
日期:2024-12-18瀏覽次數(shù):853次
-
杭州網(wǎng)站制作公司:打造安全可靠的醫(yī)院網(wǎng)站
日期:2024-12-11瀏覽次數(shù):1017次
-
杭州網(wǎng)站設(shè)計(jì)公司:數(shù)據(jù)庫(kù)在高端網(wǎng)站制作中的關(guān)鍵作用
日期:2024-12-11瀏覽次數(shù):989次
相關(guān)新聞
整合同類新聞,相關(guān)新聞一手掌握
-
文娛APP開(kāi)發(fā)功能
日期:2021-03-01瀏覽次數(shù):1779次
最新新聞
與互聯(lián)網(wǎng)同行,實(shí)時(shí)掌握網(wǎng)建行業(yè)最新動(dòng)態(tài)
-
帷拓科技完成對(duì)泰爾茂醫(yī)療產(chǎn)品(杭州)有限公司網(wǎng)站開(kāi)發(fā)項(xiàng)目
日期:2010-04-01瀏覽次數(shù):7773次
-
手機(jī)網(wǎng)站解決方案
日期:2017-01-03瀏覽次數(shù):4945次
-
湘潭網(wǎng)站優(yōu)化,如何將網(wǎng)站做上百度首頁(yè)
日期:2020-09-15瀏覽次數(shù):2268次
-
杭州網(wǎng)站建設(shè),聚焦點(diǎn)應(yīng)該是什么?
日期:2020-12-09瀏覽次數(shù):4432次
-
淮南app開(kāi)發(fā)的商業(yè)價(jià)值
日期:2021-02-05瀏覽次數(shù):2087次
隨機(jī)新聞
新聞新動(dòng)態(tài),您需要的新聞管家
洞悉市場(chǎng)趨勢(shì)演變讓傳播回歸社會(huì)
免費(fèi)獲取網(wǎng)站建設(shè)與網(wǎng)絡(luò)推廣方案報(bào)價(jià)
-
關(guān)于我們
杭州帷拓科技有限公司,是一家新型的全案網(wǎng)絡(luò)開(kāi)發(fā)公司,作為以互聯(lián)網(wǎng)高端網(wǎng)站建設(shè)、APP開(kāi)發(fā)、小程序開(kāi)發(fā)為核心的專業(yè)網(wǎng)絡(luò)技術(shù)服務(wù)供應(yīng)商,帷拓科技致力于全面分析市場(chǎng)環(huán)境、衡量與預(yù)測(cè)市場(chǎng)需求、整合區(qū)別于行業(yè)競(jìng)爭(zhēng)對(duì)手的絕對(duì)優(yōu)勢(shì),結(jié)合品牌理念深度挖掘項(xiàng)目?jī)?yōu)勢(shì)和產(chǎn)品價(jià)值,提升客戶品牌認(rèn)知、認(rèn)可度。
-
我們的客戶
帷拓科技?xì)v經(jīng)十年沉淀,與國(guó)內(nèi)外上千家客戶達(dá)成合作關(guān)系,其中穩(wěn)定合作的公司有:浙江華為、浙江移動(dòng)、浙江5G產(chǎn)業(yè)聯(lián)盟、浙江省社科院、綠城足球俱樂(lè)部、娃哈哈雙語(yǔ)學(xué)校、健康中國(guó)杭州峰會(huì)、科雷機(jī)電等,帷拓科技始終堅(jiān)持“帷有專業(yè),才能拓展無(wú)限”的服務(wù)理念,堅(jiān)持“認(rèn)真堅(jiān)持細(xì)節(jié)”的優(yōu)質(zhì)服務(wù)理念,不斷完善自身,成就企業(yè),最終實(shí)現(xiàn)共贏。
-
我們的業(yè)務(wù)
帷拓科技主營(yíng)業(yè)務(wù)范圍包含互聯(lián)網(wǎng)高端網(wǎng)站建設(shè)、APP開(kāi)發(fā)、小程序開(kāi)發(fā)、商城網(wǎng)站建設(shè)、公眾號(hào)運(yùn)營(yíng)以及數(shù)字營(yíng)銷等,涵蓋了服務(wù)、房產(chǎn)、數(shù)碼、服裝、物流貿(mào)易等行業(yè),根據(jù)品牌現(xiàn)狀,為每個(gè)客戶量身定制項(xiàng)目整體服務(wù)方案,以敏銳的市場(chǎng)洞察力、創(chuàng)新的市場(chǎng)策劃能力,全面把握市場(chǎng)變化,為客戶實(shí)現(xiàn)從企業(yè)到消費(fèi)者的價(jià)值轉(zhuǎn)換。