17.create-a-simple-store-for-DOM-element.md

17. create a simple store for DOM element

Problem

https://bigfrontend.dev/problem/create-a-simple-store-for-DOM-node

Problem Description

We have Map in es6, so we could use any data as key, such as DOM element.

const map = new Map();
map.set(domNode, somedata);

What if we need to support old JavaScript env like es5, how would you create your own Node Store as above?

You are asked to implement a Node Store, which supports DOM element as key.

class NodeStore {
  set(node, value) {}

  get(node) {}

  has(node) {}
}

note

Map is disabled when judging your code, it is against the goal of practicing.

You can create a simple general Map polyfill. Or since you are asked to support specially for DOM element, what is special about DOM element?

What is the Time / Space cost of your solution?

Solution

class NodeStore {
  constructor() {
    this.nodes = {};
  }
  /**
   * @param {Node} node
   * @param {any} value
   */
  set(node, value) {
    node.__id__ = Symbol();
    this.nodes[node.__id__] = value;
  }
  /**
   * @param {Node} node
   * @return {any}
   */
  get(node) {
    return this.nodes[node.__id__];
  }

  /**
   * @param {Node} node
   * @return {Boolean}
   */
  has(node) {
    // coerce to boolean value
    return !!this.nodes[node.__id__];
  }
}

Usage

const store = new NodeStore();

const Node = function () {};
const node1 = new Node();
const node2 = new Node();

store.set(node1, "foo");
store.set(node2, "bar");

console.log(store.get(node1)); // 'foo'
console.log(store.get(node2)); // 'bar'

console.log(store.has(node1)); // true
console.log(store.has(node2)); // true
console.log(store.has(new Node())); // false

Explanation

Let's break down the NodeStore class and its usage:

1. Class Definition: The NodeStore class is defined with a constructor and three methods: set, get, and has.

2. Constructor: The constructor initializes an empty object this.nodes that will be used to store nodes.

3. set Method: This method takes a node and a value as parameters. It assigns a unique identifier to the node using Symbol() and then stores the value in this.nodes using the unique identifier as the key.

4. get Method: This method takes a node as a parameter and returns the value associated with the node from this.nodes.

5. has Method: This method takes a node as a parameter and checks if this.nodes has a value for the node. It returns a boolean value.

6. Usage: The usage example shows how to use the NodeStore class. It creates a new NodeStore instance and two new Node instances. It uses the set method to store values for the nodes, the get method to retrieve the stored values, and the has method to check if values are stored for the nodes.

This NodeStore class provides a way to associate values with nodes in a way that doesn't mutate the nodes themselves (except for adding a unique identifier). This can be useful in situations where you need to store metadata about nodes, for example in a graph or tree data structure.