Learning JavaScript Design Patterns

jQuery UI Widget Factory Bridge Pattern

If you liked the idea of generating plug-ins 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 plug-in definition. Effectively, we’re able to create stateful plug-ins 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:

/*!
 * jQuery UI Widget factory "bridge" plugin boilerplate
 * Author: @erichynds
 * Further changes, additional comments: @addyosmani
 * Licensed under the MIT license
 */


// a "widgetName" object constructor
// required: this must accept two arguments,
// options: an object of configuration options
// element: the DOM element the instance was created on
var widgetName = function( options, element ){
  this ...