[jQuery] Caching jQuery selections in an object

Caching jQuery selections in an object

 

 

Before

 

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

});

});

 

After

 

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