jQuery UI Widget Factory Bridge Pattern

jQuery UI Widget Factory Bridge Pattern

From Learning JavaScript Design Patterns, a book by Addy Osmani.

If you liked the idea of generating plugins based on objects in the last design pattern, then you might be interested in a method found in the jQuery UI Widget Factory called $.widget.bridge.

This bridge basically serves as a middle layer between a JavaScript object that is created using $.widget and the jQuery core API, providing a more built-in solution to achieving object-based plugin definition. Effectively, we’re able to create stateful plugins using a custom constructor.

Moreover, $.widget.bridge provides access to a number of other capabilities, including the following:

• Both public and private methods are handled as one would expect in classical OOP (i.e. public methods are exposed, while calls to private methods are not possible).
• Automatic protection against multiple initializations.
• Automatic generation of instances of a passed object, and storage of them within the selection’s internal $.data cache.
• Options can be altered post-initialization.

For further information on how to use this pattern, please see the inline comments below:

1. Code
2. Usage

Further Reading

• “Using $.widget.bridge Outside of the Widget Factory,” Eric Hynds