在远程DOM中选择节点的最佳方法是什么?

时间:2017-06-13 18:04:29

标签: javascript multithreading dom web-worker

我需要一些关于一个非常不寻常的主题的建议。

作为我参与的项目的一部分,我需要开发一个JS库,它可以在Web Worker中提供DOM API。我们的想法是能够毫不费力地(几乎)在Worker中运行任何客户端JS,而我面临的许多问题之一就是线程之间的正确节点识别。换句话说,当我从Web Worker中对某些<div>进行更改时,我需要确保它们将完全应用于我在实际DOM中定位的<div>

这是我到目前为止的地方。每个DOM节点都在Web Worker和内部唯一ID中具有副本。每当节点被修改时,lib计算基于位置的选择器,然后将其与补丁一起传递给主线程。基本上是:

1. onMutation -> getSelector(node)                      // Worker
2. postMessage([mutation, selector])                    // Worker --> Main
3. selectNode(selector) -> applyMutation(node, mutaion) // Main

这是计算选择器的函数的简化版本,只是为了让您大致了解它是什么:

function getSelector(node, root) {
  let selector = [];
  while (node !== root) {
    selector.unshift(node.parentNode.childNodes.indexOf(node));
    node = node.parentNode;
  }
  return selector;
}

如果浏览器偶尔通过插入空文本节点或移动不可见节点等令人讨厌的东西来搞乱树结构,那将是一个完美的解决方案。如果发生这种情况,Web Worker DOM将变为无效并开始生成错误的选择器。所以我想知道是否有更可靠的方法来识别节点而不用属性或类似的东西标记它。我错过了一个更简单的解决方案吗? (这很令人尴尬,但无论如何都很高兴)

期待您对此的想法并提前感谢!

0 个答案:

没有答案