javascript美术馆（改进2）
一、javascript编程过程中的好习惯
1、实现预留退路
js被禁掉，图片也可以显示出来，href属性带有图片路径
<script src="js/showPic.js"></script> <h1>Snapshots</h1> <ul id="imagegallery"> <li><a href="images/01.jpg" title="01 display"><img width="100px" src="images/01.jpg" alt="01"/></a></li> <li><a href="images/02.jpg" title="01 display"><img width="100px" src="images/02.jpg" alt="01"/></a></li> <li><a href="images/03.jpg" title="01 display"><img width="100px" src="images/03.jpg" alt="01"/></a></li> </ul>
通过专用的id，图片的点击显示在单独的js文件中处理。
上面的代码就做到了我们在编程过程中所说的预留退路。因为在上面的href链接 中，我们写全了图片的路径，这样即使用户禁用了javascript，但是我们预留了退路，所以在没有javascript“干扰”的情况下，浏览器将沿着href属性给出的连接前进，用户看到了新图片而不是“该页无法显示”之类的信息。虽然这样与javascript在当前页面上进行切换的显示效果略差，但是总比什么都不显示强很多。
2、实现分离javascript
外部文件里完成添加onclick事件处理函数的工作，那样才能让我们的html文档没有“杂质。
仍然是上面的代码，把点击图片的js代码全部放到了外部的js文件中，这样关联起来全靠一个独一无二的id号。
3、实现向后兼容
进行必要的检查,确保老浏览器不会因为我们的javascript脚本而死机，
例如：if (!document.getElementsByTagName) return false //对象检测，如果浏览器不支持，就立即退出，不执行。
二、搞懂了的问题
1、return false;
<a href="javascript:showPic('images/coffee.jpg'); return false" title="A cup of coffee">Coffee</a>
return false这个语句的作用，就是阻止浏览器的默认行为不发生
当点击这个链接时，因为onclick事件处理函数所触发的javascript代码返回给它的值是false，所以这个链接 在被点击时默认行为将不会发生。
同样，onclick="showPic(this)；return false；"加了return false后可以不让用户被他们所点击的链接带到另一个图片查看窗口去。
2、document.body(专用记号)
等价于一下：
var body_element = document.getElementByTagName("body")[0];
3、结构化设计原则
每个函数应该只有一个入口和一个出口。
4、如何将多个javascript函数绑定到onload事件处理函数上
法一：匿名函数
window.onload = function(){
firstFun();
secondFun();
}
法二：
自己编写代码（写一个判断函数）
如果未加载，就加载事件函数；如果已加载，则追加到后面。！！注意：要把window.onload事件处理函数的值放进oldonload中
function addLoadEvent(func){
var oldonload = window.onload;
if(typeof window.onload != 'function'){ //判断页面是否已加载 ，已加载的话就追加到后面
window.onload = func;
}else{
window.onload = function(){
oldonload(); //
func();
}
}
}
三、javascript美术馆（改进）全部代码
gallery.html文件
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="style/css/gallery.css" type="text/css" /> <script src="js/showPic.js"></script> </head> <!-- 作者：1107989194@qq.com 时间：2014-04-14 描述：javascript美术馆 占位符、动态创建元素、 1、实现预留退路 （js被禁掉，图片也可以显示出来，href属性带有图片路径） 2、实现分离javascript（外部文件里完成添加onclick事件处理函数的工作，那样才能让我们的html文档没有“杂质） 3、实现向后兼容（进行必要的检查,向后兼容性if (!document.getElementsByTagName) return false） --> <body> <h1>Snapshots</h1> <ul id="imagegallery"> <li><a href="images/01.jpg" title="01 display"><img width="100px" src="images/01.jpg" alt="01"/></a></li> <li><a href="images/02.jpg" title="01 display"><img width="100px" src="images/02.jpg" alt="01"/></a></li> <li><a href="images/03.jpg" title="01 display"><img width="100px" src="images/03.jpg" alt="01"/></a></li> </ul> </body> </html>
css文件
*{
margin: 0;
padding: 0;
border: 0px;
list-style: none;
}
body{
font-family:"arial, helvetica, sans-serif";
color: #333;
background-color: #ccc;
margin: 1em 10%;
}
h1{
color: #333;
background-color: transparent;
}
a{
color: #c60;
background-color: transparent;
font-weight: bold;
text-decoration: none;
}
ul{
padding: 0;
}
li{
float: left;
padding: 1em;
list-style: none;
}
#imagegallery{
list-style: none;
}
#imagegallery li{
display: inline;
}
#imagegallery li a img{
border: 0px;
}
js文件：
/***********判断页面是否已加载事件的函数********************************/ function addLoadEvent(func){ var oldonload = window.onload; if(typeof window.onload != 'function'){ //判断页面是否已加载 ，已加载的话就追加到后面 window.onload = func; }else{ window.onload = function(){ oldonload(); // func(); } } } /***********自定义函数 将元素插入到一个元素的后面************************/ function insertAfter(newElement,targetElement){ var parent = targetElement.parentNode; if(parent.lastChild == targetElement){ parent.appendChild(newElement); }else{ parent.insertBefore(newElement,targetElement.nextSibling); } } /***************动态创建 占位符 ***********************************/ function preparePlaceholder(){ if(!document.createElement) return false; //对象检测 如果浏览器不支持，则停止执行并返回false if(!document.createTextNode) return false; if(!document.getElementById) return false; if(!document.getElementById('imagegallery')) return false; var placeholder = document.createElement('img'); placeholder.setAttribute('id','placeholder'); placeholder.setAttribute('src','images/placeholder.jpg'); placeholder.setAttribute('width','400px'); placeholder.setAttribute('alt','my image gallery'); var description = document.createElement('p'); description.setAttribute('id','description'); var desctext = document.createTextNode('choose an image'); description.appendChild(desctext); var gallery = document.getElementById('imagegallery'); insertAfter(placeholder,gallery); insertAfter(description,placeholder); } /****************循环输出所有的照片**********************************/ function prepareGallery(){ if(!document.getElementById) return false; //对象检测 if(!document.getElementsByTagName) return false; if(!document.getElementById('imagegallery')) return false; var gallery = document.getElementById('imagegallery'); //根据它的父级元素，找到所要的a标签，缩短查找事件（即使通过tagName可直接找到所有的a标签） var links = gallery.getElementsByTagName('a'); for(var i =0; i<links.length; i++){ links[i].onclick = function(){ return showPic(this); } links.onkeypress = links[i].onclick; } } /**************显示图片********************************************/ 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')) return false; if(whichpic.getAttribute('title')){ var text = whichpic.getAttribute('title'); }else{ var text = ''; } var description = document.getElementById('description'); if(description.firstChild.nodeType == 3){ description.firstChild.nodeValue = text; } return false; } addLoadEvent(preparePlaceholder); addLoadEvent(prepareGallery);