Advantages of jQuery Widget over regular JS object?

Question

Edit: Just to be clear, I'm not questioning jQuery's awesomeness. I use it everywhere. I just don't understand the advantages of using the Widgets over regular js objects which take advantage of jQuery's functionality.

I've recently had to use some jQuery Widgets in an app I'm working on, and I'm finding them to be very unintuitive/ugly. There seem to be a lot of conventions to learn which don't really add any value, and the syntax doesn't accommodate intellisense or easy refactoring.

Don't get me wrong, I use jQuery constantly and I'd hate life without it, just not seeing the value in the widget convention. I'm sure I'm missing the point because they're so widespread, so please clue me in. Why do people create jQuery widgets instead of regular js objects?

Oversimplified Example:

Regular Javascript Object:

//instantiate & render
var foo = new MyDomain.MyObject('#mySpecialInput', options)
foo.render();

//assign to property
foo.value = 5;
//call method
foo.multiplyBy(2);
//bind event
foo.change(function(){
    alert('it changed');
}

Jquery Widget:

//instantiate & render
var $foo = $('#mySpecialInput');
$foo.myWidget(options);

//assign to property
$foo.myWidget('option', 'value', 5);
//call method
$foo.myWidget('multiplyBy', 2);
//bind event
$foo.bind('myWidgetChange', function(){
    alert('it changed');
}

Answer 1

The biggest thing is that jQuery widgets help bring structure to your app that would be very hard to maintain without them. Of course, they also provide quite a few useful events such as .bind(), which can be very useful at times. After a bit of Googling, I found this article on jQuery widgets which goes into a bit more detail on their advantages.

Personally, I prefer to structure my scripts (more) manually, but if you don't feel like doing that, jQuery widgets can help.

---

Relevant quote detailing how jQuery widgets add structure:

...it provides the level of code organization that is very hard to maintain outside of a widget structure. It changes the code from being imperative (”do this, then that, then another thing, bind to click”) to declarative (”act like an expando thing”). This frees you up to define what “expando thing” means, while not cluttering or changing the outer layer of your app. No more multi-hundred line long $(document).ready() blocks.

Answer 2

To add to Thinking Sites' point, Using jQuery widget also offers other OO like features(without investment into building the infrastructure needed to support it in plain js)

- extensibility
- in place inheritance - allows extending from itself. This allows for modular and highly maintainable code
- concept of public and private methods to improve the readability of the code, and best part is that it maintains chaining since it returns the jQuery object
- Has lot of predefined methods to manage widget's lifecycle : creation, initialization, and destruction

jQuery widget framework can be treated as a tool to mimic OO like functionality.

It provides a flexible base for building complex, stateful plugins with a consistent API. It is designed not only for plugins that are part of jQuery UI, but for general consumption by developers who want to create object-oriented components without reinventing common infrastructure. --http://wiki.jqueryui.com/w/page/12138135/Widget%20factory