Have you ever had to exclude an element from a collection so you could run a plugin method with two different sets of arguments? Have you ever had to modify someone else's (or maybe your own) plugin for a specific use case and felt dirty for doing so? When dealing with plugins, do you frequently think to yourself there's got to be a better way to develop plugins? You're not alone. Shane Riley, the front-end development lead at Hashrocket, is tired of modifying plugins to suit a particular need and fearing the modified plugin will be overwritten by future Shane when he realizes there is a new version out. To that end, he set out to change the way he, and hopefully others, develop plugins to eliminate this worry and hassle and returned with a solution that's not only super-extensible at the plugin level, it's also completely customizable at the element level once the plugin has been initialized. Intended for those who have experience writing and/or modifying plugins, Shane will walk through the process he now uses in his own plugin development to ensure that if the plugin doesn't exactly suit your use case, you can make it easily and without having to change the core code of the plugin.
4. Plugins!
Not just for slideshows and autocompletes
Abstract repetitive code for reuse
5. Plugins!
Not just for slideshows and autocompletes
Abstract repetitive code for reuse
Allow customization with options
6. Plugins!
Not just for slideshows and autocompletes
Abstract repetitive code for reuse
Allow customization with options
Portability between projects
7. Plugins!
Not just for slideshows and autocompletes
Abstract repetitive code for reuse
Allow customization with options
Portability between projects
Easier to test
8. Anatomy of a Plugin
http://docs.jquery.com/Plugins/Authoring
22. Changing Options After the Fact
Difficult to change options once initialized
May need to unbind/rebind events
23. Changing Options After the Fact
Difficult to change options once initialized
May need to unbind/rebind events
May need to keep track of all elements with plugin
called on them for this purpose
24. Changing Options After the Fact
Difficult to change options once initialized
May need to unbind/rebind events
May need to keep track of all elements with plugin
called on them for this purpose
Difficult or impossible to unbind only those events
54. New Development Pattern
Created internal plugin object to contain
defaults and methods
Ability to call methods directly
Create and store standalone plugin instances
55. New Development Pattern
Created internal plugin object to contain
defaults and methods
Ability to call methods directly
Create and store standalone plugin instances
Plugin namespaced
56. New Development Pattern
Created internal plugin object to contain
defaults and methods
Ability to call methods directly
Create and store standalone plugin instances
Plugin namespaced
Teardown method
58. Benefits to This Method
Can write your own overrides to suit your
individual needs
59. Benefits to This Method
Can write your own overrides to suit your
individual needs
Upgrading to new plugin version is worry-free
60. Benefits to This Method
Can write your own overrides to suit your
individual needs
Upgrading to new plugin version is worry-free
Overriding options, callbacks, methods much
easier
61. Recommended Reading
jQuery Plugins are Broken: http://vurl.me/TPUT
Building Stateful jQuery Plugins: http://vurl.me/TPUU
jQuery Plugin Patterns: http://vurl.me/TPUY
Typical plugin:\nAttach initializing function as method to $.fn\nTake options object as argument\nExtend defaults with passed in options\nRun plugin code on each element in collection\n
Our client would like an accordion effect on their blog for the rest of the post content.\n
The plugin development community is huge, and there is always more than one plugin for what you’re looking for.\n
Contrived example of plugin. Note that many options you’d normally see in jQuery UI accordion are omitted for brevity.\n
Extend defaults with options\n
Return collection for chainability\n
Cache jQuery object for click trigger and work from there\n
Initialize plugin event by calling with no options\n
Requirements change, and the animation method needs to change once a user has clicked on an anchor. This falls outside of what the plugin is capable of, and will require modifying the plugin to achieve.\n
To do this, you would unbind the click event and reinitialize the plugin with the new option, but you’ll need to add the option to the plugin as well.\n
In the plugin, add anim_method and use that property to call the appropriate method when animating.\n
If plugin needs to be updated, changes need to be retrofitted. A pull request could be submitted (if using Git), but not guaranteed it will be introduced into master.\n
\n
\n
\n
\n
Read plugin name from plugin object. Used for both namespacing and to provide a single point of editing when naming conflicts arise.\n
Read plugin name from plugin object. Used for both namespacing and to provide a single point of editing when naming conflicts arise.\n
Read plugin name from plugin object. Used for both namespacing and to provide a single point of editing when naming conflicts arise.\n
\n
This method of plugin development employs a local object to store the plugin methods. Reposition - update will be attached to events in this case.\n
If a string matching a method name is passed in, the method is called with the jQuery collection as the context. This allows you to refer to this in your methods as the jQuery collection. All other arguments to the tooltip method are passed through.\n
Init method binds the events related to the plugin.\n
\n
Abstract the defaults to object properties on the parent accordion object. Added name property to represent the plugin name.\n
Toggle callback for the click event is placed in method.\n
Init method used to bind toggle method to click handler. Note event is namespaced to match plugin name. Toggle method is called within an anonymous function in order to provide the ability to rewrite the toggle method after the event is bound.\n
If method is changed after initialization, we’re calling the new method instead of the pointer to the old one. This eliminates having to unbind and rebind events when the callback method changes.\n
Plugin name is derived from name property on our accordion object. Much easier to change plugin name this way if conflicts arise.\nFirst condition provides ability to call methods by name on an element collection.\n\n
Second condition will run plugin initialization. Separate copy of plugin created for encapsulation, each element added as a property on its parent object.\n
Data object written to store standalone instance for access outside plugin.\nInit called.\n
This is what our method override will now look like.\n
To override the toggle method at this point, accordion object is read and the toggle method is overridden.\n
What about our animation method option? Let’s add that back in.\n
Create a default property on the accordion object in the plugin.\n
The override method is now no longer needed, as we can override the animation method being called from outside the plugin.\n
\n
In our plugin example, this will unbind all namespaced methods and remove any data stored under the plugin name on the elements.\n
We can also add live binding and a context option to reduce the number of event bindings.\nIf context is set, event is bound to the context rather than each element individually.\nOtherwise event is live bound.\n
To bind to a parent element with a class of details, in our initializer we pass the context property.\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
Why you should consider writing your own plugins\nHow to use jQuery UI’s widget factory to aid in plugin development\nAddy Osmani and Zeno Rocha’s repo with recommended jQuery plugin patterns\n
