成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

一行代碼系列

tuantuan / 2002人閱讀

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

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

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

隨機(jī)顏色區(qū)間:

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

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

效果圖


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

2、一行能裝B的JS代碼 
(!(~+[])+{})[--[~+""][+[]]*[~+[]]+~~!+[]]+({}+[])[[~!+[]]*~+[]]

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

源碼解讀

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

`~~`位運(yùn)算符，進(jìn)行類型轉(zhuǎn)換，轉(zhuǎn)換成數(shù)字，等同于`Math.floor()`，將浮點(diǎn)數(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"`

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/80978.html

相關(guān)文章

  • 一行代碼系列

    摘要：一行代碼可視化盒子布局源碼解讀首先我們把代碼格式化一下選取頁面所有元素相當(dāng)于，返回的是一個(gè)對(duì)象數(shù)組，現(xiàn)代瀏覽器幾乎都支持循環(huán)遍歷元素將所有的元素轉(zhuǎn)化為對(duì)象，但這并不是一個(gè)數(shù)組，所以不能直接使用方法來進(jìn)行迭代，但是我們可以通過或方法來使用等價(jià) 1、一行代碼可視化CSS盒子布局 [].forEach.call($$(*),function(a){a.style.outline=1px s...

    Tikitoo 評(píng)論0 收藏0

  • PHP最佳實(shí)踐系列之標(biāo)準(zhǔn)

    摘要：框架之間通過接口自動(dòng)加載和標(biāo)準(zhǔn)的編碼風(fēng)格進(jìn)行合作。該規(guī)范的精髓是把命名空間的前綴和系統(tǒng)中的目錄對(duì)應(yīng)起來。 PHP-FIG 1).即PHP Framework Interop Group。這個(gè)組織發(fā)布推薦的規(guī)范，而不是強(qiáng)制規(guī)范。2).PHP-FIG的使命是實(shí)現(xiàn)框架的互操作性?？蚣艿幕ゲ僮餍灾傅氖峭ㄟ^自動(dòng)加載機(jī)制、接口和標(biāo)準(zhǔn)的風(fēng)格，讓框架互相合作。3).框架之間通過接口、自動(dòng)加載和標(biāo)準(zhǔn)的編...

    DoINsiSt 評(píng)論0 收藏0

  • ES6 系列之模板字符串

    摘要：最終的代碼如下第二版假設(shè)有這樣一段為了保持可讀性，我希望最終輸入的樣式為其實(shí)就是匹配每行前面的空格，然后將其替換為空字符串。 基礎(chǔ)用法 let message = `Hello World`; console.log(message); 如果你碰巧要在字符串中使用反撇號(hào)，你可以使用反斜杠轉(zhuǎn)義： let message = `Hello ` World`; console.log(mes...

    Travis 評(píng)論0 收藏0

  • Python全棧之路系列之文件操作

    摘要：可以對(duì)文件進(jìn)行查看創(chuàng)建等功能，可以對(duì)文件內(nèi)容進(jìn)行添加修改刪除，且所使用到的函數(shù)在為，在同時(shí)支持和，但是在系列移除了函數(shù)。在及以后，又支持同時(shí)對(duì)多個(gè)文件的上下文進(jìn)行管理，即原文鏈接 Python可以對(duì)文件進(jìn)行查看、創(chuàng)建等功能，可以對(duì)文件內(nèi)容進(jìn)行添加、修改、刪除，且所使用到的函數(shù)在Python3.5.x為open，在Python2.7.x同時(shí)支持file和open，但是在3.5.x系列移除...

    Drummor 評(píng)論0 收藏0

  • CSS系列之讓元素居中

    摘要：輔助標(biāo)簽代碼代碼效果廢話要讓元素和輔助元素在一行，否則會(huì)出現(xiàn)水平不完全居中，當(dāng)使用時(shí)，換行會(huì)被解析成空格。 首先我們需要知道元素都有哪些種類？ 內(nèi)嵌元素（display:inline;）如a，span，b，i 【一個(gè)不可定制的盒子】 [默認(rèn)同行可以繼續(xù)跟同類型標(biāo)簽] [內(nèi)容撐開寬度] [不支持寬高] [不支持上下的margin和padding] [代碼換行會(huì)被解析成空] 塊...

    fou7 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<