《JavaScript_DOM程式設計藝術》筆記
其中一些是我自己的理解,絕大部分是照抄書上的話,雖然記下來的有些東西已經過時、不適用了,但思想還是很值的學習。
結構化程式設計原則
函式應該只有一個入口和一個出口。
但在實際工作中,過分拘泥於這項原則往往會使程式碼變得非常難以閱讀。如果一個一個函式有多個出口,只要這些出口集中出現在函式的開頭部分,就可以接受。
平穩退化
讓高配表現出應有的效果,同時又讓低配降級體驗,不至於失效,流失使用者。
漸進增強
考慮相容,就是一開始就從最基礎的出發,在低配可以滿足基礎需求使用的情況下,額外增加高配才能使用的功能。
不要做太多的假設
不要做太多的假設,不要想當然,而是要考慮到方方面面,只要是有可能出現的。
Ajax
要構建成功的Ajax應用,關鍵在於將Ajax功能看作一般的JavaScript增強功能,在平穩退化的基礎上求得漸進增強。通過Ajax實現的應用一定也可以通過其他非Ajax技術來實現。
如果你一開始設計就以Ajax為起點,那麼以後確實很難把它從成品站點中剝離出來,再額外提供一個不適用Ajax的版本。但是如果一開始你的應用就是基於老式的頁面重新整理機制構建的,那麼就可以在既有框架基礎上,用Ajax攔住傳送到伺服器的請求,並將請求轉交給XMLHttpRequest物件處理。這種情況下,Ajax功能就扮演了一個位於常規站點之上的層。構建Ajax網站的最好方法,也是先構建一個常規的網站,然後Hijax(漸進增強地使用Ajax)它。
想一想登入表單,構建它最簡單的辦法就是按照老傳統,讓表單把整個頁面都提交到伺服器,然後伺服器再發回來一個包含反饋的新頁面。所有處理操作都有伺服器上完成,而使用者在表單輸入的資料則有伺服器負責取得並與儲存在資料庫裡的資料進行比較,看是不是真的存在這麼個使用者。然後為了給這個登入表單新增Ajax功能,就需要攔截提交表單的請求(Hijax嘛),讓XMLHttpRequest請求來代為傳送。提交表單出發的是submit事件,因此只要通過onsubmit事件處理函式捕獲該事件,就可以取消它的預設操作(提交整個頁面),然後代之以一個新的操作:通過XMLHttpRequest物件向伺服器傳送資料。
攔截了登入表單的提交請求之後,登入過程就可以讓使用者感覺跟方便。響應時間加快了,不必重新整理整個頁面了。可是萬一使用者的瀏覽器沒有啟用JavaScript呢?沒關係,登入表單照樣能讓使用者正常登陸,只不過所花的時間要長一點,使用者體驗沒有那麼流暢罷了。
檢查nodeType屬性值
在編寫DOM指令碼時,你會想當然地認為某個節點肯定是一個元素節點,這是一個相當常見的錯誤,如果沒有百分之百的把握,就一定要去檢查nodeType屬性值,有很多DOM方法只能用於元素節點,如果用在了文字節點上,就會出錯。
效能考慮
- 儘量少訪問DOM和儘量減少標記
訪問DOM的方式對指令碼效能會產生非常大的影響,不管什麼時候,只要是查詢DOM中的某些元素,瀏覽器都會搜尋整個DOM樹,從中查詢可能匹配的元素。過多不必要的元素只會增加DOM樹的規模,進而增加遍歷DOM樹以查詢特定元素的時間。
- 儘量把外部指令碼合併到一個指令碼檔案中,這樣就可以減少載入頁面時傳送的請求數量,這在效能優化時是首先考慮的。
- 指令碼在標記中的位置對頁面的初次載入時間也有很大影響。
傳統上,我們都把指令碼放在文件的<head>區域(如影象或其他指令碼)。一般來說,根據HTTP規範,瀏覽器每次從同一個域名中最多隻能同時下載兩個檔案。而在下載指令碼期間,瀏覽器不會下載其他任何檔案,即使是來自不同域名的檔案也不會下載,所有其他資源都要等指令碼載入完畢後才能下載。把所有<script>標籤都放到文件的末尾,</body>標記之前,就可以讓頁面變得更快。即使這樣,在載入指令碼時,window物件的load事件依然可以執行對文件進行的各種操作。
- 壓縮指令碼
壓縮指令碼也可以加快載入速度,所謂壓縮指令碼,指的是把指令碼檔案中不必要的位元組,如空格和註釋,統統刪除,從而達到"壓縮"檔案的目的。好在,有很多工具都可以替你來做這件事。精簡後的程式碼雖然不容易看懂,卻能大幅減少檔案大小。多數情況下,你應該有兩個版本,一個是工作副本,可以修改程式碼並添加註釋;一個是精簡副本,用於放在站點上。通常,為了與非精簡版本區分卡,最好在精簡副本的檔名中加上min字樣<scripy src="scripts/scriptName.min.js"></script>
下面是推薦給讀者的幾個有代表性的程式碼壓縮工具:Douglas Crockford的JSMin、雅虎的YUI Compressor、谷歌的Closure Compiler這些工具都有選項,可以在必要時用來最大程度地壓縮檔案。