Question

I develop and maintain a jQuery widget called jquery-ui-picklist. I’ve been wanting to remove the dependency on jQuery UI so that it can be used in both jQuery and jQuery UI apps alike.

I’ve avoided the transition, until yesterday, when I figured out I could simply do something like this:

(function($)
{
    if($.widget == null)
    {
        // Contents of jquery.ui.widget.js, straight from jQuery UI, goes here.
    }

    $.widget("awnry.pickList",
    {
        // My widget's actual code goes here.
    });
}(jQuery));

(If you’re interested, the widget’s full source can be found here.)

Needless to say it feels dirty and hacky to be including, verbatim, a vendor’s code like this. Is there a more correct, elegant, or better way to drop the jQuery UI dependency without making my users add another JS include to their pages?

Answer 1

After considering my options, I ended up removing the if() statement and the Widget Factory code from my widget.

Users of my widget have two choices. If their page includes jQuery UI, nothing extra must be done. If their page includes only regular jQuery, jquery.ui.widget.js (which is packaged with my widget for convenience’s sake) must also be included.

My reasons for making the decision:

• Widget code isn’t cluttered up with vendor code.

• Widget is decoupled from any specific Widget Factory implementation or version. In other words, $.Widget can come from jQuery UI or jquery.ui.widget.js or wherever; the widget doesn’t care.

• Widget still works with regular jQuery, yet I still benefit from using the Widget Factory.

• Upgrading the Widget Factory is simply a matter of dropping in a new file.