Chrome/Firefox中双美元符号选择器查询功能的来源是什么

What is the source of the double-dollar sign selector query function in Chrome/Firefox?

本文关键字：查询功能 是什么 选择器 符号 Firefox 美元 Chrome      更新时间：2023-09-26

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

> $$

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

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

首先，齐塞默的答案都是正确的。

这都是关于JavaScript历史的

在各种浏览器的devtools控制台中都有许多可用的功能。总之，这些方法被称为命令行API（离线）（新链接），它们都源于Firebug。现在，我们只是在浏览器之间实现了对等，因为Firebug做得（大部分）是正确的。

但在创建Firebug的时候（2006年），流行的JavaScript库是Prototype.js。Prototype为getElementById()的一些语法糖抓取了$，因为这无疑是抓取元素的最快方法，也是当时最常见的元素获取技术。这真是节省了时间，人们把整个图书馆都用来买糖。

2006年初，jQuery首次亮相，并使用$()来选择基于css选择器的任何元素。正如我以前的CSS Selector Engine Timeline帖子所示，Prototype在四天后推出了自己的，但由于$已经在他们的库中使用，他们只使用了$$()，也就是现在所说的bling bling函数。

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

哦，你指的是代码源代码

现在，您在DevTools中询问了$$的"来源"，我解释了历史。哇！至于为什么它在您的控制台中可用。。。所有命令行API（离线）（新链接）方法都只能在控制台的上下文中使用，就像方便方法一样。

  • Chrome DevTools的/WebKit Inspector命令行API源代码
  • Firebug的命令行API源
  • Opera Dragonfly的命令行API源代码

copy()是我的最爱之一；我在这个超级用户JavaScript控制台视频中介绍了它和其他内容。

Firebug Lite将其定义为：

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

（参见来源。）

Firebug的完整版本将其定义为

this.$$ = function(selector)
{
    return FBL.getElementsBySelector(baseWindow.document, selector);
};

这实际上是有文档记录的，是的，它也在内部使用。

所以我认为谷歌浏览器也在做类似的事情。

相关文章：