ChocolateChip provides two ways of executing code: $.read() and $(function() {}). These are identical, in that they both execute code as soon as the browser has finished parsing the DOM but before it has visually rendered it to the screen. The advantage here is that you can do things with the document, such as hiding or showing or adding things, before it displays to the user. There is also the $.loadEvent() method waits until the document is completed loaded and output to the screen. This means the user first sees the document load, then sees whatever changes your code makes to the document. In most cases, doing document setup after page load is a bad experience for the end user because they have to wait twice, first for the page to load fully, then for you code to finish executing.

There is also a big difference in how these two methods handle code. In most cases you would pass in your code to $.ready() using an anonymous fuction like this:

$.ready(function() {
	$("#Home").addClass("current");
	$(".button").forEach(function(button) {
	    button.bind("touchstart", function() {
	    	button.addClass("touched");
	    });
	    button.bind("touchend", function() {
	    	button.removeClass("touched");
	    });
	});
});

We could just as well have defined our code outside the $.ready() block and called the functions inside it like this:


var setHomeCurrent = function() {
	$("#Home").addClass("current");
};
var setupButtons = function() {
	$(".button").forEach(function(button) {
		button.bind("touchstart", function() {
			button.addClass("touched");
		});
		button.bind("touchend", function() {
			button.removeClass("touched");
		});
	});
}:
	
$.ready(function() {
    setHomeCurrent();
    setupButtons();
});

The above block works, however, I strongly recomend you put as much code inside the $.ready() block in order to reduce namespace collisions. Putting all your code in the $.ready() block also makes it easier for you so find the code being executing.

The $.loadEvent is excatly like $.ready() or $(function() {}). The only difference is when the code gets executed. As I mentioned above, $.ready() executes code when the browser has finished parsing the document’s nodes. $.loadEvent executes code after the document and all of its resources have been full loaded and rendered to the screen. You can pass in functions to execute, or you can use and anonymous fuction block like $.ready() does to define all your code there. The $.loadEvent() chain loads your functions on to the regular window.onload event. By default you can only pass one fuction to the onload event. $.laodEvent gets around this by putting all the functions into an array and then executing the functions in the array sequentially. If you have several $.loadEvent() declarations in your code, the browser will execute them in the order in which they reside in the code being parsed. Here’s an example of the two ways to use $.loadEvent():


var setHomeCurrent = function() {
	$("#Home").addClass("current");
};
var setupButtons = function() {
	$(".button").forEach(function(button) {
		button.bind("touchstart", function() {
			button.addClass("touched");
		});
		button.bind("touchend", function() {
			button.removeClass("touched");
		});
	});
}:
	
$.loadEvent(function() {
    setHomeCurrent();
    setupButtons();
});

// Or you could code it this way:

$.loadEvent(function() {
	$("#Home").addClass("current");
	$(".button").forEach(function(button) {
	    button.bind("touchstart", function() {
	    	button.addClass("touched");
	    });
	    button.bind("touchend", function() {
	    	button.removeClass("touched");
	    });
	});
});

Like jQuery and Zepto, you can also user $(document.ready({}):

var doSomething = function() {
   console.log("This is doing something. Cool, huh?");
}
$(document).read(function() {
	doSomething();
});

You can also use the simpler and more convenient format of a ChocolateChip function:

var doSomething = function() {
   console.log("This is doing something. Cool, huh?");
}
$(function() {
   doSomething();
});
Advertisements