DOM Cache for Application (JavaScript). Requires: jQuery and https://raw.github.com/say2joe/jquery.cache/master/jquery.cache.js

DOMCache.js

// Don't forget to include:
// https://raw.github.com/say2joe/jquery.cache/master/jquery.cache.js

var myApp = {
	appInfo: {
		description: "Caching paradigm for JavaScript Applications",
		title: "jQuery App DOM Cache"
	},
	appProperty: (function(j){
			return (j = jQuery.noConflict());
	})(jQuery),
	appMethod: function(){
		var $ = jQuery;
		$.cache("imgs").each(function(){
			this.alt = "HTML IMG Alt Attribute: Accessibility";
		});
		$.cache("hrefs").each(function(){
			this.title = "HTML Title Attribute: Tooltip";
		});
		/* Without using jquery.cache.js:
		this.DOM.$imgs.each(function(){
			this.alt = "HTML IMG Alt Attribute: Accessibility";
		});
		this.DOM.$hrefs.each(function(){
			this.title = "HTML Title Attribute: Tooltip";
		}); */
	},
	appAlert: function(event){
		alert(event.target);
	},
	bindEvents: function(){
		jQuery.cache("body").on("click",this.appAlert);
		return this;
	},
	init: function(){
		jQuery.cache("body","body");
		jQuery.cache("imgs","img");
		jQuery.cache("hrefs","a");
		/* Without using jquery.cache.js:
		this.DOM = {
			$body: jQuery("body"),
			$imgs: jQuery("img"),
			$hrefs: jQuery("a")
		}; */
		return this.bindEvents();
	}
};

function displayUsage(){
	/*myApp.DOM.$body*/ jQuery.cache("body").html(" \
		By doing all DOM selector lookups initially, you can avoid unnecessary \
		selectors throughout your code base AND not have to traverse the DOM \
		when executing some business or UI logic after page load. \
		Useful for persistent DOM structures -- not dynamically loaded elements. \
	");
}

jQuery(function(){
	jQuery.when(myApp.init()).done(displayUsage);
});

test

lagi