Using jQuery and jQueryUI Widget Factory plugins with RequireJS

Exclusive offer: get 50% off this eBook here
Instant Dependency Management with RequireJS How-to [Instant]

Instant Dependency Management with RequireJS How-to [Instant] — Save 50%

Optimize the performance and maintainability of your web applications with RequireJS with this book and ebook

€13.99    €7.00
by Greg Franko | June 2013 | Java Open Source

This article by Greg Franko, the author of Instant Dependency Management with Require JS How-to, In this section we will demonstrate how to use jQuery and jQueryUI Widget Factory plugins with Require.js. In case you are not familiar, the jQueryUI Widget Factory provides a consistent API for building jQuery plugins and has become a popular tool for jQuery plugin authors.

Since more and more jQuery plugins use the jQueryUI Widget Factory, it is necessary to understand how to use these jQuery plugins with AMD loaders, such as Require.js.

(For more resources related to this topic, see here.)

How to do it...

We must declare the jquery alias name within our Require.js configuration file.

require.config({
// 3rd party script alias names
paths: {
// Core Libraries
// --------------
// jQuery
"jquery": "libs/jquery",
// Plugins
// -------
"somePlugin": "libs/plugins/somePlugin"
}
});

If a jQuery plugin does not register itself as AMD compatible, we must also create a Require.js shim configuration to make sure Require.js loads jQuery before the jQuery plugin.

shim: {
// Twitter Bootstrap plugins depend on jQuery
"bootstrap": ["jquery"]
}

We will now be able to dynamically load a jQuery plugin with the require() method.

// Dynamically loads a jQuery plugin using the require() method
require(["somePlugin"], function() {
// The callback function is executed after the plugin
is loaded
});

We will also be able to list a jQuery plugin as a dependency to another module.

// Sample file
// -----------
// The define method is passed a dependency array and a callback
function
define(["jquery", "somePlugin"], function ($) {
// Wraps all logic inside of a jQuery.ready event
$(function() {
});
});

When using a jQueryUI Widget Factory plugin, we create Require.js path names for both the jQueryUI Widget Factory and the jQueryUI Widget Factory plugin:

"jqueryui": "libs/jqueryui",
"selectBoxIt": "libs/plugins/selectBoxIt"

Next, create a shim configuration property:

// The jQueryUI Widget Factory depends on jQuery
"jqueryui": ["jquery"],
// The selectBoxIt plugin depends on both jQuery and the jQueryUI
Widget Factory
"selectBoxIt": ["jqueryui"]

We will now be able to dynamically load the jQueryUI Widget Factory plugin with the require() method:

// Dynamically loads the jQueryUI Widget Factory plugin, selectBoxIt,
using the Require() method
require(["selectBoxIt"], function() {
// The callback function is executed after selectBoxIt.js
(and all of its dependencies) have been loaded
});

We will also be able to list the jQueryUI Widget Factory plugin as a dependency to another module:

// Sample file
// -----------
// The define method is passed a dependency array and a callback
function
define(["jquery", "selectBoxIt"], function ($) {
// Wraps all logic inside of a jQuery.ready event
$(function() {
});
});

How it works...

Luckily for us, jQuery adheres to the AMD specification and registers itself as a named AMD module. If you are confused about how/why they are doing that, let's take a look at the jQuery source:

// Expose jQuery as an AMD module
if ( typeof define === "function" && define.amd && define.amd.jQuery )
{
define( "jquery", [], function () { return jQuery; } );
}

jQuery first checks to make sure there is a global define() function available on the page. Next, jQuery checks if the define function has an amd property, which all AMD loaders that adhere to the AMD API should have.

Remember that in JavaScript, functions are first class objects, and can contain properties.

Finally, jQuery checks to see if the amd property contains a jQuery property, which should only be there for AMD loaders that understand the issues with loading multiple versions of jQuery in a page that all might call the define() function.

Essentially, jQuery is checking that an AMD script loader is on the page, and then registering itself as a named AMD module (jquery).

Since jQuery exports itself as the named AMD module, jquery, you must use this exact name when setting the path configuration to your own version of jQuery, or Require.js will throw an error.

If a jQuery plugin registers itself as an anonymous AMD module and jQuery is also listed with the proper lowercased jquery alias name within your Require.js configuration file, using the plugin with the require() and define() methods will work as you expect.

Unfortunately, most jQuery plugins are not AMD compatible, and do not wrap themselves in an optional define() method and list jquery as a dependency. To get around this issue, we can use the Require.js shim object configuration like we have seen before to tell Require. js that a file depends on jQuery. The shim configuration is a great solution for jQuery plugins that do not register themselves as AMD modules.

Unfortunately, unlike jQuery, the jQueryUI does not currently register itself as a named AMD module, which means that plugin authors that use the jQueryUI Widget Factory cannot provide AMD compatibility. Since the jQueryUI Widget Factory is not AMD compatible, we must use a workaround involving the paths and shim configuration objects to properly define the plugin as an AMD module.

There's more...

You will most likely always register your own files as anonymous AMD modules, but jQuery is a special case. Registering itself as a named AMD module allows other third-party libraries that depend on jQuery, such as jQuery plugins, to become AMD compatible by calling the define() method themselves and using the community agreed upon module name, jquery, to list jQuery as a dependency.

Summary

This article demonstrates how to use jQuery and jQueryUI Widget Factory plugins with Require.js.

Resources for Article :


Further resources on this subject:


Instant Dependency Management with RequireJS How-to [Instant] Optimize the performance and maintainability of your web applications with RequireJS with this book and ebook
Published: May 2013
eBook Price: €13.99
See more
Select your format and quantity:

About the Author :


Greg Franko

Greg Franko is a 24-year-old JavaScript engineer at AddThis and the maintainer of several popular open source JavaScript projects. He is also a technical writer who blogs regularly at http://gregfranko.com and has contributed to the open source book, Backbone.js Fundamentals, O'Reilly Media.

He is currently a lead JavaScript developer for AddThis.com and the popular AddThis third-party tool suite. He has also worked as a software engineer at AOL where he created the mobile web registration apps for AOL.com, AOL Mail, MapQuest, Aim, and The Huffington Post.

Books From Packt


JavaScript Unit Testing
JavaScript Unit Testing

JavaScript Testing Beginner's Guide
JavaScript Testing Beginner's Guide

Learning Ext JS 4
Learning Ext JS 4

Object-Oriented JavaScript
Object-Oriented JavaScript

Learning Ext JS
Learning Ext JS

Ext JS 4 Web Application Development Cookbook
Ext JS 4 Web Application Development Cookbook

Ext JS 4 First Look
Ext JS 4 First Look

Object Oriented JavaScript
Object Oriented JavaScript


Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software