本章完成的主要工作小结:
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);