2013年1月13日

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

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

第八章: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 相關筆記:

沒有留言:

↑TOP

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。