1、一行代码可视化CSS盒子布局
[].forEach.call($$("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)})
源码解读
首先我们把代码格式化一下:
[].forEach.call($$("*"), function(a){ a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16) } )
1、选取页面所有DOM元素
$$()相当于document.querySelectorAll(),返回的是一个NodeList对象数组,现代浏览器几乎都支持
2、循环遍历DOM元素
$$("*")`将所有的`DOM`元素转化为`NodeList`对象,但这并不是一个JS数组,所以不能直接使用`$$("*").forEach()方法来进行迭代,但是我们可以通过call或apply方法来使用forEach
[].forEach.call等价于Array.prototype.forEach.call,不过前者字节数更少
3、给元素添加outline
为什么不使用border而是使用outline的原因在于:border在CSS盒子模型之内,会影响页面的整体布局,而outline在CSS盒子模型之外,不会影响到页面的布局
4、生成随机颜色函数
(~~(Math.random()*(1<<24))).toString(16)
随机颜色区间:
最小:000000,转为十进制为0
最大:ffffff,转为十进制为256*256*256 = 16777216 = (1<<24)
Math.random()返回0~1的浮点数,Math.random()*(1<<24)返回的的即是(0,16777216)之间的浮点数,使用~~去除浮点数的小数部分,再通过toString(16)就转化为十六进制的颜色值了
效果图
点击预览https://gist.github.com/addyosmani/fd3999ea7fce242756b1
2、一行能装B的JS代码
(!(~+[])+{})[--[~+""][+[]]*[~+[]]+~~!+[]]+({}+[])[[~!+[]]*~+[]]
上面一行神奇的代码,执行效果却出人意料,请看下图:
源码解读
主要涉及到的知识点是JS运算的优先级以及JS的类型转换
补充知识:
`~~`位运算符,进行类型转换,转换成数字,等同于`Math.floor()`,将浮点数变成整数 首先我们看`(!(~+[])+{})` `+[]` => `+""` => `0` `~+[]` => `-1` `!(~+[])` => `false` `(!(~+[])+{})` => `"false[object Object]"` 接着看`[--[~+""][+[]]*[~+[]]+~~!+[]]` `[+[]]` => `[0]` `[~+""]` => `[~0]` => `[-1]` `[~+""][+[]]` => `[-1][0]=>-1` `--[~+""][+[]]` => `-2` `[~+[]]` => `[-1]` `--[~+""][+[]]*[~+[]]` => `-2*[-1]` => `2` `~~!+[]` => `~~!0` => `~~true` => `1` `[--[~+""][+[]]*[~+[]]+~~!+[]]` => `[2+1]` => `[3]` 这样左侧`(!(~+[])+{})[--[~+""][+[]]*[~+[]]+~~!+[]]` => `"false[object Object]"[3]` => `"s"` 再看右侧`({}+[])[[~!+[]]*~+[]]` `({}+[])` => `"[object Object]"` `[~!+[]]` => `[~!0]` => `[~true]` => `[-2]` `~+[]` => `-1` `[[~!+[]]*~+[]]` => `[[-2]*-1]` => `[2]` `({}+[])[[~!+[]]*~+[]]` => `"[object Object]"[2]` => `"b"`