What are the acceptable patterns for instance refe

Question

I'm looking for patterns which have been found acceptable when working with instances of js objects on the same page. (If there is a thread already covering this, a link will be appreciated.)

The issue is one of reference. After an object/feature is instantiated, it has to be referenced at some point later.

I've seen jQuery people store a reference to the object on the target DOM element using data(). However, I'm interested in a framework agnostic option if possible.

This could be accomplished if there was a clean, viable way to generate an unique id for a DOM element. Alas, I have not found one yet.

So my question is: What is the best way to store reference to an object, via a DOM element, so that you can reference it at a future arbitrary time?

Hopefully this makes sense, and I'm not just rambling. :)

Thanks.

Answer 1

Objects in JavaScript (unlike classical OOP languages) can be augmented. There's nothing wrong with that; that's the way JavaScript was designed to be used:

Write:

document.getElementById( 'foo' ).customAttribute = 5;

Read:

alert( document.getElementById( 'foo' ).customAttribute );

If you don't want to alter the original object, the only way to point at it is using a dictionary as pointed out in one of the previous answers; however, you don't need to do a linear search to find the object: it can be done in logarithmic time providing you use an ID per element (potentially not its HTML ID but a custom one)

Answer 2

There is nothing stopping you from maintaining your own cache:

var cache = [];

function locate(el) {
    // search for the element within our cache.
    for (var i=0;i<cache.length;i++) {
        if (cache[i].elem === el) {
            return cache[i].data;
        };
    };

    // if we get this far, it isn't in the cache: add it and return it.
    return cache[cache.push({
        elem: el,
        data: {}
    }) - 1].data;
};

// used to add data to an element and store it in our cache.
function storeData(el, data) {
    var store = locate(el);

    for (var x in data) {
        store[x] = data[x];
    };
};

// used to retrieve all data stored about the target element.
function getData(el) {
    return locate(el);
};

and then use as follows:

storeData(document.getElementById("foo"), {
    something: 4,
    else: "bar"
});

var data = getData(document.getElementById("foo"));
alert(data.something); // "4";