jeremyckahn/CacheyCache.html

## CacheyCache.html
<!DOCTYPE html>

<html lang="en">
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>index</title>
        <meta name="generator" content="TextMate http://macromates.com/">
        <meta name="author" content="arcus">
        <!-- Date: 2010-08-04 -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript" charset="utf-8">
                $.noConflict();

                // Cache Holder
                var cachey_cache = {},
                	$ = function(sel, context) {

						if (!sel){
							return jQuery;
						}

                        if(sel instanceof Function || /^[^<]*(<[\w\W]+>)[^>]*$|/.exec(sel)[1]) {
                        	return jQuery(sel, context);
                        }

                        var selAndContext = sel + (context || '');


                        if (cachey_cache[selAndContext]) {
                        	// If selector exists, return the cached version.
                            return cachey_cache[selAndContext];
                        } else {
                        	// Otherwise return the selected object and add it to the cache holder.
                            return cachey_cache[selAndContext] = jQuery(sel, context);
                        }
                };

				// Attach everything in the jQuery.fn namespace
				for(k in jQuery) {
 					$[k] = jQuery[k];
				}


                // Testing Code
                $(function() {
					var lisToMake = 5000;

                    console.log($("#test").html());
                    console.log($("#test").html()); // This selection will be cached

					$('<button>')
						.html('Select with jQuery()')
						.click(function(){
							var start = new Date();

							for (var i = 0; i < lisToMake; i++){
								jQuery('.li' + i).css({background : 'red'});
							}

							alert(new Date() - start)
						})
						.appendTo('body');

					$('<button>')
						.html('Select with $()')
						.click(function(){
							var start = new Date();

							for (var i = 0; i < lisToMake; i++){
								$('.li' + i).css({background : 'lime'});
							}

							alert(new Date() - start)
						})
						.appendTo('body');

					$('<button>', { value : 'arguments', name : 'work'})
						.click(function(){
							var ul, li, i;

							ul = $('<ul>').appendTo('body');

							for (i = 0; i < lisToMake; i++){
								$('<li>', { class : 'li' + i})
									.html(i.toString())
									.appendTo('body ul')
							}
						})
						.html('Make a big list!').appendTo('body')


                });
        </script>
</head>
<body>

<div id="test">hello world</div>

</body>
</html>
	<!DOCTYPE html>

	<html lang="en">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>index</title>
	<meta name="generator" content="TextMate http://macromates.com/">
	<meta name="author" content="arcus">
	<!-- Date: 2010-08-04 -->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" charset="utf-8">
	$.noConflict();

	// Cache Holder
	var cachey_cache = {},
	$ = function(sel, context) {

	if (!sel){
	return jQuery;
	}

	if(sel instanceof Function \|\| /^[^<](<[\w\W]+>)[^>]$\|/.exec(sel)[1]) {
	return jQuery(sel, context);
	}

	var selAndContext = sel + (context \|\| '');


	if (cachey_cache[selAndContext]) {
	// If selector exists, return the cached version.
	return cachey_cache[selAndContext];
	} else {
	// Otherwise return the selected object and add it to the cache holder.
	return cachey_cache[selAndContext] = jQuery(sel, context);
	}
	};

	// Attach everything in the jQuery.fn namespace
	for(k in jQuery) {
	$[k] = jQuery[k];
	}


	// Testing Code
	$(function() {
	var lisToMake = 5000;

	console.log($("#test").html());
	console.log($("#test").html()); // This selection will be cached

	$('<button>')
	.html('Select with jQuery()')
	.click(function(){
	var start = new Date();

	for (var i = 0; i < lisToMake; i++){
	jQuery('.li' + i).css({background : 'red'});
	}

	alert(new Date() - start)
	})
	.appendTo('body');

	$('<button>')
	.html('Select with $()')
	.click(function(){
	var start = new Date();

	for (var i = 0; i < lisToMake; i++){
	$('.li' + i).css({background : 'lime'});
	}

	alert(new Date() - start)
	})
	.appendTo('body');

	$('<button>', { value : 'arguments', name : 'work'})
	.click(function(){
	var ul, li, i;

	ul = $('<ul>').appendTo('body');

	for (i = 0; i < lisToMake; i++){
	$('<li>', { class : 'li' + i})
	.html(i.toString())
	.appendTo('body ul')
	}
	})
	.html('Make a big list!').appendTo('body')



	});
	</script>
	</head>
	<body>

	<div id="test">hello world</div>

	</body>
	</html>