Question

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

> $$

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

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

Answer 1

首先，ziesemer的答案中的所有内容都是正确的。

这完全是关于JavaScript历史记录

各种浏览器的devtools控制台都有许多功能。总的来说，这些方法被称为Command Line API（离线）（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更有意义。

哦，你的意思是代码来源..

现在，您询问了DevTools中$$的“来源”，并解释了历史记录。哎呦！至于为什么它在您的控制台中可用...所有Command Line API（离线）（new link）方法仅在控制台的上下文中可用，就像方便方法一样。

copy()是我的最爱之一;我在此JavaScript Console for Power Users视频中介绍了其他内容。

Answer 2

好吧，Firebug Lite将其定义为：

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

（See the source。）

Firebug defines的完整版本为

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

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

所以我认为Google Chrome正在做类似的事情。

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

2 个答案:

这完全是关于JavaScript历史记录

哦，你的意思是代码来源..