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

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

讓我們看一個例子,

1. jQuery(document).ready(function() { 
2. jQuery('#some-selector').on('hover', function() { 
3. jQuery(this).fadeOut('slow').delay(400).fadeIn(); 
4. console.log(jQuery(this).text()); 
5. }); 
6.  
7. jQuery('#another-element').on('hover', function() { 
8. jQuery(this).slideUp(); 
9. }); 
10.  
11. jQuery('#some-selector').on('click', function() { 
12. alert('You have clicked a featured element'); 
13. }); 
14.  
15. jQuery('#another-element').on('mouseout', function() { 
16. jQuery(this).slideUp(); 
17. }); 
18. }); 

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

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

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

1. var someNamespace_Dom = { 
2. someSelector : 'jQuery("#some-selector")', 
3. anotherElement: 'jQuery("#another-element")', 
4. }; 
5.  
6. jQuery(document).ready(function() { 
7. someNamespace_Dom.someSelector.on('hover', function() { 
8. jQuery(this).fadeOut('slow').delay(400).fadeIn(); 
9. console.log(jQuery(this).text()); 
10. }); 
11. someNamespace_Dom.anotherElement.on('hover', function() { 
12. jQuery(this).slideUp(); 
13. }); 
14. someNamespace_Dom.someSelector.on('click', function() { 
15. alert('You have clicked a featured element'); 
16. }); 
17. someNamespace_Dom.anotherElement.on('mouseout', function() { 
18. jQuery(this).slideUp(); 
19. }); 
20. }); 

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