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

[TOC]javascript


1.javascript和HTML是分離的嗎

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

<ul id=""imagegallery">

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

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

a. 檢查點node

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循環遍歷ui

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

相關文章
相關標籤/搜索