[教育訓練紀錄] 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>

總計利用了三個模式:

  • 以Closure模式將類別封閉,這與Static class有關係,在這裡先不做討論
  • 使用選擇器模式,範例採用目前最流行的jQuery selector ”$”
  • Read/Write Div Pattern

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

讀者留言 (0)

留言功能維護中。將於近日重新開放。

連絡作者

Jollen Chen,Moko365(仕橙3G教室)講師,熱愛研究 Linux 與 Android 技術。曾為 Motorola、HTC、Foxconn、LG、OPPO、騰迅、廣達電腦、緯創、仁寶等超過 50 家企業講授課程。目前在 MokoVersity 擔任軟體工程師,撰寫 Node.js 程式,也在幾家科技廠兼任 Android Framework 研發顧問。您可透過電子郵件 <jollen (at) jollen (dot) org> 或這裡與我連絡。