Learning JavaScript Design Patterns

Complete Widget Factory Pattern

While the jQuery plug-in authoring guide is a great introduction to plug-in development, it doesn’t help obscure away common plug-in plumbing tasks that we have to deal with on a regular basis.

The jQuery UI Widget Factory is a solution to this problem that helps us build complex, stateful plug-ins based on object-oriented principles. It also eases communication with our plug-ins instance, obfuscating a number of the repetitive tasks that we would have to code when working with basic plug-ins.

Stateful plug-ins help us keep track of their current state, also allowing us to change properties of the plug-in after it has been initialized.

One of the great things about the Widget Factory is that the majority of the jQuery UI library actually uses it as a base for its components. This means that if we’re looking for further guidance on structure beyond this pattern, we won’t have to look beyond the jQuery UI repository on GitHub (https://github.com/jquery/jquery-ui).

This jQuery UI Widget Factory pattern covers almost all of the supported default factory methods, including triggering events. As per the last pattern, comments are included for all of the methods used, and further guidance is given in the inline comments.

/*!
 * jQuery UI Widget-factory plugin boilerplate (for 1.8/9+)
 * Author: @addyosmani
 * Further changes: @peolanha
 * Licensed under the MIT license
 */


;(function ( $, window, document, undefined ) {

    // define our widget under a namespace ...