javascript Dom編程藝術讀書筆記之最佳實踐

[TOC]

---

####1.平穩退化 正確使用javascript腳本，讓訪問者在不支持javascript狀況下，仍然能夠順利瀏覽你的網站 ####2."javascript:"僞協議 經過一個連接調用僞協議

<a href="javascript:popUp('http://www.example.com/');">Example</a>

3.內嵌事件處理函數

<a href="#" onclick="popUp('http://example.com/'); return false;">Example</a>

、#是僅供內部文檔使用的連接記號，建立空連接

4.平穩退化的重要性

搜索機器人瀏覽網頁，通常會禁用圖片和javascript，若是你的網站不支持平穩退化，會在搜索引擎的排名上大打折扣 如何作到平穩退化，在連接裏把href的值設置爲真實的連接

<a href="http://example.com/" onclick="popUp(this.href); return false;">Example</a>

5.漸進加強

用一些額外的信息去包裹原始數據。按照此原則設計的網頁基本都符合「平穩退化」原則 css把代碼從文本文檔中分離出來，這個結論一樣適用於javascript

6.分離javascript

把javascript調用代碼行文與HTML文檔分開,把事件添加在特定的ID，class中 當這個連接被點擊時，將調用popUp()函數

<a href="http://www.example.com" class="popUp">Example</a>

具體步驟

• 把文檔連接放在一個數組裏
• 遍歷數組
• 若是某個連接class屬性值等於popUp，則點擊連接時調用該函數 A.把連接的href屬性值傳入函數 B.取消點擊的默認行爲

var links = document.getElementByTagName("a");
for (var i=0; i<links.length; i++)
{
	if (links[i].getAttribute("class") = "popUp"){
	links[i].onclick=function(){
		popUP(this.getAttribute("href"));
		return false;
		}
	}
}

javascript加載時間不能肯定，必須使代碼在文檔加載時當即執行。文檔加載完成時將觸發一個事件，這個事件有本身的事件處理函數。 document對象是window對象的一個屬性，當window對象觸發onload事件，document對象已經存在。 將本身的javascript打包在prepareLinks函數，將函數添加在onload事件中，DOM能夠正常工做了

window。onload = prepareLinks；
function prepareLinks{
	var links = document.getElementByTagName("a");
	for (var i=0; i<links.length; i++){
		if (links[i].getAttribute("class") = "popUp"){
			links[i].onclick=function(){
			popUP(this.getAttribute("href"));
			return false;
			}
		}
	}
}

把popUp函數保存到javascript文件中

function popUp(winURL){
	window.open(winURL, "popUp", "width=320, height=480");
}

7.對象檢測

檢測對瀏覽器的支持程度 把方法打包在if裏，經過條件表達式的求值結果，true or false來決定採起怎樣的行動 用if會多花括號，可使用邏輯非操做符。

if (!document.getElementById){
	ruturn false;
}

能夠簡寫成if (!document.getElementById) ruturn false; 在上面例子中插入一條if語句，檢測是否支持該方法

window.onload = prepareLinks；
function prepareLinks{
	if (!document.getElementBuTagName) return false;
	var links = document.getElementByTagName("a");
	for (var i=0; i<links.length; i++){
		if (links[i].getAttribute("class") = "popUp"){
			links[i].onclick=function(){
			popUP(this.getAttribute("href"));
			return false;
			}
		}
	}
}

8.瀏覽器嗅探技術

保證向後兼容性的另外一種方法。 」瀏覽器嗅探」指經過提取瀏覽器供應商提供的信息來解決向後兼容性問題 有很大的技術風險

• 瀏覽器會撒謊
• 爲適應不一樣瀏覽器，腳本會變得複雜

此技術正在被對象檢測替代 ####9.性能考慮

1. 儘可能少訪問DOM，儘可能減小標記

if (document.getElementByTagName("a").lenth > 0){
	var links = document.getElementByTagName("a");
	for(var i=0; i<links.length; i++){
		//對每一個連接處理
   }
}

上述代碼性能不高，浪費了一次搜索

var links = document.getElementByTagName("a");
if (links.length > 0){
		for(var i=0; i<links.length; i++){
		//對每一個連接處理
}

這樣搜索DOM的次數下降爲1次 2. 合併和放置腳本 推薦把多個javascript文件放到一箇中 腳本在標記中的位置也對初次加載時間有很大的影響。 按照漸進加強和分離javascript的觀點，把全部script標籤放在文檔末尾，/body以前，頁面更快。

3. 壓縮腳本 指把腳本中的沒必要要的字節，如空格和註釋，通通刪除。與不少工具能夠替代你作這種事 你應該有兩個版本，一個工做副本，一個精簡副本，精簡版本應有min字樣以便區分 推薦有表明性的代碼壓縮工具

• Douglas Crockford的JSMin (http://www.crockford.com/javascript/jsmin.js)
• 雅虎的YUI Compressor (http://developer.yahoo.com/yui/compressor)
• 谷歌的Closure Compiler (http://closure-compiler.appspot.com/home)