JQuery_ Novice to Ninja - Earle Castledine [137]
load: function( url, params, callback ){
// If the second parameter is a function
if ( jQuery.isFunction( params ) ){
// We assume that it's the callback
callback = params;
params = null;
The params parameter is supposed to be an object filled with various settings. But if we detect that it’s actually a function, we assign the function to the callback variable and clear the params variable. It’s a cool trick and a good way to make your plugins feel more jQuery-ish.
Let’s modify our highlightOnce plugin to use this callback detection trick:
chapter_09/05_jquery_style_callbacks/jquery.highlightonce.js (excerpt)
$.fn.highlightOnce = function(options, callback) {
if ($.isFunction(options)) {
callback = options;
options = null;
}
options = $.extend($.fn.highlightOnce.defaults,options);
return this.each(function() {
// Do something to each item
$(this)
.data('original-color', $(this).css('background-color'))
.css('background-color', options.color)
.one('mouseenter', function() {
$(this).css('background-color', '');
$.isFunction(callback) && callback();
});
});
};
Advanced Topics
Eventually the thrill of creating plugins will wear off a smidgen, and you’ll start to wonder if there are any other gems hidden in jQuery’s underbelly. And you’d be right to wonder. In addition to the fantastic plugin architecture we’ve just explored, jQuery provides a mechanism for extending and overwriting its core functionality, and a flexible event system for defining and fine-tuning how your components respond to your users—and to other components.
Extending jQuery
Plugins are not the only jQuery mechanisms for code reuse and extensibility; at your disposal is a system to add plugin-like functionality, as well as customize and override elements of the core jQuery system on the fly. If you have a chunk of code you’d like to execute in a native jQuery fashion, you can extend jQuery with your new functionality without creating a plugin, directly from inside your script. This way you can fine-tune your code to more closely fit the jQuery feel, and fine-tune jQuery to suit your exact requirements.
Adding Methods to jQuery
Sometimes sections of the code you’re writing are such a pivotal part of your application that you find yourself using them over and over again. When this happens, you may have found a candidate for extending jQuery. Hidden away in the plugins section of the jQuery core library, the extend method is normally the domain of the plugin developer. But don’t let that stop you!
jQuery.fn.extend(), or $.fn.extend(), accepts an object that allows us to provide a new set of methods to extend jQuery—adding new actions that can be performed on jQuery selections. This is closely linked to jQuery.extend(), which extends the jQuery object itself. The net result is exactly the same as the plugins we wrote earlier. Generally you’ll use the extend method when you have a group of small related methods you want to add, or when you want to override some existing functionality (we’ll look at that shortly).
So let’s take a look at some code we’ve already created and see how it evolves using extend. Back in Chapter 8 we looked at sorting lists:
var SORTER = {};
SORTER.sort = function(which) {
// Sort the selected list
}
Having to call our widgets like this lacks that jQuery feel. So we’ll convert the reverse method to integrate it more closely with jQuery, using extend:
chapter_09/06_extending_jquery/script.js (excerpt)
$.fn.extend({
sorter: function() {
return this.each(function() {
var sorted = $(this).children('li').sort(function(a,b) {
// Find the list items and sort them
return $(a).text().toLowerCase() >
↵$(b).text().toLowerCase() ? 1 : -1;
});
$(this).append(sorted);
});
}
});
Inside the new sorter and reverser methods, we return the results of running the functions from our original example against each member of the selection on which we called the action. This return structure allows us to use the action in a chain:
chapter_09/06_extending_jquery/script.js