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' 在上面的代碼片段中被提到了兩次。通過把這些選擇器保存到變量里，可以使他們能被復(fù)用，并且避免了重復(fù)選擇操作。

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

緩存選擇器后，改進(jìn)過的代碼會(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 樹不再需要被重復(fù)遍歷來尋找被操作的元素。‘someNamespace_Dom' 對(duì)象可以被用來添加更多鍵值對(duì)，使得維護(hù)工作很輕松。

您可能感興趣的文章: