精妙JS代码段搜集

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

CSS布局调试代码片段

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

[].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并不会改变元素及其布局的位置。这里较有意思的是:定义不同的颜色的色值:

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

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

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

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

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知识

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏LanceToBigData

Jsoup(一)Jsoup详解(官方)

一、Jsoup概述 1.1、简介     jsoup 是一款Java 的HTML解析器,可直接解析某个URL地址、HTML文本内容。它提供了一套非常省力的API...

1.3K50
来自专栏xingoo, 一个梦想做发明家的程序员

使用DOM动态创建标签

本文是参考《javascript Dom 编程艺术》第八章的内容所写,用到的知识点,就是关于创建平稳的web页面。 使用DOM方法:   getEleme...

22390
来自专栏前端说吧

百度前端学院js课堂作业合集+分析(更新中...)

59190
来自专栏coder修行路

Python爬虫从入门到放弃(十四)之 Scrapy框架中选择器的用法

Scrapy提取数据有自己的一套机制,被称作选择器(selectors),通过特定的Xpath或者CSS表达式来选择HTML文件的某个部分 Xpath是专门在X...

20780
来自专栏Pythonista

Golang实现一个密码生成器

21530
来自专栏前端说吧

vue-学习笔记(更新中...)

95460
来自专栏大数据钻研

前端编码规范

基本原则 结构、样式、行为分离 统一缩进(建议 两个空格) 文件编码统一 不带BOM的UTF-8 一律使用小写字母 省略外链资源 URL 协议部分(FTP等其他...

38470
来自专栏柠檬先生

zepto 基础知识(5)

81.width   width() 类型:number   width(value) 类型:self   width(func...

22470
来自专栏IT开发技术与工作效率

VBA函数与过程简洁教程

22530
来自专栏Objective-C

Swift 基本语法01-Swift简介

40170

扫码关注云+社区

领取腾讯云代金券