Question

// my object
function myObject(id) {
    this.id = id;
}

var parent = document.getElementById('parent');
var myObjects = [];

for(i = 0; i < someCount; i++) {
    var id = someData[i].id; // unique value
    var oobject = new myObject(id);
    myObjects.push(oobject);

    // div element
    var div = document.createElement('div');
    div.id = id; // note how div id is same as id property - these two are in "pairs" a.k.a the data from that object is meant for that div
    div.className = 'my-div';
    parent.appendChild(div);
}

我的选择是什么？如何从DOM对象直接引用到我的对象？

这甚至不必是一个单独的对象，我只需要存储一些我可以通过DOM元素直接访问/ O（1）的数据。

动态更改数据，经常在我看来排除localStorage
data-属性的数据太多，我担心它会导致一些问题
适用于所有现代浏览器（也是隐身模式）和手机 - 对localStorage

我需要能够在单击DOM元素时获取/设置我的数据而不需要任何讨厌的数组迭代或仅使用某个属性的值搜索正确的对象（如上例中的 id ）

我研究了将自己的属性/数据添加到DOM对象本身但我能找到的只是这是一个非常糟糕的主意。这些帖子很旧（2008年至2011年），2016年的情况如何？关于此的信息非常少。这将是最简单的，我只需要1行：myDiv.addEventListener('click', function(e){ var id = e.currentTarget.myObject.id; }
我也可以将DOM对象分配给我自己的对象，但据我所知，我找不到任何信息说明：没有办法通过其属性 aka 移动直接获取对象在对象的层次结构中。

Answer 1

在O（1）中执行此操作并且不更改DOM节点的一种方法是使用对象文字作为将节点链接到对象的Map（哈希）。

您已经在DOM元素上设置了id属性，因此您可以将每个节点的ID用作连接到相应myObject的密钥：

var map = {}; // create the map. map[domNodeID] = appropriate myObject

for(i = 0; i < someCount; i++) {
    var id = someData[i].id;
    var oobject = new myObject(id);

    // div element
    var div = document.createElement('div');
    div.id = id;
    div.className = 'my-div';
    parent.appendChild(div);

    // link node and object through the map
    map[id] = oobject;
}

然后你可以使用地图引用对象：

myDiv.addEventListener('click', function(e) {
    var oobject = map[this.id]; // O(1) lookup
    // use your object
}

还有一个用于此目的的内置对象名为Map，它可能比使用对象文字更好，但它取决于您需要的浏览器支持。 Map允许使用对象作为键和字符串，因此您可以在技术上直接将节点链接到对象，而无需id：

map.set(node, oobject)

此外，您可以向自定义地图添加使用与map[key] = value方法相同名称的方法，例如Map，而不是使用map.set(key, value)之类的直接访问权限，以确保轻松稍后切换到Map。

从DOM对象直接引用到我的对象/数据？

1 个答案: