Passing an empty object into jQuery function

Question

When reading Pub/Sub library by Ben Alman, I got confused at the very first line that he passed an empty object into jQuery function. Also, he uses bind function object just to apply it in that nearly "empty" object (I used firebug to examine that object and it just return an jQuery object contain empty object inside). Could someone explain this logic for me? Thank sooo much! P/S: I understand the usage and the idea behind Pub/Sub pattern in non-framework context, just don't understand its implementation in jQuery.

Here is the code of library I've read:

 (function($){
    var o = $({});
    $.subscribe = function() {
        o.bind.apply( o, arguments );
    };
    $.unsubscribe = function() {
        o.unbind.apply( o, arguments );
    };
    $.publish = function() {
        o.trigger.apply( o, arguments );
    };
 })(jQuery);

charlietfl · Accepted Answer · 2012-12-26 02:46:51Z

2

WHen you create a jQuery object of an element... final object includes all the jQuery methods

Over simplified example:

{ element: 'div'
    jQuery:{
      hide:function(){},
      animate:function(){}
       on:function(){}
    }

}

The empty object in the demo code is used to be able to do the same thing. Once it is wrapped in $() it can have jQuery event handlers bound to it as the object includes many of the jQuery methods( not all) as properties

You could write:

o.on('myCustomeEvent',doSomething);

And in another part of code

o.trigger('myCustomeEvent');

answered Dec 26, 2012 at 2:46

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Felix Kling · Accepted Answer · 2012-12-26 02:47:44Z

It's simply a way to create some kind of empty container to store event handlers.

Some jQuery methods can also be used on objects other than DOM elements, as mentioned in the jQuery documentation ^[docs]:

Working With Plain Objects

At present, the only operations supported on plain JavaScript objects wrapped in jQuery are: .data(),.prop(),.bind(), .unbind(), .trigger() and .triggerHandler(). The use of .data() (or any method requiring .data()) on a plain object will result in a new property on the object called jQuery{randomNumber} (eg. jQuery123456789).
// define a plain object
var foo = {foo:'bar', hello:'world'};

// wrap this with jQuery
var $foo = $(foo);

// test accessing property values
var test1 = $foo.prop('foo'); // bar

// test setting property values
$foo.prop('foo', 'foobar');
var test2 = $foo.prop('foo'); // foobar

// test using .data() as summarized above
$foo.data('keyName', 'someValue');
console.log($foo); // will now contain a jQuery{randomNumber} property

// test binding an event name and triggering
$foo.bind('eventName', function (){
    console.log('eventName was called');
});

$foo.trigger('eventName'); // logs 'eventName was called'
[...]

and the .trigger documentation ^[docs]:

The .trigger() method can be used on jQuery collections that wrap plain JavaScript objects similar to a pub/sub mechanism; any event handlers bound to the object will be called when the event is triggered.

That's exactly what is happening in the code:

var o = $({}); creates a jQuery object from an empty, plain object.
o.bind.apply( o, arguments ); binds an event handler to that object.
o.trigger.apply( o, arguments ); triggers the event handlers bound to that object.

Collectives™ on Stack Overflow

Passing an empty object into jQuery function

2 Answers 2

Comments

Working With Plain Objects

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Working With Plain Objects

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related