不使用 CSS 选择器的 JS 框架？答案

【问题标题】：JS Framework that doesn't use CSS selectors?不使用 CSS 选择器的 JS 框架？
【发布时间】：2011-02-20 23:22:51
【问题描述】：

我注意到大多数 JavaScript 框架的一点是，查找/访问 DOM 元素的最常见方法是使用 CSS 选择器。

然而，这通常需要框架包含一个 CSS 选择器解析器，因为它们需要支持选择器，而浏览器本身并不支持，最重要的是框架拥有专有的扩展。

我认为这些解析器又大又慢。拥有不需要解析器的东西，比如链式方法调用，不是更有效吗？

有些喜欢：

id("example").children().class("test").hasAttribute("href")

而不是

$("#example > .test[href]")

是否有任何框架可以做这样的事情？以及它们在性能和大小方面与 jQuery 和朋友相比如何？

编辑：您可以将其视为理论讨论主题。我不打算在未来的任何实际项目中使用除 jQuery 之外的任何东西。我只是想知道为什么没有其他可能更好的方法。

【问题讨论】：

【解决方案1】：

DOM 遍历和操作是当前流行的 JavaScript 框架中最有用的一些功能，因为它们可以有效地处理跨浏览器问题。如果您正在使用 DOM，您最终将需要该功能，而您自己编写的任何内容都必然比最佳方法效率低。

在速度方面，我认为解析选择器对性能的轻微影响将被引擎中固有的优化所抵消。如果您依赖程序员指定路径（即您的示例），您可能会错过您不知道存在的优化机会。例如，在您的示例中，假设它最终从右到左更快（首先使用 href 查找所有 class="test"，然后检查父母）。您将依靠程序员来记住这些优化怪癖。

【讨论】：

我不认为跨浏览器会出现这种情况。在我看来，解析只是第一步。在理解/解析选择器之后，需要找到元素，我想说这两种方法都将使用相似（相同？）的方式来做到这一点。主要区别在于理解选择器（一方面是字符串解析，另一方面是对象和方法调用）。
$("div span:first-child") 在 IE6 中工作，尽管 CSS 伪选择器没有被实现。这就是我所说的混淆跨浏览器问题的意思。不明白你的意思？
我的意思是：解析器做同样的事情，不管它在什么浏览器中运行，也不管浏览器支持什么特性。即使 Firefox（例如）支持:first-child，选择器仍然需要由库解析，因为库在解析之前无法确定浏览器是否支持选择器。在我的理论库中将有一个方法 .firstChild() 可以立即利用浏览器的功能而无需解析任何内容。
啊，明白了。更新了上面的答案。
@Andrew 我明白你的意思。例如，选择器 div#some-id 可以优化为首先查找具有 ID 的元素，然后检查它是否为 DIV，而不是先获取所有 DIV，然后再查找具有正确 ID 的元素。您是说使用我的库的开发人员必须知道使用id("some-id").tag("div") 比使用tag("div").id("some-id") 更好。我实际上正在考虑这种优化，并想知道是否有一种“简单”的方法来实现库以使两个表达式都执行完全相同（优化）的事情。 ...

【解决方案2】：

从我所读到的这些库（或至少是 JQuery）中，尽可能使用浏览器本机功能。这意味着您可以通过尽可能坚持简单的 id 和类来使用影响最小的 css 选择器。

就我个人而言，我根本没有注意到这些库有任何速度问题。在构建 Web 应用程序时，几乎所有速度问题都来自网络通信，因此提高应用程序响应能力的最佳方法是减少对服务器的查询次数。

例如，我将使用 JSON 一次性传递和存储更多数据（即使其中一些可能永远不需要），而不是进行大量小查询。

正如 SLaks 所暗示的，css 选择器使代码可读性和长期维护变得更加容易，并减少了编码时间。正如 Andrew 所说，这些库还可以为您处理跨浏览器问题，从而大大降低脱发率。

【讨论】：

【解决方案3】：

注意那是多长时间。每个人都使用 CSS 样式的选择器是有原因的。

jQuery 的 Sizzle 库已针对解析器速度进行了优化，因此您不必太担心。

【讨论】：