Even if I have been doing jQuery for quite sometime, I always find new cool stuff that I never used before. There is a lot of secret gems in jQuery and I wanted to go a bit deeper with 2 of them, $.data and $.extend. I have been rapidly incorporating these 2 in my development, let see how these could be useful to you too.
$.data, link data to DOM elements
I use $.data heavily in my web apps, see $.data as a persistent memory for the DOM (until you reload the page of course, not like localstorage). From the jQuery API:
The jQuery.data() method allows us to attach data of any type to DOM elements in a way that is safe from circular references and therefore from memory leaks. We can set several distinct values for a single element and retrieve them later
* Just to be clear, the data is not actually saved in the DOM per say, but in the jQuery internal $.cache, and this cache will match the DOM element you saved “in it”.
But how this could be useful? Let’s take a small example
You have these
This way your loop will be MUCH faster. You only reach 1 json element instead of actually getting all the data one by one.
// saving with $.data var width = $(DOMelement).width(); var height= $(DOMelement).height(); var html = $(DOMelement).html(); var saveObject = {"width":width, "height":height, "html": html }; $.data(DOMelement, "currentContent", saveObject ); /* Alternatively you can use data.fn which follow normal the setter/getter pattern */ $(DOMelement).data("currentContent", saveObject ); // Accessing the data var currentContent = $data(DOMelement, "currentContent"); /* Alternatively you can use data.fn which follow normal the setter/getter pattern */ var currentContent = $(DOMelement).data("currentContent");
If you need data stored in the page, this is a nice alternative than just doing variables, and it can be quite powerful. For more information visit the jQuery API.
$.extend, extend any object
If you are not developing jQuery plugins, chances are you never heard of this little method. If you have developed plugins you probably have used it to extend your plugins options. But $.extend can be used for much more than that.
The power of $.extend comes from the fact that you can extend any object, you could in fact merge 2 singletons into one. But where could this be useful?
Let’s say you have 2 complex lists that need to merge into one, you could do $.extend(true, objectReceiver, objectMerged).
objectReceiver would effectively receive everything from objectMerged.
An Example
var object1 = { apple: 0, banana: {weight: 52, price: 100}, cherry: 97 }; var object2 = { banana: {price: 200}, durian: 100 }; $.extend(true, object1, object2);
Result:
object1 === {apple: 0, banana: {weight: 52, price: 200}, cherry: 97, durian: 100}
This technique is also really useful for configuration objects that need to be, well, configurable without always passing the complete object back. For more information visit the jQuery API.
Bonus!
Hope you found this article useful, for even more useful jQuery tricks I would suggest you have a look at the video below from Paul Irish, 10 Things I Learned from the jQuery Source
Just a quick clarification, you’re actually using $.fn.data in your examples rather than $.data, which are two separate but related methods. $.fn.data uses $.data internally, but also triggers “getData” and “setData” events on the matches DOM elements.
Very helpful post, especially for $.extend trick… I developed my own function to merge objects, but now I will refractor my code and rely on jQuery’s method. Thanks
Could in fact merge 2 singletons into one.
What did You meant, Cedric? What for could You need do this?
Excellent Article, Keep posting like this
True Eric, not quite sure how I missed this one :P. I will update the article
@jaCoder When I say singleton I just mean when your using the singleton development pattern, which is just a basic object.
Your $.data code example does not replicate the problem you propose so I am having difficulty following it.
Does ‘DOMelement’ represent a set of elements for example?
It would be much more useful to have an html and jquery example combined that can be easily tested.
Thanks