jQuery.data
I’ve been familiar with jQuery’s data
method for a while now. It’s awesome, allowing you to get and set data with a jQuery object.
$('body').data('foo', 52);
$('body').data('bar', { myType: 'test', count: 40 });
$('body').data('foo'); // 52
$('body').data(); // {foo: 52, bar: { myType: 'test', count: 40 }}
It’s especially useful within jQuery plugins, providing a mechanism to save the plugin’s state.
While looking over jQuery UI plugin bridge, I found they were using $.data()
instead of $.fn.data
. Where as $.fn.data
is a method for jQuery objects like $('#elem').data('foo', 52)
, $.data()
is a utility function that uses an element as one of its arguments.
$.data( document.body, 'foo', 52);
$.data( document.body, 'bar', { myType: 'test', count: 40 });
$.data( document.body, 'foo'); // 52
$.data( document.body ); // {foo: 52, bar: { myType: 'test', count: 40 }}
Using $.data()
can yield better much performance as you don’t have to wrap an element in a jQuery object. Testing on jsPerf, my results had $.data()
performing 5x faster than $.fn.data()
. Within Isotope, making this change is boosting performance of sorting by 2x.