Learning JavaScript Design Patterns

RequireJS and the jQuery UI Widget Factory

As we covered in Chapter 11, RequireJS is an AMD-compatible script loader that provides a clean solution for encapsulating application logic inside manageable modules.

It’s able to load modules in the correct order (through its order plug-in), simplifies the process of combining scripts via its excellent r.js optimizer, and provides the means for defining dynamic dependencies on a per-module basis.

In the boilerplate pattern below, we demonstrate how an AMD (and thus RequireJS) compatible jQuery UI widget can be defined that does the following:

• Allows the definition of widget module dependencies, building on top of the previous jQuery UI Widget Factory pattern presented earlier.

• Demonstrates one approach to passing in HTML template assets for creating templated widgets (using Underscore.js microtemplating).

• Includes a quick tip on adjustments that we can make to our widget module if we wish to later pass it through to the RequireJS optimizer.

/*!
 * jQuery UI Widget + RequireJS module boilerplate (for 1.8/9+)
 * Authors: @jrburke, @addyosmani
 * Licensed under the MIT license
 */
 
// Note from James:
// 
// This assumes we are using the RequireJS+jQuery file, and 
// that the following files are all in the same directory: 
//
// - require-jquery.js 
// - jquery-ui.custom.min.js (custom jQuery UI build with widget factory) 
// - templates/ 
//    - asset.html 
// - ao.myWidget.js 

// Then we can construct the widget as follows: 

// ao.myWidget.js ...