當使用像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' 物件可以用來增加更多鍵值對，使得維護工作很輕鬆。
