图片库的改进版的启示

JavaScript与HTML的分离:

<ul id="imgContainer">
<li>
<a href="path" title="the description about photo"></a>
<li>
<li>
<a href="path" title="the description about photo"></a>
<li>
<li>
<a href="path" title="the description about photo"></a>
<li>
</ul>

在图片清单里,各个链接都包含在同一个列表清单元素里,所以给整个清单设置一个ID.

如果想用JavaScript代码给某个网页添加一些行为,就不应该让JavaScript代码对这个网页的结构有任何的依赖.

结构化程序设计原则(struct programming):函数应该只有一个入口和一个出口.但如果过分拘泥于这个原则将会使代码十分难以阅读,作者的观点是:只要这些出口集中出现函数的开头部分,就是可以接受的.

4.对代码的改进:
在上面的ul列表里,只需要根据id就可以链接列表里的各个元素:

function perpareGallery(){
let gallery = document.getElementById("imgContainer")
let links = gallery.getElementByTagName("a")
for(let i=0;i<links.length;i++){
	links[i].onclick = function(){
	showPic(this)
	return false
		}
	}
}
//然后把这个函数设置为在加载时执行
 window.onload = prepareGallery.
//有多个函数需要加载:
window.onload = function(){
firstFunction();
secondFunction();
}
//通用的解决方案:
function addLoadEvent(func){
	var oldonload = window.onload
	if(typeof window.onload != 'function'){
	window.onload = func
	} else {
	window.onload = function(){
		oldonload()
		func()
		}
	}
} 

对prepareGallery的优化:

 Function prepareGallery(){
	if(!document.getElementByTagName);return false;
	if(!document.getElementById);return false;
	if(!document.gentElementById(“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);
		}
	}
}

这里进行了对象检测,对各种方法和对象不存在的情况进行了检测.

6.对showPic的对象检测优化:

function showPic(whichpic){
	if(!document.getElementById(“placeholder”));return false;
	var source = whichpic.getAttribute(“href”);
	var placeholder = document.getElementById(“placeholder”);
	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;
}

这些检查只是在你不知道HTML结构的情况下做出的检测,它使得代码变得比较多,理想情况下,不应该对HTML的内容的结构做出太多的假设.

键盘访问

links[i].onkeypress = links[i].oncilck
把对于鼠标的事件全部赋给键盘,让键盘也拥有同样的操作.
在几乎所有的浏览器里，用tab键移动到某个链接然后按下回车键的动作也会触发onkclick事件.
作者这里建议我们最好不要使用onkeypress事件,onclick已经对键盘访问的支持比较完美了,虽然它叫onclick!

DOM Core 和 HTML-DOM

像getElementById这样的方法都是DOM Core的组成部分,不是专属于JS的,支持DOM的任何一种程序语言都可以使用它们.
像onclick这样的方法属于HTML-DOM，它更加的简洁.
document.getElementByTagName(“form”) => document.forms;
element.getAttribute(“src”) => element.src;