RequireJS And The jQuery UI Widget Factory

RequireJS And The jQuery UI Widget Factory

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

As we covered in the section on Modern Module Design Patterns, 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 plugin), 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 micro-templating).
• 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.

1. Code
2. Usage

Main.js

require({

    paths: {
        "jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min",
        "jqueryui": "https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min",
        "boilerplate": "../patterns/jquery.widget-factory.requirejs.boilerplate"
    }
}, ["require", "jquery", "jqueryui", "boilerplate"], 
function (req, $) {
    
    $(function () {

        var instance = $("#elem").myWidget();
        instance.myWidget("methodB");

    });
});

Further Reading

• Using RequireJS with jQuery, Rebecca Murphey
• “Fast Modular Code With jQuery and RequireJS,” James Burke
• “jQuery’s Best Friends,” Alex Sexton
• “Managing Dependencies With RequireJS,” Ruslan Matveev