javascript - 为元素赋值

Question

我想知道是否可以为元素对象赋值。在本例中，我希望将 setTimeout() 函数的返回值分配给元素对象内的对象。

例如:

var elem = document.getElementById('target');
elem.timeouts = new Object();
elem.timeouts.sometimeout = setTimeout('...', 1000);

所以我可以这样做:

clearTimeout(elem.timeouts.sometimeout);

我知道这似乎是不好的做法等，但是是否有可能或会导致浏览器着火并打开用户等。

谢谢。

Answer 1

DOM 元素是宿主对象(又名非 native )，因此它们几乎可以做任何想做的事情。不保证您的 Expando 能够正常工作。特别是 IE 曾经遇到过问题。强烈建议阅读这篇文章:

<强> What’s wrong with extending the DOM 作者:@kangax (来自一位经历过这种坏习惯的缺点的 Prototype.js 开发人员。他们重写了整个库，只是为了让自己免受更多麻烦)

现在，如果您添加 uniqueID到非 IE 浏览器中的元素(IE 默认情况下有它)，然后是你的 data函数变成一个简单的查找 ~ O(1)。真实信息将存储在闭包中。

比 jQuery.data 快2-4 倍 ( test )

data(elem, "key", "value");

1.) 哈希表

var data = (function () {
    var storage = {};
    var counter = 1;
    return function (el, key, value) {
        var uid = el.uniqueID || (el.uniqueID = counter++);
        if (typeof value != "undefined") {
            storage[uid] || (storage[uid] = {});
            storage[uid][key] = value; // set
        } else if (storage[uid]) {
            return storage[uid][key]; // get
        }
    };
})();

2.) 数组

如果你想避免同时扩展，你可以使用数组来保存元素(但速度较慢)

var data = (function () {
    var elements = [];
    var storage = [];
    return function (el, key, value) {
        var i = elements.indexOf(el);
        if (typeof value != "undefined") {
            if (i == -1) {
                i = elements.length;
                elements[i] = el;
                storage[i] = {};
            }
            storage[i][key] = value; // set
        } else if (storage[i]) {
            return storage[i][key]; // get
        }
    };
})();

Array.prototype.indexOf(后备)

if (!Array.prototype.indexOf) {
    Array.prototype.indexOf = function (item) {
        var len = this.length >>> 0;
        for (var i = 0; i < len; i++) {
            if (this[i] === item) {
                return i;
            }
        }
        return -1;
    };
}

不客气! :)