一行代碼系列

tuantuan 發(fā)布于2019-08-20 12:25 / 1986人閱讀

摘要：一行代碼可視化盒子布局源碼解讀首先我們把代碼格式化一下選取頁面所有元素相當(dāng)于，返回的是一個對象數(shù)組，現(xiàn)代瀏覽器幾乎都支持循環(huán)遍歷元素將所有的元素轉(zhuǎn)化為對象，但這并不是一個數(shù)組，所以不能直接使用方法來進行迭代，但是我們可以通過或方法來使用等價

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元素
$$()相當(dāng)于document.querySelectorAll()，返回的是一個NodeList對象數(shù)組，現(xiàn)代瀏覽器幾乎都支持
2、循環(huán)遍歷DOM元素
$$("*")`將所有的`DOM`元素轉(zhuǎn)化為`NodeList`對象，但這并不是一個JS數(shù)組，所以不能直接使用`$$("*").forEach()方法來進行迭代，但是我們可以通過call或apply方法來使用forEach
[].forEach.call等價于Array.prototype.forEach.call，不過前者字節(jié)數(shù)更少
3、給元素添加outline
為什么不使用border而是使用outline的原因在于:border在CSS盒子模型之內(nèi)，會影響頁面的整體布局，而outline在CSS盒子模型之外，不會影響到頁面的布局
4、生成隨機顏色函數(shù)

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

隨機顏色區(qū)間:

最小:000000,轉(zhuǎn)為十進制為0
最大:ffffff,轉(zhuǎn)為十進制為256*256*256 = 16777216 = (1<<24)

Math.random()返回0~1的浮點數(shù)，Math.random()*(1<<24)返回的的即是(0,16777216)之間的浮點數(shù),使用~~去除浮點數(shù)的小數(shù)部分，再通過toString(16)就轉(zhuǎn)化為十六進制的顏色值了

效果圖

原文鏈接:https://gist.github.com/addyo...

2、一行能裝B的JS代碼

(!(~+[])+{})[--[~+""][+[]]*[~+[]]+~~!+[]]+({}+[])[[~!+[]]*~+[]]

上面一行神奇的代碼，執(zhí)行效果卻出人意料，請看下圖:

源碼解讀

主要涉及到的知識點是JS運算的優(yōu)先級以及JS的類型轉(zhuǎn)換
補充知識:

`~~`位運算符，進行類型轉(zhuǎn)換，轉(zhuǎn)換成數(shù)字，等同于`Math.floor()`，將浮點數(shù)變成整數(shù)
首先我們看`(!(~+[])+{})`
`+[]` => `+""` => `0`
`~+[]` => `-1`
`!(~+[])` => `false`
`(!(~+[])+{})` => `"false[object Object]"`
接著看`[--[~+""][+[]]*[~+[]]+~~!+[]]`
`[+[]]` => `[0]`
`[~+""]` => `[~0]` => `[-1]`
`[~+""][+[]]` => `[-1][0]=>-1`
`--[~+""][+[]]` => `-2`
`[~+[]]` => `[-1]`
`--[~+""][+[]]*[~+[]]` => `-2*[-1]` => `2`
`~~!+[]` => `~~!0` => `~~true` => `1`
`[--[~+""][+[]]*[~+[]]+~~!+[]]` => `[2+1]` => `[3]`
這樣左側(cè)`(!(~+[])+{})[--[~+""][+[]]*[~+[]]+~~!+[]]` => `"false[object Object]"[3]` => `"s"`
再看右側(cè)`({}+[])[[~!+[]]*~+[]]`
`({}+[])` => `"[object Object]"`
`[~!+[]]` => `[~!0]` => `[~true]` => `[-2]`
`~+[]` => `-1`
`[[~!+[]]*~+[]]` => `[[-2]*-1]` => `[2]`
`({}+[])[[~!+[]]*~+[]]` => `"[object Object]"[2]` => `"b"`