jQuery Plugin Patterns
So, you've tried out jQuery Boilerplate or written a few of your own plugins before. They work to a degree and are readable, but you're interested in learning if there are better ways your plugin can be structured.
Perhaps you're just looking for something that works better with the jQuery UI Widget factory, RequireJS or has built-in support for Publish/Subscribe. This repo hopes to provide a number of alternative boilerplates for kick-starting your jQuery plugin development catered towards the intermediate to advanced developer.
This project won't seek to provide implementations for every possible pattern, but will attempt to cover popular patterns developers often use in the wild.
Patterns
- A lightweight start: perfect as a generic template for beginners
and above, uses a basic defaults object, simple constructor for
assigning the element to work with and extending options with
defaults and a lightweight wrapper around the constructor to avoid
issues with multiple instantiations
- Widget factory: for building complex, stateful plugins based on
object-oriented principles. The majority of jQueryUI heavily relies
on the widget factory as a base for components and this template
covers almost all supported default methods including triggering
events
- Widget factory + RequireJS: for wrapping jQueryUI widgets inside
RequireJS compatible modules. Also demonstrates very basic widget
templating
- Widget factory for jQuery mobile - demonstrating best practices
for building mobile widgets, includes many of the same concepts as
the widget factory boilerplate, but also JQM specific usage
advice/tips in the comments
- Namespaced pattern: to avoid collisions and improve code
organization when working with components under another namespace
- Best options: globally/Per-call overridable options for
greater option customization, based on Ben Almans pluginization talk
- Custom events (Publish/Subscribe): for better application
decoupling. Uses the Widget factory, but could be applied to the
generic template
- Extend pattern: Extended options
- Non Widget-factory widget: if you wish to stay away from the
widget factory. Uses Ben Alman’s simplewidget including coverage for
creation, instantiation and other best practices that may be helpful
- Prototypal inheritance pattern: use a bridge to generate a
plugin from an object (literal). Useful for code organization,
readability, functionality heavily based around DOM element
selection
- Universal Module Definition pattern: create AMD and CommonJS
compatible plugin modules which are compatible with a number of
different script loaders. You may also be interested in the UMD project.
Further reading
More information about the patterns in this repo can be found in Learning JavaScript Design Patterns.
Contributing
If you have ideas for improvements that can be made to patterns currently in the repo, please feel free to create a new issue for discussion or send a pull request upstream. The same can be said about new patterns you wish to propose being added; for the sake of limiting confusion and complexity, I would ideally like to keep the number of overall patterns in the repo, but there are plans to separate these out into folders based on concerns.
Team
jQuery Patterns was made with love by these people and a bunch of awesome contributors.
Credits
Thanks to @peol, @ajpiano, @mathias, @cowboy, @dougneiner and others for their previous work (or tips) in this area. Some of this work is used as a basis for further improvements.