What are the acceptable patterns for instance refe

问题:

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.

回答1:

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";

回答2:

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)