使用jQuery在对象中缓存选择器的简单方法
当使用像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('Youhaveclickedafeaturedelement');
});
jQuery('#another-element').on('mouseout',function(){
jQuery(this).slideUp();
});
});
也许你已经注意到，ID‘some-selector'和‘another-element'在上面的代码片段中被提到了两次。通过把这些选择器保存到变量里，可以使他们能被复用，并且避免了重复选择操作。
当你开始在你的jQuery代码里积攒出各种各样的选择器时，你就能领会到在对象中缓存选择器–以键值对的形式–是多么美好。这使得你更容易在脚本中的任何地方访问它们，并且维护这些选择器也是轻而易举的事。
缓存选择器后，改进过的代码会像这样,
varsomeNamespace_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('Youhaveclickedafeaturedelement');
});
someNamespace_Dom.anotherElement.on('mouseout',function(){
jQuery(this).slideUp();
});
});
由于选择器已经被缓存到变量中，DOM树不再需要被重复遍历来寻找被操作的元素。‘someNamespace_Dom'对象可以被用来添加更多键值对，使得维护工作很轻松。