Throughout this book, we have seen many jQuery methods that take functions as parameters. Our examples have thus created, called, and passed around functions time and again. While usually we can do this with only a cursory understanding of the inner JavaScript mechanics at work, at times side effects of our actions can seem strange if we do not have knowledge of the language features. In this appendix, we will study one of the more esoteric (yet prevalent) function-based constructs called closures.
Our discussion will involve many small code examples, with which we will want to print out a set of messages. Rather than use a browser-specific logging mechanism (like Firefox's console.log()
), or create a series of alert()
dialogs, we will use a small plugin method:
jQuery.fn.print = function(message) { return this.each(function() { $('<div class="result" />') .text(String(message)) .appendTo($(this).find('.results')); }); };
With this method defined, we can call $('#example').print('hello')
to add the message "hello" within <div id="example">
.