$.extend and $.data, more than just internal jQuery methods

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 you want to get some properties of it, lets say width, height and its html content. Now you want to loop to get these properties for all those divs. Instead of manipulating the DOM 30 times x3 (for width, height, and html) each time you want to save those properties, you could add a json object glued to the DOM element on page load, and modify it when the DOM element is modified.

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