JavaScript入門代碼分析

這篇文章主要介紹“JavaScript入門代碼分析”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“JavaScript入門代碼分析”文章能幫助大家解決問題。

來看看下面的這段代碼，它來自于谷歌“名猿”Addy Osmani在幾天前貼出的一段代碼，它的作用是用來調試你的CSS層。全部代碼只有三行，但是你絕對可以把它放在一行里面完成：

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

現在，在你的Chrome瀏覽器的控制臺中輸入這段代碼，你會發現不同HTML層都被使用不同的顏色添加了一個高亮的邊框。是不是非常酷？但是，簡單來說，這段代碼只是首先獲取了所有的頁面元素，然后使用一個不同的顏色為它們添加了一個1ps的邊框。想法很簡單，但是真要實現起來卻不是那么容易的一件事。在下面的內容中，我們將一起一步一步學習如何理解上面的這段代碼。

選擇頁面中所有的元素

我們需要做的第一件事情是獲取頁面中所有的元素，在上面的代碼中，Addy使用了一個Chrome瀏覽器中特有的函數$$。你可以在你的Chrome瀏覽器控制臺中輸入$$('a')，然后你就能得到一個當前頁面中所有錨元素的列表。

$$函數是許多現代瀏覽器命令行API中的一個部分，它等價于document.querySelectorAll,你可以將一個CSS選擇器作為這個函數的參數，然后你就能夠獲得當前頁面中所有匹配這個CSS選擇器的元素列表。如果你在瀏覽器控制臺以外的地方，你可以使用document.querySelectorAll('*')來代替$$('*')。更多關于$$函數的詳細內容可以查看Chrome開發者工具的文檔。

當然，除了使用$$函數之外，我們還有一種更簡單的方法，document.all，雖然這并不是一種很規范的使用方法，但是它幾乎在每一個瀏覽器中都能運行成功。

迭代所有的元素

經過第一步，我們已經獲得了頁面內所有的元素，現在我們想做的事情是遍歷每一個元素，然后為它們添加一個彩色邊邊框。但是上面的代碼究竟是怎么一回事呢？

[].forEach.call( $$('*'), function( element ) { /* 在這里修改顏色 */ });

首先，我們通過選擇器獲得的列表是一個NodeLists對象，它和JavaScript中的數組有點像，你可以使用方括號來獲取其中的節點，你也可以檢查它其中包含多少個元素，但是它并沒有實現數組包含的所有方法，因此我們并不能使用$$('*').forEach()來進行迭代。在JavaScript中，有好幾個類似于數組但是并不是數組的對象，除了前面的NodeLists，還有函數的參數集合arguments，在這里我們可以使用call或apply函數將函數的方法運用到這些對象上。例如下面的例子：

function say(name) {
 console.log( this + ' ' + name );
}

say.call( 'hola', 'Mike' ); // 打印 'hola Mike'

// 你也可以將這種方法有用在arguments對象上 function example( arg1, arg2, arg3 ) { return Array.prototype.slice.call(arguments, 1); // Returns [arg2, arg3] }

在Addy的代碼中，使用了[].forEach.call而不是Array.prototype.forEach.call，二者等價，但是前者可以節省幾個字節。

為元素添加顏色

為了讓元素都有一個漂亮的邊框，我們在上面的代碼中使用了CSS屬性outline。outline屬性位于CSS盒模型之外，因此它并不影響元素的屬性或者元素在布局中的位置，這對于我們來說非常有用。這個屬性和修改border屬性非常類似，因此下面的代碼應該不會很難理解：

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

真正有趣的地方在于定義顏色部分：

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

天吶，上面的代碼是什么意思？在JavaScript中，比特操作符并不是經常被使用，因此這里可能會讓很多程序員感到很疑惑。

我們想達到的目的是活的一個十六進制格式的顏色例如白色對應的是FFFFFF，藍色對應的是0000FF，或者隨便一個顏色37f9ac。雖然我們人類喜歡十進制，但是我們的代碼常常會需要十六進制的東西。

我們首先要學會如何使用toString函數將一個十進制的數組轉換為一個十六進制整數。這個函數可以接受一個參數，如果參數缺省，默認為十進制，但是你完全可以使用別的數組：

(30).toString(); // "30"
(30).toString(10); // "30"
(30).toString(16); // "1e" 十六進制
(30).toString(2); // "11110" 二進制
(30).toString(36); // "u" 36是允許的最大參數值

除此之外，你可以使用parseInt函數將十六進制數字轉換為十進制。

parseInt("30"); // "30"
parseInt("30", 10); // "30"
parseInt("1e", 16); // "30"
parseInt("11110", 2); // "30"
parseInt("u", 36); // "30"

因此，我們現在只需要一個位于0和ffffff之間的十六進制數，由于:

parseInt("ffffff", 16) == 16777215

而這里的16777215實際上是2^24-1。

如果你對二進制數學熟悉的話，你可能會知道1<<24 == 16777216。

再進一步，你每在1后面添加一個0，你就相當于多做了一次2的乘方：

1 // 1 == 2^0
100 // 4 == 2^2
10000 // 16 == 2^4
1000000000000000000000000 // 16777216 == 2^24

因此，在這里我們可以知道Math.random()*(1<<24)表示一個位于0和16777216之間的數。

但是這里并沒有結束，因為Math.random返回的是一個浮點數，但是我們只想要整數部分。我們的代碼中使用波浪號操作符來完成這件事。波浪操作符在JavaScript中被用來對一個變量進行取反。

但是我們在這里并不關心取反，我們指向獲取整數部分。因此我們還可以知道兩次取反可以去掉一個浮點數的小數部分，因此~~的作用相當于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

當然，我們還有一種更加簡潔的方法，使用OR操作符：

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

最終，我們獲得了一個位于0和16777216之間的隨機整數，也就是我們想要的隨機顏色。此時我們只需要使用toString(16)將它轉化為十六進制數即可。

關于“JavaScript入門代碼分析”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。