Creating Event-Driven Plugins - J Query

You want your plugin to be controllable from the outside. One should be able to “tell”the plugin to do something at any time. There could be many instances (calls) of aplugin, but our action should only be executed in the context we provide.


One way to do this is indeed using events.When a plugin is called, it binds functions on each matched element that once triggered,and it will perform the desired actions.
As a possible side solution, each time the plugin is called, instead of respecting the chaining, it could return an object that contains the bindings and allows external manipulation(use the plugin from Recipe 9.2).
This allows you to call the plugin many times on the same element without messing up the events.


An example

We’ll now create a simple slide show plugin. I’ll base this plugin on an existing plugin of mine called jQuery.SerialScroll.§ I first thought of this approach when coding this plugin, and, I must say, it worked pretty well.
We’ll name our plugin slideshow. It will receive an <img>element and an array of URLs,and it will cycle the images. It will allow previous and next movement, jumping to acertain image, and also auto cycling.
Let’s start with the basics:

Now we’ll add a few local functions that will allow us to move to different images (URLs) in the collection:

We can now expose this functionality with events:

What about autocycling? Let’s add a few more functions:

Here are the events:

We now need to add a few lines to show() to keep auto cycling if needed:

And that’s it! We now have a full slideshow with prev, next, and autocycling.In order to make the example clear, I made this plugin completely dependent on the outside manipulation.
Here’s a model implementation:

What happens if an element already has one of these events?

It could happen (although it’s strange) that the #slideshow element could already havea binding on an event by the name of prev, next, goto, start, or stop.

How can I allow others to clean up the added event handlers?

Because I didn’t expose the bound functions, any other external code won’t be able to un bind them.
In most cases, you could simply unbind the whole events from the element, something like this:

If you need a cautious unbinding or if you simply want to unbind all related events,check Recipe (Removing a Whole Set of Event Handlers).

What’s the difference with other approaches?

There are other existing techniques to allow external manipulation. I’ll compare some:
This pattern is used by jQuery UI (among others).It consists of executing actions when the plugin is passed a string as the first argument,for example:

This is a little shorter than using events, but the whole approach requires you to save all the needed data (the current index in our case) in a public way, so it can be retrieved after ward. People who use this pattern also tend to use data() to store the variables.
If you use events, you can simply use local variables because your event handlers have access to the plugin’s local scope.
This pattern is used by the validate plugin from JörnZaefferer (and others too).Depending on how it is coded, the object’s methods could be able to access local variables.To do so, it must use closures,‖which are n’t a nice thing to abuse. Also, you need to store this object somewhere (globally). This also requires you to do pseudoobject-oriented code (which you may like or not).
You could create some kind of hybrid between this approach and the one I explained.Instead of binding the events (prev, next, etc.) to the DOM element, you could create an object (using jQuery.listener) and bind the events to it; then it could be returned.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd Protection Status

J Query Topics