[jQuery] Improving upon the jQuery Plugin Template
I appreciate the effort that Mike Alsup put into his plugin template.
http://www.learningjquery.com/2007/10/a-plugin-development-pattern
The example is crafted to be simple and it is effective for its
purpose. I would like to add additional functionality and I am unsure
how to modify the plugin to support the new feature.
I am interested in how the template can be extended to support a
callable API once the object has been jQueried. Let me explain using
Mike's example as a starting point.
His example demonstrates a hilight plugin that styles a block of HTML
that jQuery matches with its selector pattern. He exposed the format
function in a manner that allows the end developer to make changes to
what "hilight" means. It is exposed in such a way that it is similar
to a static method.
An example of a callable API that I mentioned might be exposing a
method called 'enableEffect(true|false)'. Suppose, the end developer
wants to give his users the option of toggling the formatting on and
off.
How could that function be added to the example and how would it be
called by the developer?
The jQuery tabs plugin demonstrates one approach, but it seems less
efficient. Using Mike's example, highlighting would be added to DOM
objects using:
jQuery('.targets').hilight();
And any external API calls are made through the same interface:
jQuery('.targets').hilight('enableEffect', false);
The tabs plugin accomplishes this by keeping track of whether the
object has been jQueried previously. If it has and the first parameter
is a string, it invokes the method. The methods that are invoked are
added to the new object's prototype. It's a bit awkward.
Is this the preferred way of achieving this? I haven't seen too many
examples of jQuery plugins that, once applied, can be further
manipulated by a callable API.
Ultimately, from the developers perspective, this might be the most
desirable example usage:
var targets = jQuery('.targets').hilight();
targets.enableEffect(false);
or
targets.each(function() {
this.enableEffect(false);
});