jQuery in Action
212
CHAPTER 7
Extending jQuery with custom plugins
Speaking of those listeners, here's the list of
click
event listeners that we need
to attach to the various elements:
Clicking a thumbnail photo will cause its full-sized version to be displayed.
Clicking the full-sized photo will cause the next photo to be displayed.
Clicking the element defined as the previous control will cause the previ-
ous image to be displayed.
ous image to be displayed.
Clicking the next control will cause the next image to be displayed.
Clicking the first control will cause the first image in the list to be dis-
played.
played.
Clicking the last control will cause the last image in the list to be displayed.
Looking over this list, we immediately note that all of these listeners have some-
thing in common; they all need to cause the full-sized photo of one of the thumb-
nail images to be displayed. And being the good and clever coders that we are, we
want to factor out that common processing into a function so that we don't need
to repeat code over and over again.
thing in common; they all need to cause the full-sized photo of one of the thumb-
nail images to be displayed. And being the good and clever coders that we are, we
want to factor out that common processing into a function so that we don't need
to repeat code over and over again.
But how?
If we were writing normal on-page JavaScript, we could define a top-level
If we were writing normal on-page JavaScript, we could define a top-level
function. If we were writing object-oriented JavaScript, we might define a method
on a JavaScript object. But we're writing a jQuery plugin; where should we define
implementation functions?
on a JavaScript object. But we're writing a jQuery plugin; where should we define
implementation functions?
We don't want to infringe on either the global or the
$
namespace for a func-
tion that should only be called internally from our plugin code, so what can we
do? We could define the function as a method of the plugin function itself (similar
to what we did in the date formatter of listing 7.2); as first-class JavaScript objects,
even functions can possess methods. But there's an even easier way.
do? We could define the function as a method of the plugin function itself (similar
to what we did in the date formatter of listing 7.2); as first-class JavaScript objects,
even functions can possess methods. But there's an even easier way.
Recall that our plugin function is defined within the body of another func-
tion--the function that we use to ensure that the
$
means
jQuery
. Therefore any
local variables defined within that outer function become part of the closure
defined by our plugin function. What if we define the implementation function,
which we'll name
defined by our plugin function. What if we define the implementation function,
which we'll name
showPhoto()
, as a local variable in the outer function?
That solves our issue nicely! Our
showPhoto()
function will be available to the
plugin function as part of its closure, but because it's declared locally to the outer
function, it can't be seen from outside that function and has no opportunity to
pollute any other namespace.
function, it can't be seen from outside that function and has no opportunity to
pollute any other namespace.