[教育訓練紀錄] jQuery 模式的優點：提升 JavaScript 程式碼效率

jollen 發表於 June 27, 2012 5:28 PM

在教育訓練課程「HTML5 軟件開發: Mobile, Web & Cloud 設計模式」裡提到「使用 JavaScript 選擇器」可提升程式碼效能的原則。這個觀念，可延續前一篇日記的內容繼續探討。

在實作Web Socket連線生成時，筆者選擇使用了jQuery pattern的觀念來實作。jQuery pattern 本質上是一種選擇器模式。

為什麼要使用選擇器模式，除了程式碼的組織較好外，另一個原因就是效能：使用選擇器方式可以讓JavaScript程式碼效能更好。

根據不同瀏覽器的實作，選擇器模式可以達到超過十倍以上的效能。典型的選擇器模式，是直接呼叫DOM的API：

document.querySelector(“#header”);

使用jQuery的選擇器「$」是目前的主流做法。再回顧上一篇日記的寫去：

<div id="message"></div>
<script type="text/javascript">  
$("#message").createWebSocket();
</script>

總計利用了三個模式：

選擇器模式的效率取決於瀏覽器本身的實作，不過，以選擇器模式來代替直接存取DOM，一般相信是最好的做法。