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

Question

检查这个jsfiddle,看看控制台.$$没有定义.现在,打开一个全新的窗口,进入$$控制台.它定义了一个函数,用于获取与选择器匹配的所有dom元素的(类jquery)数组:

> $$

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

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

Answer 1

首先,ziesemer的答案中的所有内容都是正确的.

这都是关于JavaScript历史的

各种浏览器的devtools控制台中提供了许多功能.这些方法统称为命令行API(离线)(新链接),它们都来自Firebug.现在我们只是在浏览器之间实现了平等,因为Firebug(大多数情况下)做得很好.

但是当Firebug被创建时(2006年),风靡一时的JavaScript库是Prototype.js.$被Prototype抓住了一些getElementById()语法糖,因为这当然是当时抓取元素和最常见的元素获取技术的最快方式.这是一个节省时间,人们使用整个图书馆只是为了$ sugar.

在2006年初,jQuery首次亮相并用于$()选择基于css选择器的任何元素.正如我的旧CSS选择引擎时间轴帖子所示,Prototype随后四天跟随他们自己的,但正如$他们刚刚进入他们的库中所采用的$$(),现在称为bling-bling功能.

所以Firebug正在利用Prototype的API,因为它仍然在2006年占据主导地位.现在,在jQuery和后jQuery别名之类的时代window.$ = document.querySelectorAll.bind(document),我们认为它是相当倒退的.有趣的是,当Opera彻底改变Dragonfly时,他们的浏览器开发工具,他们选择$作为他们的querySelectorAll别名,以更好地匹配当前的实践,IMO更有意义.

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

现在,您询问了$$DevTools中的"来源",并解释了历史.哎呦!至于为什么它在您的控制台中可用...所有Command Line API(离线)(新链接)方法仅在控制台的上下文中可用,就像方便方法一样.

• Chrome DevTools'/ WebKit Inspector的cmd行API源
• Firebug的cmd行API源代码
• Opera Dragonfly的cmd行API源码

copy()是我的最爱之一; 我在这个用于Power Users视频的JavaScript控制台中覆盖了它和其他人.

Answer 2

好吧,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);
};

这实际上是记录在案的,是的,它也在内部使用.

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