javascript dom編程藝術讀書筆記之圖片庫改進版

[TOC]

---

1.javascript和HTML是分離的嗎

該示例支持平穩退化 目前他們仍是混合在一塊兒，咱們要找到一種掛鉤把他們關聯起來。 咱們能夠爲ui設置一個ID

<ul id=""imagegallery">

####2.添加事件處理函數 編寫一個簡單的函數把有關操做關聯到onload上，命名爲prepareGallery

• 檢查瀏覽器是否理解getElementByTagName
• 檢查瀏覽器是否理解getElementById
• 檢查網頁是否存在一個imagegallery的元素
• 遍歷該元素全部連接
• 設置onload事件，點擊連接完成如下操做 把這個鏈接做爲參數傳遞給showPic函數 取消連接的默認行爲

a. 檢查點

if (!getElementById || !getElementByTagName) return false；

能夠進行更針對性的寫法，將函數處理連接設置爲imagegallery連接。這是預防性措施，即便從網頁上刪除圖片庫也不用擔憂出錯。不該該讓javascript對網頁有依賴。

if(!document.getElementById("imagegallery"){
	return false;
}

出於可讀性考慮，咱們將測試集中開頭

fuction prepareGallery(){
	if (!document.getElementByTagName) return false;
	if (!document.getElementById) return false;
	if (!document.getElementById("imagegallery")) return false;
}

b. 變量名有什麼 用gallery變量簡化

var gallery=document.getElementById("imagegallery");

將數組賦值給變量links

var links=gallery.getElementByTagName("a");

prepareGallery函數目前的樣子

fuction prepareGallery(){
	if (!document.getElementByTagName) return false;
	if (!document.getElementById) return false;
	if (!document.getElementById("imagegallery")) return false;
	var gallery=document.getElementById("imagegallery");
	var links=gallery.getElementByTagName("a");
}

c. 遍歷 for循環遍歷

for ( var i=0; i<links.length; i++){}

d. 改變行爲

links[i].onclick = function(){
	showPic(this);
	return false;
}

d. 完成javascript函數

fuction prepareGallery(){
	if (!document.getElementByTagName) return false;
	if (!document.getElementById) return false;
	if (!document.getElementById("imagegallery")) return false;
	var gallery=document.getElementById("imagegallery");
	var links=gallery.getElementByTagName("a");
	for ( var i=0; i<links.length; i++){
		links[i].onclick = function(){
			showPic(this);
			return false;
		}
	}
}

3.共享onload事件

若在文檔加載以前執行腳本，DOM不完整，測試的準確性無從談起。所以在網頁加載完畢後當即執行，咱們把事件與onload關聯起來

window.onload= prepareGallery；

若是有兩個函數，firstFunction和secondFunction。逐一綁定，只有最後一個函數會被執行，能夠建立一個匿名函數解決這個問題

window.onload = function(){
	fistFunction();
	secondFunction();
}

還有一種彈性最佳解決方案 用addLoadEvent函數

function addLoadEvent(func){
	var oldonload = window.onload;
	if (typeof window.onload != 'function'){
		window.onload = func;
	}
	else{
		window.onload = function(){
			oldonload();
			func();
		}
	}
}

將頁面加載執行的函數建立一個隊列。把函數添加隊列中

addLoadEvent(fistFunction);
addLoadEvent(secondFunction);

4.不要作太多假設

在以前showPic函數中，沒有進行任何檢測。 showPic函數有prepareGallery調用，在prepareGallery中已經檢測了getElementById和getElementByTagName。在showPic中並無檢查placeholder和description函數。 進行操做只有placeholder圖片存在，即便description不存在也能夠替換圖片。 下面是showPic添加檢查以後的代碼

functions showPic (whichpic){
	if (document.getElementById("placeholder") return false;
	var source = getAttribute("href");
	var placeholder = document.getElementById("placeholder")l
	placeholder.setAttribute("src", source);
	if (document.getElementById("description")){
		var text = getAttribute("title");
		var description = document.getElementById("description");
		description.firstChild.nodeValue = text;
	}
	return true;
}

如今即便沒有placeholder圖片也不會出現任何問題，有一個問題，若是把placeholder圖片從標記文檔中刪除，不管咱們點擊圖片庫裏哪一個連接都不會有反應 意味腳本不支持平穩退化。 問題在於prepareGallery假設，showPic函數正常返回，取消了onclick的默認行爲，應該有showPic函數決定 咱們應該驗證showPic返回值

links[i].onclick = function(){
	return !showPic(this);
}

showPic返回true，那咱們就返回false，瀏覽器不會打開那個連接 showPic返回false，那咱們就返回true，認爲圖片沒有更新，打開連接

5.優化

showPic函數中仍然有須要處理的假設，title屬性值

if whichpic.getAtteibute("title"){
	var text = whichpic.getAttribute("title");
}else {
	var  text = "";
}

用三元操做符處理

var text = whichpic.getAttribute("title") ?  whichpic.getAttribute("title") : "";

檢測placeholder存在，假設是一張圖片，能夠用nodeName屬性進行測試 注意nodeName屬性老是返回一個大寫字母值

if (placeholder.nodeName != "IMG") return false;

下面是加了幾項檢查後的showpic函數

functions showPic (whichpic){
	if (document.getElementById("placeholder") return false;
	var source = getAttribute("href");
	var placeholder = document.getElementById("placeholder")l
	if (placeholder.nodeName != "IMG") return false;
	placeholder.setAttribute("src", source);
	if (document.getElementById("description")){
		var text = whichpic.getAttribute("title") ?  whichpic.getAttribute("title") : "";
		var description = document.getElementById("description");
		if (description.firstChild.nodeType == 3){
			description.firstChild.nodeValue = text;
		}
	}
	return true;
}

6.鍵盤訪問

按回車鍵觸發點擊，會觸發onkeypress事件，與onclick行爲是同樣的

• 能夠直接複製一份

links[i].onclick = function(){
	return showPic(this) ? false : true;
}
links[i].onkeypress = function(){
	return showPic(this) ? false : true;
}

• 把onclick賦值給onkeypress

links[i].onkeypress = links[i].onclick;

當心onkeypress 在幾乎全部的瀏覽器中，用tab鍵移動，回車鍵點擊也會觸發onclick onclick和onkeypress結合會致使不少問題 下面是最終的shoePic函數和prepareGallery函數

fuction prepareGallery(){
	if (!document.getElementByTagName) return false;
	if (!document.getElementById) return false;
	if (!document.getElementById("imagegallery")) return false;
	var gallery=document.getElementById("imagegallery");
	var links=gallery.getElementByTagName("a");
	for ( var i=0; i<links.length; i++){
		links[i].onclick = function(){
			return showPic(this) ? false : true;
		}
	}
}
functions showPic (whichpic){
	if (document.getElementById("placeholder") return false;
	var source = getAttribute("href");
	var placeholder = document.getElementById("placeholder")l
	if (placeholder.nodeName != "IMG") return false;
	placeholder.setAttribute("src", source);
	if (document.getElementById("description")){
		var text = whichpic.getAttribute("title") ?  whichpic.getAttribute("title") : "";
		var description = document.getElementById("description");
		if (description.firstChild.nodeType == 3){
			description.firstChild.nodeValue = text;
		}
	}
	return true;
}

7.把javascript和css結合起來

把圖片連接換成縮略圖css也一樣有效

8.DOM Core和HTML-DOM

var source = whichpic.getAttribute("href");
var source = which.href;

placeholder.setAttribute("src", source);
placeholder.src = source;

第一行爲DOM Core 第二行爲HTML-DOM