一行代碼系列

Tikitoo 發布于2019-08-29 11:33 / 474人閱讀

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

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第一行代碼

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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