現(xiàn)在到處都是JavaScript鳄炉，每天都能知道點(diǎn)新東西。一旦你入了門烟勋，你總能從這里或是那里領(lǐng)悟到很多知識规求。
一旦我發(fā)現(xiàn)一些有意思的東西，我喜歡去感覺他們的源代碼卵惦，看一看它是怎么辦到的阻肿。
今天我想分享Addy Osmani的一行代碼，這行代碼對于你調(diào)試你的CSS是很有用的沮尿。為了可讀性丛塌，我把它變成了3行。
注* Addy Osmani 是Google Chrome開發(fā)工程師畜疾，他前幾天開發(fā)的字符串解析模板赴邻，馬上被兼容最新ES6標(biāo)準(zhǔn)的io.js采納。
Js代碼
[].forEach.call($$(“”),function(a){
a.style.outline=”1px solid #”+(~~(Math.random()(1<<24))).toString(16)
})
嘗試在你瀏覽器的Console(F12)中運(yùn)行一下啡捶，你會發(fā)現(xiàn)頁面被不同的顏色塊高亮了姥敛，這個方法非常簡單，但是你自己寫的話可能產(chǎn)生非常多的代碼瞎暑，讓我們來研究一下它是怎么實(shí)現(xiàn)的徒溪。
選擇一個頁面上的所有元素
我們首先需要選擇頁面上的所有元素。Addy使用了只能在console調(diào)試工具中使用的$$函數(shù)金顿，你可以在console中輸入$$(‘a(chǎn)’)自己試一下臊泌。它會返回當(dāng)前頁面的所有anchor（鏈接）元素。
$$與document.querySelectorAll是等價(jià)的揍拆。所以$$(‘’)與 document.querySelectorAll(‘’)是等價(jià)的渠概，有興趣的話可以看看$$和$選擇器的歷史。
對于我來說，$$的使用已經(jīng)讓我學(xué)到了很多播揪。但是選擇頁面上的所有元素的知識還有很多贮喧。Mathias Bynens就在評論中指出document.all 其實(shí)也能選取選用元素，而且兼容所有主流瀏覽器猪狈。
遍歷所有的元素
現(xiàn)在我們有了一個所有元素的節(jié)點(diǎn)列表（NodeList）,現(xiàn)在我們想遍歷它們箱沦，并給他們加上有顏色的邊框。我們先看看能從這行代碼里發(fā)現(xiàn)什么：
Js代碼
[].forEach.call( $$(‘’), function( element ) { / And the modification code here / });
NodeList看起來像一個Array（數(shù)組）雇庙，你可以使用中括號來訪問他們的節(jié)點(diǎn)谓形，而且你還可以通過length屬性知道它有多少元素。但是它并沒有實(shí)現(xiàn)Array的所有接口疆前，因此使用 $$(‘’).forEach 會返回錯誤寒跳，在JavaScript的世界里，有一堆看起來像Array但其實(shí)不是的對象竹椒。如function中的arguments對象童太。因此在他們身上通過call和apply來應(yīng)用數(shù)組的方法是非常有用的。我之前寫過一篇文章來解析它們的用法，下面是一個例子：
Js代碼
function say(name) {
console.log( this + ‘ ‘ + name );
}
say.call( ‘hola’, ‘Mike’ );
// 打印輸出 ‘hola Mike’
之前的一行代碼使用 [].forEach.call 代替 Array.prototype.forEach.call 減少了代碼的編寫量 ( 另外一個很有意思的地方 )；如果$$(‘’)返回是個數(shù)組的話硅急，它與$$(‘’).forEach是等價(jià)的。
如果你看看評論征冷，還有人使用for(i=0;A=$$(‘*’);)讓代碼變得更短，但是它在全局對象中注入了變量誓琼。
你可以帶上var聲明，如
Js代碼
for(var i=0,B=document.querySelectorAll(‘’);A=B[i++];){ / your code here */ }
其中i和B將只聲明在console的上下文中肴捉。
改變元素的顏色
讓元素有一個漂亮的邊框腹侣，這行代碼使用了CSS的outline屬性。有一點(diǎn)你可能不知道齿穗，在CSS渲染的盒子模型（Box Model）中傲隶，outline并不會改變元素及其布局的位置。因此這比使用border屬性要好得多窃页，所以這一部分其實(shí)并不難理解
Js代碼
a.style.outline=”1px solid #” + color
怎樣定義顏色值其實(shí)是比較有意思的
Js代碼
~~(Math.random()*(1<<24))).toString(16)
我不是特別懂位運(yùn)算跺株，因此我最喜歡這一段。
我們想構(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)換
Js代碼
(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的簡寫：
Js代碼
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é)果盏筐。
Js代碼
~~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)制砸讳，它就是這樣工作的琢融。
