在JavaScript中实现节点存储功能

Question

在ES5和ES6中建立商店时，有人问我这个问题。我一直在尝试解决此问题，但在如何存储节点上遇到了麻烦实施商店类：使用set（Node，value），get（Node）和has（Node）方法实现存储类，该方法存储具有给定Node的对应值。这就是我能够写的（伪代码）function Store () {    this.store = [];}Store.prototype.set = function(node, v) {    // Problem here would be how do I store the node?}Store.prototype.get = function(node) {    if(this.has(node)) {        return this.store.find(each => {            // Check to see if it's the same node and return.        })    }}Store.prototype.has = function(node) {    return this.store.indexOf(node) > -1;}注意：我们可能正在商店中存储HTML DOM。因此，键将是“ DOM”元素而不是字符串。有人可以给我一个例子吗？我想这将像ES6中的Map一样工作。如果要在ES5中实现此功能，该如何首先存储DOM节点？

Answer 1

如果节点是可变的，我们可以尝试为每个节点创建并为其分配唯一的ID：

function NodeStore() {

  this.nodesValueMap = {};

  this.lastId = 0;

}

NodeStore.prototype.set = function(node, value) {

  // text nodes do not have dataset (DOMStringMap), create simple object

  node.dataset = node.dataset || {};

  node.dataset.uniqueId = node.dataset.uniqueId || ++this.lastId;

  this.nodesValueMap[node.dataset.uniqueId] = value;

}

NodeStore.prototype.get = function(node) {

  return node.dataset.uniqueId && this.nodesValueMap[node.dataset.uniqueId];

}

NodeStore.prototype.has = function(node) {

  return !!(node.dataset.uniqueId && this.nodesValueMap[node.dataset.uniqueId]);

}

var textNode = document.querySelector("#a").childNodes[0];

var b = document.querySelector("#b");

var c = document.querySelector("#c");

var store = new NodeStore();

store.set(textNode, '1');

store.set(b, '2');

console.log(store.has(textNode), store.get(textNode));

console.log(store.has(b), store.get(b));

console.log(store.has(c), store.get(c));

<div id="a">asdf</div>

<div id="b"></div>

<div id="c"></div>

所有方法现在都将以O（1）的复杂度运行。

不必使用dataset，我们可以在节点本身上写入唯一ID。

另一件事是，在同一页面上有多个商店的情况下，我们可能会发生ID冲突，其中每个商店可能会在同一节点上更改相同的属性。为了解决这个问题，我们可以在store salt的当前实例中添加一些唯一的实例，例如可以通过构造函数传递这些实例，然后将其用作前缀或后缀uniqueId。

Answer 2

function Store () {

    this.store = {};

}

Store.prototype.set = function(node, v) {

    this.store[node] = v;

}

Store.prototype.get = function(node) {

    return this.store[node];

}

Store.prototype.has = function(node) {

    return this.store[node] !== undefined

}