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.