Chrome/Firefox中双元符号选择器查询功能的来源是啥？

Posted 2023-03-07

【中文标题】Chrome/Firefox中双元符号选择器查询功能的来源是啥？

【英文标题】：What is the source of the double-dollar sign selector query function in Chrome/Firefox?Chrome/Firefox中双元符号选择器查询功能的来源是什么？

【发布时间】：2012-02-17 08:49:44

【问题描述】：

检查this jsfiddle，并查看控制台。 $$ 未定义。现在，打开一个全新的窗口，在控制台中输入$$。它定义了一个函数，用于获取与选择器匹配的所有 dom 元素的（类似 jquery）数组：

> $$

bound: function () 
  return document.querySelectorAll.apply(document, arguments)

这是由开发工具添加的吗？在 Firefox 中使用 Firebug 时也会出现它。它是由工具本身在内部使用的吗？

【参考方案1】：

首先，ziesemer 的回答中的一切都是正确的。

这是关于 javascript 历史的全部内容

各种浏览器的开发工具控制台中提供了许多功能。这些方法统称为Command Line API(off-line) (new link)，它们都源自 Firebug。现在我们只是在浏览器之间实现了平等，因为 Firebug 做的事情（大部分）是正确的。

但在创建 Firebug 时（2006 年），当时风靡一时的 JavaScript 库是 Prototype.js。 $ 被 Prototype 抢占了一些 getElementById() 语法糖，因为这无疑是获取元素的最快方式和当时最常见的元素获取技术。如此节省时间，人们使用the whole library just for the $ sugar。

在 2006 年初，jQuery 首次亮相并使用 $() 基于 css 选择器选择任何元素。正如我的旧 CSS Selector Engine Timeline post 所示，Prototype 然后四天后用他们自己的方式跟进，但由于 $ 已经被带到他们的图书馆，他们只去了 $$()，现在被称为bling-bling 功能。

因此，Firebug 一直在利用 Prototype 的 API，因为它在 2006 年仍然占据主导地位。现在，在 jQuery 和后 jQuery 别名（如 window.$ = document.querySelectorAll.bind(document)）的时代，我们认为它相当落后。有趣的是，当 Opera 彻底改变了他们的浏览器开发工具 Dragonfly 时，他们选择了$ 作为他们的querySelectorAll 别名，以更好地匹配当今的实践，这在 IMO 中更有意义。

哦，你的意思是 code 来源..

现在，您在 DevTools 中询问了 $$ 的“来源”，我解释了历史。哎呀！至于为什么它在您的控制台中可用...所有 Command Line API(off-line) (new link) 方法仅在您的控制台上下文中可用，就像方便方法一样。

Chrome DevTools'/WebKit Inspector's cmd line API source Firebug's cmd line API source Opera Dragonfly's cmd line API source

copy() 是我的最爱之一；我在这个JavaScript Console for Power Users 视频中介绍了它和其他人。

【讨论】：

啊英语的模棱两可..我的意思是历史来源，但很高兴它允许两个答案。再次感谢！

最后几个链接坏了。

浏览器源代码变化很快，因此深层链接注定会过时。链接内容可以与代码搜索工具一起使用来查找源代码。 Chrome 的 DevTools 的相关代码在这里。 code.google.com/p/chromium/codesearch#chromium/src/third_party/… 当 Blink 和 Chromium 存储库合并时，链接很可能会断开。我认为 src/third_party/WebKit 会变成 src/blink。就像我说的，源代码的深层链接注定会很快过时！

这个答案值得更多的支持，并在 SO 的名人堂中占有一席之地。顺便问一下@PaulIrish，年代数据的来源是什么？即：“原型然后在四天后跟进他们自己的”。听起来这可能是畅销书； “Javascript：一次意想不到的旅程”。

【参考方案2】：

好吧，Firebug Lite 将其定义为：

this.$$=function(selector,doc)if(doc||!FBL.Firebug.chrome)return FBL.Firebug.Selector(selector,doc)

(See the source.)

Firebug完整版definesthis as

this.$$ = function(selector)

    return FBL.getElementsBySelector(baseWindow.document, selector);
;

这实际上是documented，是的，它也在内部使用。

所以我假设谷歌浏览器正在做类似的事情。

【讨论】：

我认为可能是这种情况.. 在我标记正确之前，任何人都可以检查 chrome 源吗？

@minikomi - 谷歌浏览器不是开源的，所以除非谷歌的人可以加入，否则我们需要求助于 Chromium。我检查了这个来源，但无法立即找到任何类似的参考资料。但是，我猜这可能存在于 Chrome 而不是 Chromium...

好点。我得到了谷歌代码，但忘记了搜索被删除了。但是，由于这两个返回的函数几乎相同，因此可以安全地假设它是源代码！谢谢！