Javascript 設計模式(筆記)__(3) DOM

很抱歉前一篇第四章「函式」的後半部內容，由於間隔了一段時間，儲存資料不小心被覆蓋掉了，而先前借的書早已歸還，只好有頭無尾了...另外中間的幾個章節，目前還想不出可以應用的地方，因此全部跳過。

第八章：DOM 和瀏覽器的模式

1. 關注點分離

網頁三個主要關注點為內容(HTML)、樣式(CSS)、行為(Javascript)，保持三者盡可能地分離，能兼顧各種瀏覽器版本、平台的執行結果。

◎ 測試方法：

A. 將 CSS 關閉，看網頁內容是否還能顯示(HTML 不要使用內嵌 style 屬性)。
B. 將 Javascritp 關閉，看網頁內容是否還能顯示(HTML 不要使用內嵌 事件處理，例如 onclick)。

◎ 優點：減少維護的時間，出問題時知道去哪裡查，若是 Javascript 出錯，就不需查看 HTML 或 CSS。


這是很正確的觀念，將三者分離，程式碼清爽易讀，日後查驗容易。但本站很多工具、hack 的寫法仍然是三者混雜，原因是顧慮到很多讀者並不懂程式碼，因此我發佈的程式碼以「最容易安裝」的方式為首要考量，盡量減少安裝步驟、將畫面簡化，以降低安裝時出錯的變數。

不過對於懂程式碼的朋友，相信你們知道如何將這三者分離，就麻煩請自己優化一下，讓程式執行地更有效率。


2. DOM 的操作

DOM 的存取十分昂貴(耗時)，是最常見的 Javascript 效能瓶頸。以下為 DOM 操作的要點：

A. 避免在迴圈中存取 DOM(如果可以的話，想辦法將 DOM 的操作挪到迴圈外)

B. 將 DOM 指派給區域變數操作，例如 var a = document.getElementById("abc") 之後使用 a 來操作節點(就不會重複存取該節點)。

C. 減少瀏覽器重新繪製的次數，例如使用文件片段(document fragment) 來處理節點，最後再將文件片段加到 DOM 中。


3. 事件委派

A. 避免使用 HTML 內嵌的事件屬性，也就是說不要在 HTML 的元素裡使用 onclick、onmouseover 這些事件，而把事件監聽器寫在 Javascript，除了符合關注點分離，程式執行的效能也比較高。

B. Javascript 的事件監聽語法有跨瀏覽器的問題，所以使用 API 處理比較方便，例如 Jquery。


4. <script> 元素的處理：

由於 Javascript 會阻擋在它之後的檔案下載，就像是「部落格廣告(BloggerAds)卡住網頁載入的完整解決方案」這一篇的狀況，以下為使用 js 的幾個較佳模式──

A. 合併 js：HTTP 的請求很耗時，所以外部的 js 檔內容最好合併，可減少請求的次數。

B. 延後執行：如果執行順序許可，就將 <script> 元素放在頁面最後面。

C. 動態執行：使用動態執行，實現非同步下載。


js 有四種動態執行的方式，可參考「4 ways to dynamically load external JavaScript」。本站大部分的小工具、hack 均使用動態載入 js 的方式執行，例如「最新回應」小工具，動態載入期間會先顯示動畫，載入完畢後動畫才消失，不影響頁面整個 DOM 的載入。


D. 延遲載入：例如將 Javascript 的內容放在以下範例──

window.onload = function () { // code }
網頁會等整個頁面讀取完畢時才執行這些 code。

E. 隨選載入：假設有幾個 tabs(頁籤)，可以為每個頁籤設定函式，當點擊 tab 的時候才執行 Javascript，而不是將每個頁籤的 Javascript 內容全部預先執行。


例如本站側邊欄的分頁小工具，點擊分頁時才執行小工具的 js，而非一開始就將所有分頁的 js 全部執行，可減少系統的資源使用與載入時間。

Javascript 相關筆記：