使用jQuery在對(duì)象中緩存選擇器的簡(jiǎn)單方法

更新時(shí)間：2015年06月30日 10:00:19 投稿：goldensun

這篇文章主要介紹了使用jQuery在對(duì)象中緩存選擇器的簡(jiǎn)單方法,jQuery是最知名的JavaScript庫(kù),需要的朋友可以參考下

當(dāng)使用像jQuery這樣的庫(kù)時(shí)，開(kāi)發(fā)者通常會(huì)使用選擇器來(lái)訪問(wèn)和操作DOM中的元素。當(dāng)一個(gè)選擇在頁(yè)面上被反復(fù)的訪問(wèn)時(shí)，把它緩存起來(lái)以獲得更好的性能是個(gè)不錯(cuò)的想法。

讓我們看一個(gè)例子,

jQuery(document).ready(function() {
  jQuery('#some-selector').on('hover', function() {
    jQuery(this).fadeOut('slow').delay(400).fadeIn();
    console.log(jQuery(this).text());
  });
 
  jQuery('#another-element').on('hover', function() {
    jQuery(this).slideUp();
  });
 
  jQuery('#some-selector').on('click', function() {
    alert('You have clicked a featured element');
  });
 
  jQuery('#another-element').on('mouseout', function() {
    jQuery(this).slideUp();
  });
});

也許你已經(jīng)注意到，ID ‘some-selector' 和 ‘a(chǎn)nother-element' 在上面的代碼片段中被提到了兩次。通過(guò)把這些選擇器保存到變量里，可以使他們能被復(fù)用，并且避免了重復(fù)選擇操作。

當(dāng)你開(kāi)始在你的jQuery代碼里積攢出各種各樣的選擇器時(shí)，你就能領(lǐng)會(huì)到在對(duì)象中緩存選擇器 – 以鍵值對(duì)的形式 – 是多么美好。這使得你更容易在腳本中的任何地方訪問(wèn)它們，并且維護(hù)這些選擇器也是輕而易舉的事。

緩存選擇器后，改進(jìn)過(guò)的代碼會(huì)像這樣,

var someNamespace_Dom = {
  someSelector : 'jQuery("#some-selector")',
  anotherElement: 'jQuery("#another-element")',
};
 
jQuery(document).ready(function() {
  someNamespace_Dom.someSelector.on('hover', function() {
    jQuery(this).fadeOut('slow').delay(400).fadeIn();
    console.log(jQuery(this).text());
  });
  someNamespace_Dom.anotherElement.on('hover', function() {
    jQuery(this).slideUp();
  });
  someNamespace_Dom.someSelector.on('click', function() {
    alert('You have clicked a featured element');
  });
  someNamespace_Dom.anotherElement.on('mouseout', function() {
    jQuery(this).slideUp();
  });
});

由于選擇器已經(jīng)被緩存到變量中，DOM 樹(shù)不再需要被重復(fù)遍歷來(lái)尋找被操作的元素?！畇omeNamespace_Dom' 對(duì)象可以被用來(lái)添加更多鍵值對(duì)，使得維護(hù)工作很輕松。

您可能感興趣的文章:

相關(guān)文章

Raphael一個(gè)用于在網(wǎng)頁(yè)中繪制矢量圖形的Javascript庫(kù)
Raphael是一個(gè)用于在網(wǎng)頁(yè)中繪制矢量圖形的Javascript庫(kù),它使用 SVG W3C 推薦標(biāo)準(zhǔn)和 VML 作為創(chuàng)建圖形的基礎(chǔ)，你可以通過(guò) JavaScript 操作 DOM 來(lái)輕松創(chuàng)建出各種復(fù)雜的柱狀圖、餅圖、曲線圖等各種圖表,接下來(lái)詳細(xì)介紹，感興趣的朋友可以了解下哦
2013-01-01
jquery引用方法時(shí)傳遞參數(shù)原理分析
只需將js引用并設(shè)置下變量就行了，但一直沒(méi)搞明白原理，這次弄清了如何傳遞、設(shè)置多個(gè)（很多個(gè)）參數(shù)，如果你也不明白可以看看
2014-10-10
把html頁(yè)面的部分內(nèi)容保存成新的html文件的jquery代碼
把html頁(yè)面的部分內(nèi)容保存成新的html文件，用到了jquery的獲取指定id的內(nèi)容。然后保存代碼。
2009-11-11
jQuery仿京東商城樓梯式導(dǎo)航定位菜單
這篇文章主要介紹了jQuery仿京東商城樓梯式導(dǎo)航定位菜單的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-07-07
3種不同的ContextMenu右鍵菜單實(shí)現(xiàn)代碼
本文給大家分享3種不同的ContextMenu右鍵菜單實(shí)現(xiàn)代碼的相關(guān)資料,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2016-11-11
使用jquery組件qrcode生成二維碼及應(yīng)用指南
這篇文章主要介紹了使用jquery組件qrcode生成二維碼及應(yīng)用指南,非常全面實(shí)用，需要的朋友可以參考下
2015-02-02
利用jQuery的deferred對(duì)象實(shí)現(xiàn)異步按順序加載JS文件
如果你現(xiàn)在對(duì)jQuery中的deferred還不了解,jQuery的deferred對(duì)象詳解一文接下來(lái)介紹deferred對(duì)象如何實(shí)現(xiàn)異步順序加載JS文件，感興趣的你可以參考下哈
2013-03-03
jQuery中的通配符選擇器使用總結(jié)
通配符在控制input標(biāo)簽時(shí)相當(dāng)好用,這里簡(jiǎn)單進(jìn)行了jQuery中的通配符選擇器使用總結(jié),需要的朋友可以參考下
2016-05-05
jQuery EasyUI API 中文文檔 - DataGrid數(shù)據(jù)表格
jQuery EasyUI API 中文文檔 - DataGrid數(shù)據(jù)表格使用說(shuō)明，需要的朋友可以參考下。
2011-11-11
基于jQuery和hwSlider實(shí)現(xiàn)內(nèi)容左右滑動(dòng)切換效果附源碼下載（一）
本文結(jié)合實(shí)例給大家介紹如何實(shí)現(xiàn)內(nèi)容滑動(dòng)切換的效果，包括左右箭頭切換，無(wú)限無(wú)縫滾動(dòng)，圓點(diǎn)按鈕切換，動(dòng)畫(huà)效果，自動(dòng)切換效果，效果非常不錯(cuò)，感興趣的朋友前來(lái)參考實(shí)現(xiàn)代碼
2016-06-06