$$的使用,与由来

今天同事给了一段神奇的代码,如下

[].forEach.call($$("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)})

大家可以猜猜是干啥的。

3

2

1

答案揭晓:
$$的使用,与由来_第1张图片
页面中所有的元素都被加上了外框,颜色是随机的,可以清晰的看到所有的布局情况~
这个代码等同于

$$("*").forEach(function(a){
	a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)
})

解释一下:

  1. $$("*"),获取页面上所有的元素
  2. 1<<24,rgb单个颜色通道取值范围为0-255,也就是256个,2的8次方,3个通道组合起来就是2的24次方
  3. ~~,表示向下取整
  4. toString(16),是将数字转化为16进制

比较高级的在于$$("*")选择器,之前没有遇到过。下面是我查阅到的资料,对于$$有个简单的介绍。

在很多浏览器的设计工具中有大量的预定义API ,大部分是从Firebug中借鉴的,因为Firebug的设计(大部分)是正确的。

当Firebug在2006年被创立的时侯。当时的JavaScript库Prototype.js使用$来表示getElementById()。这个语法糖很方便地抓取到了用户想要的元素。它节省了大量的时间,之后整个框架都使用采用了$语法糖。

在2006年初,jQuery发布了,然后使用基于CSS选择器的$()语法来选择任意元素。在之后的几天,Prototype也发布了自己的CSS选择器引擎,但是$已经在他们的库中被占用了。所以它们换成了$$()。称之为bling-bling 函数。

所以Firebug采用了Prototype的API,因为它在2006年仍然非常流行。在后jQuery的日子里, 它等价于window.$$ = document.querySelectorAll.bind(document) 。有趣的是在Opera的开发工具中,它们也采用$$作为querySelectorAll的别名。

目前主流浏览器都可以支持该写法,另外通过$$("")获取到的直接就是个数组,可以正常使用数组的所有方法;而通过document.querySelectAll("*")获取到的是个NodeList,伪数组,只能通过for循环的下标值取出对应的node。

参考文档为:http://ourjs.com/detail/54ab768a5695544119000007

你可能感兴趣的:(猎奇,笔记,js,javascript,正则表达式)