专栏首页静晴轩精妙JS代码段搜集

精妙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 条评论
登录 后参与评论

相关文章

  • 小团队的技术管理

    最近一年左右兼职技术管理的经验试总结,核心理念就是以人为本。 小作坊   小项目的构成往往是一个相对有经验的人作为 leader,带几个毕业生构成一个三五个人...

    晚晴幽草轩轩主
  • 必备之常用正则表达式

    熟练而优雅的使用正则,对于程序员来讲,实在太有意义了(即便非此类者,也是好处多多);它辅助处理复杂的文本查询和字符串操作,不仅能用之于代码,还能雅之于编辑器,浏...

    晚晴幽草轩轩主
  • How to Use ADB Command Line Tool

    How to Use Android ADB Command Line Tool Android Debug Bridge (adb) is a tool th...

    晚晴幽草轩轩主
  • 关于函数参数入栈的思考(函数调用约定,入栈顺序)

    首先,要实现函数调用,除了要知道函数的入口地址外,还要向函数传递合适的参数。向被调函数传递参数,可以有不同的方式实现。这些方式被称为“调用规范”或“调用约定”。...

    Dabelv
  • java代码快

    IT故事会
  • Kubernetes引入API优先级和公平性的Alpha支持

    作者:Min Kim(蚂蚁金服)、Mike Spreitzer(IBM)、Daniel Smith(谷歌)

    CNCF
  • [C#1] 6-方法

    1.实例构造器[.ctor] 默认情况下,对于引用类型,如果我们没有显示的定义实例构造器,则C#编译器会为我们定义一个无参的公有实例构造器。 一个类的实例构造器...

    blackheart
  • 关于SAP Commerce product API对description字段的处理

    Backoffice里维护了一个product,code为Spring,description字段维护如下:

    Jerry Wang
  • [Deep-Learning-with-Python]基于Keras的房价预测

    通过20世纪70年代波士顿郊区房价数据集,预测平均房价;数据集的特征包括犯罪率、税率等信息。数据集只有506条记录,划分成404的训练集和102的测试集。每个记...

    用户1631856
  • echarts的地图点击事件

    1、echarts的地图展示,有时候展示出的数据,虽然鼠标点击上去某个省份或者某个地方会有数据显示,但是点击一下地图没有任何动态效果,如何添加地图点击效果呢,这...

    别先生

扫码关注云+社区

领取腾讯云代金券