现在到处都是JavaScript,倘若花点时间去体察,每次都能知道点新的东西。一旦你入了门,你总能从这里或是那里领悟到很多知识。一旦发现些许有意思的东西,总习惯先收藏起来。待到时技(时间+技术)成熟,再去感觉他们的源代码,看一看它们是怎么办到的,览一览大牛们的“奇技淫巧”。这里便是关于所遇精妙JS代码的收藏室,愿随时间的渐行渐远,这里收集的日渐丰盈,技术也能“层林尽染”。

CSS布局调试代码片段

在浏览器控制台运行此段代码(当然也只能在控制台运用),会给页面里所有的 DOM 元素添加一个 1px 的描边(outline),方便我们在调试 CSS 过程中分析、排查问题。当然这样的工具使用Chrome一些插件也易办到,但直接撸起如此代码,能够领悟到很多知识。

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

代码分析:

这段代码是 Github 上的 140 bytes 活动中的代码,简单分析下这段 JS 代码,作者使用了不少技巧:

首先是需要选择页面上的所有元素,这里使用了只能在console调试工具中使用的$$函数,你可以在console中输入$$(‘a’)自己试一下。它会返回当前页面的所有anchor(链接)元素。$$document.querySelectorAll是等价的,有兴趣可查看$$和$选择器的历史

其次遍历所有元素,这里用的是[].forEach.call(...),使用 forEach 替代 for 之类循环能减少不少代码量,而 forEach 是 Array 对象的方法,所以用了个 [] 空数组来代替Array.prototype,更显简洁;得到所有元素的节点列表(NodeList),但是它并没有实现Array的所有接口,因此使用 $$(‘*’).forEach 会返回错误,这里使用call方法来更改forEach内部this环境,当然也可以使用apply

之后就是让元素有一个漂亮的边框,并拥有不同的颜色了。这行代码使用了CSS的outline属性。在CSS渲染的盒子模型(Box Model)中,outline并不会改变元素及其布局的位置。这里较有意思的是:定义不同的颜色的色值:

1
~~(Math.random()*(1<<24))).toString(16)

这里想构造的其实是一个16进制的颜色值,即000000~ffffff;也就是parseInt(‘0’,16)到parseInt(‘ffffff’,16)之间的一个值;而

1
parseInt('ffffff',16) == 16777215 == (2^24-1) == (1<<24 - 1)

Math.random(),得到的是一个0~1之间的浮点数;(Math.random()*(1<<24),即得到0~16777215之间的浮点数,而色值是需要整数的,所以就需要将浮点数进行int转换。这里用到了~~,可参见理解JS按为非运算符(~/~~ )。当然可以将~~视为parseInt的简写。并且使用按位或 “|”操作符也可以得到相同的结果:

1
2
3
4
var a = 1.234567890;
var b = 0.000000001;
~~a == 0|a == parseInt(a, 10) == 1
~~b == 0|b == parseInt(b, 10) == 0

toString(16)使用数字类型的toString方法进行十进制到16进制的转换。至此我们得到了一个 0 到 16777215之间的随机数,然后使用toString(16)转换成16进制,将此值赋予到页面上所有元素节点的outline附加属性上,就有了如图效果,它就是这样工作的。精致巧妙而实用非常,顶一个。

参考文章从一行CSS调试代码中学到的JavaScript知识


静晴轩 ~ 晚晴幽草轩
个人微信公众号晚晴幽草轩;名字取自:“天意怜幽草,人间重晚晴”。
专注互联网开发(Web 大前端、快应用、小程序),以及分享优质网站、AI 应用、效率工具、心得感悟等内容。

文章目录
  1. 1. CSS布局调试代码片段
    1. 1.1. 代码分析: