《DOM编程艺术》中初步实现的图片库的总结（二）
前言：在《DOM编程艺术》中初步实现的图片库的总结（一）中，有很多不足之处：比如事件处理嵌套在HTML中，显得如此笨重和屌丝；没有对showPic函数进行相应的安全检查等，本篇文章对上述问题做了全面的升级。
－－－－－－－－－－－－－－－－－－－－开始－－－－－－－－－－－－－－－－－－－－－
1.首先要把HTML部分进行改造
去掉嵌套在HTML中的事件处理代码，并且为了js能操作标签，需要对标签添加ID属性值
# 电影天堂 1. 灰姑娘 1. 千与千寻 1. 哆啦A梦 1. 当幸福来敲门选择一张图片2.获取标签中的节点a，遍历并且绑定事件处理
function prepareFilm(){ if(!document.getElementsByTagName){ return false; } if(!document.getElementById){ return false; } if(!document.getElementById("filmlist")){ return false; } var list = document.getElementById("filmlist"); var links = list.getElementsByTagName("a"); for(var i = 0; i3.本例非必需：共享onload事件
本例中必须执行prepareFilm函数才能对onclick事件进行绑定，但是这个函数又不能在HTML文档加载之前执行，网页加载完毕时会触发一个onload事件，但是需要执行的函数有多个逐一添加又麻烦，而且后续的函数会覆盖上一个，所以就有必要封装一个addLoadEvent函数把将要执行的函数作为参数传进去，
//共享onlond事件，封装成一个函数,@func是页面加载时需要执行的那个函数。//如果window.onload在页面加载时还没有绑定任何函数，就把需要执行的函数添加给它、//如果这个处理函数已经绑定了函数，就把新函数追加到现有指令的末尾function addLoadEvent(func){ //把现有的window.onload存入变量oldonload var oldonload = window.onload; if(typeof window.onload != 'function'){ window.onload = func; }else{ window.onload = function(){ oldonload(); func(); } }}但是这个时候还有一些bug，就是没有对showPic函数进行必要的安全检查，而showPic函数要被prepareFilm函数调用，假如它获取不到图片呢？
4.对showPic函数进行安全检查
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;}但是还是有问题，就是此时prepareFilm函数做了一个假设：showPic函数肯定会正常返回，基于这一假设，prepareFilm函数在执行showPic函数时就会提前返回一个true，从而取消了onclick事件的默认行为。所以是否要返回一个false值取消onclick默认行为，应该由showPic函数决定，图片切换成功返回true，图片切换失败，返回false。
所以此时应该把prepareFilm函数最后两句改为：return !showPic(this);
5.添加更多的检查
（1）假设每个链接都有title属性，假如不存在把text值设置为空；
（2）placeholder是否存在？假设那是一张图片（本例中它确实是图片），为了验证这个情况，可以用nodeName属性增加这一项测试。
下面是添加更多的检查之后的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;}6.调用addLoadEvent函数
//在页面加载完成后调用prepareFilm函数addLoadEvent(prepareFilm);7.完整代码
老规矩，上完整源码
example h1 { color: # 333; } a { color: gray; font-weight: bold; text-decoration: none; } ul { padding: 0; } li { float: left; padding: 1em; list-style-type: none; } img { display: block; clear: both; }# 电影天堂 1. 灰姑娘 1. 千与千寻 1. 哆啦A梦 1. 当幸福来敲门选择一张图片 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; } function prepareFilm(){ if(!document.getElementsByTagName){ return false; } if(!document.getElementById){ return false; } if(!document.getElementById("filmlist")){ return false; } var list = document.getElementById("filmlist"); var links = list.getElementsByTagName("a"); for(var i = 0; i关键字：JavaScript
版权声明
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！
