同一個頁面效果，所有前端的開發(fā)人員都能實(shí)現(xiàn)。但是如何判定誰做的好，往往只能查看源碼進(jìn)行進(jìn)一步的確定。其實(shí)，還可以采用另一種策略來初步的判定頁面布局合理性。方法就是給頁面的每個元素都加上邊框，通過邊框來確定元素的布局、位置、大小等是否合理。

在瀏覽器的控制臺中輸入下面一句JS代碼，即可顯示當(dāng)前頁面所有元素的邊框：

[].forEach.call($$('*'), function(a) {
    a.style.outline = "1px solid #" + (~~(Math.random()*(1<<24))).toString(16);
});

代碼說明

1 選取所有元素

$$('*') 等價于 document.querySelectorAll('*')

2 改變元素邊框顏色

讓元素有一個漂亮的邊框，這行代碼使用了CSS的outline屬性。有一點(diǎn)你可能不知道，在CSS渲染的盒子模型（Box Model）中，outline并不會改變元素及其布局的位置。因此這比使用border屬性要好得多，所以這一部分其實(shí)并不難理解。$$和$選擇器的歷史

a.style.outline="1px solid #" + color

怎樣定義顏色值其實(shí)是比較有意思的

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

我們想構(gòu)造的其實(shí)是一個16進(jìn)制的顏色值，像白色 FFFFFF，藍(lán)色 0000FF 等等。

首先我們學(xué)到了可以使用數(shù)字類型的 toString 方法進(jìn)行十進(jìn)制到16進(jìn)制的轉(zhuǎn)換。

其實(shí)你可以用它進(jìn)行任意進(jìn)制的轉(zhuǎn)換

(30).toString();   // "30"
(30).toString(10); // "30"
(30).toString(16); // "1e" 16進(jìn)制
(30).toString(2); // "11110" 二進(jìn)制
(30).toString(36); // "u" 36 是最大允許的進(jìn)制

因此16進(jìn)制中的 ffffff其實(shí)是 parseInt("ffffff", 16) == 16777215，16777215是2^24 - 1 的值

因此左位移操作乖以一個隨機(jī)數(shù) Math.random()*(1<<24) 可以得到一個 0 到 16777216 之間的值

但是還不夠，Math.random 返回的是一個浮點(diǎn)數(shù)字，我們只需要整數(shù)部，這里使用了 “~” 操作符（按位取反操作）。

這行代碼并不關(guān)心正負(fù)值。因此通過兩次取返就可以得到純整數(shù)部，我們還可以將 ~~ 視為 parseInt 的簡寫：

var a = 12.34, // ~~a = 12
    b = -1231.8754, // ~~b = -1231
    c = 3213.000001; // ~~c = 3213
 
~~a == parseInt(a, 10); // true
~~b == parseInt(b, 10); // true
~~c == parseInt(c, 10); // true

如果你仔細(xì)看評論你會知道使用 按位或 "|" 操作符也可以得到相同的結(jié)果。

~~a == 0|a == parseInt(a, 10)
~~b == 0|b == parseInt(b, 10)
~~c == 0|c == parseInt(c, 10)

我們最終得到了一個 0 到 16777216之間的隨機(jī)數(shù)，然后使用 toString(16) 轉(zhuǎn)換成16進(jìn)制，它就是這樣工作的。