Chrome / Firefox中双美元符号select器查询function的来源是什么?
检查这个jsfiddle ,并看看控制台。 $$
没有定义。 现在打开一个全新的窗口,并在控制台中input$$
。 它定义了一个函数,用于获取与select器匹配的所有dom元素的(jQuery样)数组:
> $$
bound: function () { return document.querySelectorAll.apply(document, arguments) }
这是由开发工具添加吗? 在Firefox中使用Firebug时也会出现。 它是由工具本身在内部使用吗?
那么, 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); };
这实际上是logging的 ,是的,它也在内部使用。
所以我认为谷歌浏览器正在做类似的事情。
首先,ziesemer的答案是正确的。
这是关于JavaScript的历史
在各种浏览器的devtools控制台中有许多function可用。 这些方法统称为Command Line API ,它们都来自Firebug。 现在我们在浏览器上只是平等的,因为Firebug做的事情(大部分)是正确的。
但是当Firebug被创build的时候(2006年),那些风靡一时的JavaScript库就是Prototype.js。 $
被Prototype抓住了一些getElementById()
语法糖,因为这当然是抓取元素和当时最常用的元素采集技术的最快方法。 这是一个定时器,人们使用整个图书馆只为了$糖 。
在2006年初,jQuery接着推出并使用$()
来select基于CSSselect器的任何元素。 正如我以前的CSSselect器引擎时间表post所示,Prototype随后在4天之后跟上了自己的版本,但是由于$
已经在他们的库中被采用,所以他们只是去了$$()
,现在被称为bling-bling函数 。
因此,Firebug正在利用Prototype的API,因为它仍然在2006年占据了主导地位。现在,在jQuery和后jQuery混淆时代像window.$ = document.querySelectorAll.bind(document)
,我们认为它是相当倒退的。 有趣的是,当Opera彻底改变了他们的浏览器开发工具Dragonfly时,他们select了$
作为querySelectorAll
别名,以更好地匹配现在的做法,而IMO更有意义。
哦,你的意思是代码的来源..
现在,您问到DevTools中$$
的“来源”,我解释了历史。 哎呦! 至于为什么它可以在您的控制台中使用…所有的命令行API方法都只能在控制台的上下文中使用,就像方便的方法一样。
- Chrome DevTools'/ WebKit Inspector的cmd行API来源
- Firebug的cmd行API来源
-
Opera Dragonfly的cmd行API来源
copy()
是我的最爱之一; 我在这个用于Power Usersvideo的JavaScript控制台中介绍了其他人。
看看这个链接https://developer.chrome.com/devtools/docs/commandline-api#selector_1 。
“命令行API是用于使用Chrome开发人员工具执行常见任务的function集合,包括便捷function,用于select和检查DOM中的元素,停止和启动分析器以及监视DOM事件。
它描述了$$select器如下:
$$(select器)
返回匹配给定CSSselect器的元素数组。 这个命令相当于调用document.querySelectorAll()。
以下示例使用$$()在当前文档中创build所有<img>
元素的数组,并显示每个元素的src属性的值。
var images = $$('img'); for (each in images) { images[each].src; }