如何跟踪 Jquery 插件中的节点列表（如果客户端可以删除这些 DOM 节点）

Question

我正在编写一个 jQuery 插件，它“指向”DOM 中的一定数量的节点。然而，如果我尝试让我的插件保存对一组节点的引用，我担心它们会“过时”。

（虽然我意识到 JavaScript 是垃圾收集并且不会崩溃，但我希望能够使我的列表保持最新，而不是保留应该被 GC 处理的东西。）

我想到的第一件事是可能有某种钩子。但似乎没有一个看起来值得信赖的标准：

With JQuery, is it possible to have a function run when a DOM element calls .remove()?

Callback on the removal of an element from the DOM tree?

jQuery remove() callback?

这让我想知道通过在节点列表上放置类属性来维护节点列表。这样，他们在列表中的成员将与他们一起旅行。但正如人们可能担心的那样，枚举这可能会非常缓慢，这就是为什么您应该将查询表述为tags before classes。

除了潜在的性能问题外，我想知道是否认为插件出于这种与样式无关的目的将类插入 DOM 节点是一种糟糕的形式。 （.data() 的优点之一是它相对带外，除了这个列表问题之外，我正在使用它。）

这似乎是一个很常见的问题，其他插件已经解决了。我很想将类解决方案用于它的“正确性”属性，即使它速度较慢。但是，有没有一种更快、更规范的方法可以两全其美？

Answer 1

我相信 jQuery UI 是如何做到的。特别是Droppables，他们在内部维护一个 jQuery 对象列表，当有东西悬停在它上面时，它们会迭代这些对象。他们以两种方式管理列表，

1. 添加在运行 jQuery.remove() 时触发的销毁处理程序。 （他们挂钩到 jQuerys 删除函数来执行此操作）尽管如此，这不会处理普通的 javascript 删除，
2. 在做任何事情之前检查它是否存在。

我认为他们不会删除它，因为它可能会从 DOM 中删除然后放回原处。

Answer 2

很抱歉打扰您，但“可信赖的基于 jQuery 的代码”在术语上是自相矛盾的。 FWIW：

jQuery 与其他几个当前流行的脚本框架一样，创建一个类似Array 的对象来保存查询结果，而不是实现W3C DOM Level 2+ Core 的NodeList interface 的对象（简称NodeList）。一个NodeList 是live； Array-like 对象，它们是原生 ECMAScript 对象，而不是宿主对象，（通常）不是。

如果您不为此使用此类框架，则不会出现此问题，因为所有（准）标准 DOM 方法（如getElementsByClassName()）和属性（如document.forms）都会返回/产生NodeList （有时甚至是HTMLCollection）。

DOM Level 2 Events 指定了mutation event types，但从DOM Level 3 Events（工作草案）开始，它们是deprecated，现在和probably not even interoperable 上的任何挂钩都不可靠。

因此，您应该为此使用（准）标准方法，而不是 jQuery 结果和突变事件。

但是，如果您仍然想采用 jQuery(-ish) 方式（以及所有其他不明显的缺点），您应该查看 Node 的 parentNode 属性。 Nodes 不是 Document 节点但仍位于文档树中，具有非 null parentNode 属性值（而 null 应理解为 W3C DOM Level 2+ 核心规范的语言-independent null，因此您应该在 ECMAScript 实现中查找所有类型转换为 true 的值）。因此，所有其他 Nodes 的 parentNode 属性值为 null，因此在 ECMAScript 实现中类型转换为 false。

假设myNodes 指的是一个Array 实例，其中的元素是Nodes，而myNode 指的是一个这样的节点对象，以下应该可以工作：

var i = 0;

/* … */

var myNode = myNodes[i];
if (!myNode.parentNode)
{
  myNodes.splice(i, 1);
}

然后您可以偶尔迭代myNodes，例如在通过window.setInterval() 调用的函数中，并从中删除“陈旧”节点。它当然不如 NodeList 好，但即使在不使用 jQuery 的情况下删除节点，即使运行时环境不支持突变事件类型，它也可以工作。

不幸的是，jQuery() 没有返回对 Array 实例的引用。所以你必须先做一个，像这样：

var jqObj = jQuery("…");

/* or jQuery.makeArray(jqObj) */
var a = Array.prototype.slice.call(jqObj, 0);

（我们在这里使用jqObj 引用的对象确实具有length 属性的事实。）

我不能说什么是 jQuery 插件的好样式，至于现在应该很明显的原因，我一开始就尽量避免使用 jQuery。

您还应该学会区分 the programming language*s*, like JavaScript 和可以与它们一起使用的（通常与语言无关的）API，例如 DOM。

HTH。