不推荐使用 livequery

Posted 2023-05-08

【中文标题】不推荐使用 livequery

【英文标题】：Is livequery deprecated

【发布时间】：2011-12-02 07:06:30

【问题描述】：

我正在查看旧代码。我看到对于使用 ajax 添加的元素，有很多实时查询代码。较新版本的 jquery 不再需要 livequery 了吗？有谁知道在哪个版本之后不需要它？

$("#somediv").livequery(function()
    $(this).click(function()

    );
);

【问题讨论】：

是的，livequery 已经死了。这也是一种反模式

@Raynos 用什么代替它？到目前为止，我还没有找到符合其目的的示例。 .on 用于事件，唯一接近的 jquery 事件是 DOMNodeInserted，它没有广泛的浏览器支持。

@AaronLS 事件委托将解决您的问题。如果您需要DOMNodeInserted，您要么构建一个复杂的模板系统，要么您做错了。如果是前者，那么只需构建一个简单的模板系统即可

@Raynos 真的吗？你只是做了一大堆无效的假设。我已经看到了 livequery 的大量有效用途，但还没有看到保留关注点分离的替代方案。在处理动态内容时确实存在初始化场景，特别是在单页应用程序中，它们与特定事件无关，因此事件委托不会解决问题。如果您不相信，请举一个例子。我以前遇到过“你做错了”的那种，你漏掉了任何可行的解决方案，因为你的目标是让别人失望。

@Raynos 这是一个用例——一个用户脚本。我不控制将元素插入页面的代码，但我希望我的脚本知道它们何时插入。我还没有看到任何其他方法来实现这一点。

【参考方案1】：

livequery 与.live() 是完全不同的概念。

.live() 方法使用事件委托来处理页面上任何地方发生的事件。

livequery 将在 DOM 发生更改时调用处理程序（通过 jQuery 方法）。

对于下面的示例，当将带有class="some_class" 的元素添加到DOM（或将类添加到元素）时，第一个处理程序将运行。删除时，第二个。

$('.some_class').livequery( function() 

       // apply a plugin to the element
    $(this).somePlugin();

, function() 

    // clean up after the element was removed

);

应该很少实际需要livequery，但在极少数情况下，您需要响应 DOM 更改，并且无法控制导致这些更改的 jQuery，它可以有用。

【讨论】：

@Raynos：我不想说它丑陋，但我想说我几乎总是会建议一种不同的方法。

它会在每个 时间段 迭代 dom 以寻找变化。它基本上轮询 dom，检查每一个血腥元素并查看是否有任何变化。难以置信的计算成本和愚蠢，它甚至没有检测 dom 突变事件的功能

@Raynos：我只是查看了源代码并进行了快速测试，您对livequery 工作原理的描述不正确。它确实用一个在调用原始代码之前调用内部代码的函数包装了 jQuery 方法。因此，当调用方法时，它会根据提供的原始选择器执行 DOM 选择，并在找到新元素时应用回调。所以不会对所有 DOM 元素的每个时间段进行任何轮询。

livequery 在以下情况下很方便：1）您需要在创建元素时对元素执行某些操作（例如在创建的元素上运行插件）或 2）当我需要立即在元素并且我不想依赖委托（也许更高的其他事件句柄会在委托到达我的处理程序之前停止委托）而 1）可能可以通过在我要加载或更改时手动管理代码来解决dom - 使用 livequery 更简单。但可能会影响性能，尤其是在较旧的浏览器上，因此请谨慎使用。

【参考方案2】：

您必须使用on() 并将事件附加到父级或正文。例如：

$('#obj').livequery('click', function()  ... );
$('#obj').livequery(function()  ... );

成为

$('body').on('click', '#obj', function()  ... );
$('body').on('DOMNodeInserted','#obj', function()  ... );

注意 DOMNodeInserted 是 IE9+

【讨论】：

我可以确认它适用于 FF 59。非常感谢您的提示！