DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 使用jQuery在對象中緩存選擇器的簡單方法
使用jQuery在對象中緩存選擇器的簡單方法
編輯:關於JavaScript     

 當使用像jQuery這樣的庫時,開發者通常會使用選擇器來訪問和操作DOM中的元素。當一個選擇在頁面上被反復的訪問時,把它緩存起來以獲得更好的性能是個不錯的想法。

讓我們看一個例子,
 

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

也許你已經注意到,ID ‘some-selector' 和 ‘another-element' 在上面的代碼片段中被提到了兩次。通過把這些選擇器保存到變量裡,可以使他們能被復用,並且避免了重復選擇操作。


當你開始在你的jQuery代碼裡積攢出各種各樣的選擇器時,你就能領會到在對象中緩存選擇器 – 以鍵值對的形式 – 是多麼美好。這使得你更容易在腳本中的任何地方訪問它們,並且維護這些選擇器也是輕而易舉的事。

緩存選擇器後,改進過的代碼會像這樣,
 

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

由於選擇器已經被緩存到變量中,DOM 樹不再需要被重復遍歷來尋找被操作的元素。‘someNamespace_Dom' 對象可以被用來添加更多鍵值對,使得維護工作很輕松。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved