一行代码系列

Tikitoo 发布于2019-08-29 11:33 / 457人阅读

摘要：一行代码可视化盒子布局源码解读首先我们把代码格式化一下选取页面所有元素相当于，返回的是一个对象数组，现代浏览器几乎都支持循环遍历元素将所有的元素转化为对象，但这并不是一个数组，所以不能直接使用方法来进行迭代，但是我们可以通过或方法来使用等价

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/addyo...

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"`

GPU云服务器云服务器 python一行代码一行python代码 js代码显示一行 android第一行代码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111726.html

一行代码系列

摘要：一行代码可视化盒子布局源码解读首先我们把代码格式化一下选取页面所有元素相当于，返回的是一个对象数组，现代浏览器几乎都支持循环遍历元素将所有的元素转化为对象，但这并不是一个数组，所以不能直接使用方法来进行迭代，但是我们可以通过或方法来使用等价 1、一行代码可视化CSS盒子布局 [].forEach.call($$(*),function(a){a.style.outline=1px s...

tuantuan 2019-08-20 12:25 评论0 收藏0
PHP最佳实践系列之标准

摘要：框架之间通过接口自动加载和标准的编码风格进行合作。该规范的精髓是把命名空间的前缀和系统中的目录对应起来。 PHP-FIG 1).即PHP Framework Interop Group。这个组织发布推荐的规范，而不是强制规范。2).PHP-FIG的使命是实现框架的互操作性。框架的互操作性指的是通过自动加载机制、接口和标准的风格，让框架互相合作。3).框架之间通过接口、自动加载和标准的编...

DoINsiSt 2019-06-27 17:07 评论0 收藏0
ES6 系列之模板字符串

摘要：最终的代码如下第二版假设有这样一段为了保持可读性，我希望最终输入的样式为其实就是匹配每行前面的空格，然后将其替换为空字符串。基础用法 let message = `Hello World`; console.log(message); 如果你碰巧要在字符串中使用反撇号，你可以使用反斜杠转义： let message = `Hello ` World`; console.log(mes...

Travis 2019-08-26 11:55 评论0 收藏0
Python全栈之路系列之文件操作

摘要：可以对文件进行查看创建等功能，可以对文件内容进行添加修改删除，且所使用到的函数在为，在同时支持和，但是在系列移除了函数。在及以后，又支持同时对多个文件的上下文进行管理，即原文链接 Python可以对文件进行查看、创建等功能，可以对文件内容进行添加、修改、删除，且所使用到的函数在Python3.5.x为open，在Python2.7.x同时支持file和open，但是在3.5.x系列移除...

Drummor 2019-07-25 11:28 评论0 收藏0
CSS系列之让元素居中

摘要：辅助标签代码代码效果废话要让元素和辅助元素在一行，否则会出现水平不完全居中，当使用时，换行会被解析成空格。首先我们需要知道元素都有哪些种类？内嵌元素（display:inline;）如a，span，b，i 【一个不可定制的盒子】 [默认同行可以继续跟同类型标签] [内容撑开宽度] [不支持宽高] [不支持上下的margin和padding] [代码换行会被解析成空] 块...

fou7 2019-08-28 17:55 评论0 收藏0