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