案例研究：图片库改进版（js dom编程艺术第六章笔记）-CSDN博客

本文链接：https://blog.csdn.net/ziyun0923/article/details/52517529

本章完成的主要工作小结：

1.尽量让js代码不再依赖于那些没有保证的假设，为此引入测试项和检查，是js代码能够平稳退化

2.避免使用onkeypress事件处理函数

3.html标记文档与js分离

源代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Image Gallery</title>
	<script type="text/javascript" src="scripts/showPic.js"></script>
</head>
<body>
  <h1>Snapshots</h1>
  <ul id="imagegallery">
    <li>
      <a href="images/fireworks.jpg" title="A fireworks display">Fireworks</a>
    </li>
    <li>
      <a href="images/coffee.jpg" title="A cup of black coffee" >Coffee</a>
    </li>
    <li>
      <a href="images/rose.jpg" title="A red, red rose">Rose</a>
    </li>
    <li>
      <a href="images/bigben.jpg" title="The famous clock">Big Ben</a>
    </li>
  </ul>
  <img id="placeholder" src="images/placeholder.gif" alt="my image gallery" />
  <p id="description">Choose an image.</p>
</body>
</html>

js改进后的代码：

function showPic(whichpic){
	if(!document.getElementById("placeholder")){return false;}
		var source=whichpic.getAttribute("href");
		var placeholder=document.getElementById("placeholder");
		placeholder.setAttribute("src",source);
		if(document.getElementById("description")){
			var text=whichpic.getAttribute("title");
			var description=document.getElementById("description");
			description.firstChild.nodeValue=text;
			}
		return true;	
	}	
function prepareGallery(){
	if(!document.getElementById){
		return false;}
		if(!document.getElementsByTagName){
			return false;}
			if(!document.getElementById("imagegallery")){
				return false;}
				var gallery=document.getElementById("imagegallery");
				var links=gallery.getElementsByTagName("a");
				for(var i=0;i<links.length;i++){
					links[i].οnclick=function(){
					  return!showPic(this);//或使用三元操作符：return showPic(this)?false:true;
					
						}
				}		
		}
//以下为 addLoadEvent函数代码，共享onload事件
function addLoadEvent(func){
	var oldοnlοad=window.onload;
	if(typeof window.onload!='function'){
		window.οnlοad=func;
		}else{
			window.οnlοad=function(){
				oldonload();
				func();
				}
			}
	}	
addLoadEvent(prepareGallery);

把js和css结合起来

function showPic(whichpic){
	if(!document.getElementById("placeholder")){return false;}
		var source=whichpic.getAttribute("href");
		var placeholder=document.getElementById("placeholder");
		placeholder.setAttribute("src",source);
		if(document.getElementById("description")){
			var text=whichpic.getAttribute("title");
			var description=document.getElementById("description");
			description.firstChild.nodeValue=text;
			}
		return true;	
	}	
function prepareGallery(){
	if(!document.getElementById){
		return false;}
		if(!document.getElementsByTagName){
			return false;}
			if(!document.getElementById("imagegallery")){
				return false;}
				var gallery=document.getElementById("imagegallery");
				var links=gallery.getElementsByTagName("a");
				for(var i=0;i<links.length;i++){
					links[i].οnclick=function(){
					  return!showPic(this);//或使用三元操作符：return showPic(this)?false:true;
					
						}
				}		
		}
//以下为 addLoadEvent函数代码，共享onload事件
function addLoadEvent(func){
	var oldοnlοad=window.onload;
	if(typeof window.onload!='function'){
		window.οnlοad=func;
		}else{
			window.οnlοad=function(){
				oldonload();
				func();
				}
			}
	}	
addLoadEvent(prepareGallery);