《DOM编程艺术》中初步实现的图片库的总结（二）

阿罗发布于2019-08-19 18:32 / 3397人阅读

摘要：前言在编程艺术中初步实现的图片库的总结一中，有很多不足之处比如事件处理嵌套在中，显得如此笨重和屌丝没有对函数进行相应的安全检查等，本篇文章对上述问题做了全面的升级。

前言：在《DOM编程艺术》中初步实现的图片库的总结（一）中，有很多不足之处：比如事件处理嵌套在HTML中，显得如此笨重和屌丝；没有对showPic函数进行相应的安全检查等，本篇文章对上述问题做了全面的升级。
－－－－－－－－－－－－－－－－－－－－开始－－－－－－－－－－－－－－－－－－－－－

1.首先要把HTML部分进行改造

去掉嵌套在HTML中的事件处理代码，并且为了js能操作

电影天堂

选择一张图片

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; i
3.本例非必需：共享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
    



    电影天堂
    
        
            灰姑娘
        
        
            千与千寻
        
        
            哆啦A梦
        
        
            当幸福来敲门
        
    
    
    
    
    选择一张图片

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79684.html

《DOM编程艺术》中初步实现的图片库的总结（一）

摘要：灰姑娘灰姑娘灰姑娘不足点击事件绑定在代码中，很笨重，下一篇中将做升级。前言：在《DOM编程艺术》一书中，作者给出了一个实例：创建一个图片库，其实功能很简单，就是点击某个列表项时，下方出现相应的图片以及图片说明（图片说明事先以title的形式写在HTML中），虽然是一个简单的例子，当时作者在书中循序渐进，不断的改善图片库中间引入各种知识点，真的是一本好书，在此对这个实例进行一些总结。 ...

Yi_Zhi_Yu 2019-08-19 18:31 评论0 收藏0
DOM事件总结（一）

摘要：三级事件处理程序级事件定义了两个方法，分别用于处理指定和删除事件处理程序的操作和，他们都接收三个参数要处理的事件名作为事件处理程序的函数一个布尔值。布尔值如果是表示在捕获阶段调用事件处理程序，如果是表示在冒泡阶段调用事件处理程序。前言：撸完CSS－DOM紧接着来撸DOM事件，事件总结完成后我要开始总结动画，然后用纯JS实现一个轮播图，前路漫漫，还有各种框架等着我～～～本篇主要内容有：...

hedge_hog 2019-08-19 18:32 评论0 收藏0
《DOM编程艺术》中CSS—DOM的总结（二）

摘要：部分这是一个表格月日北京路号人民广场月日南京路号人民博物馆月日上海路号人民艺术中心部分要美观，还是稍微写点样式吧代码部分思路就是获取到所有的，然后遍历，并对做样式修改。前言：接上篇，本篇有两个内容：一个是Demo：当鼠标hover到表格的一行上时这行表格字体加粗。。。好了，废话少说，开始！！！－－－－－－－－－－－－－－－－－－严肃的分割线－－－－－－－－－－－－－－－－－－ 1....

yangrd 2019-08-19 18:32 评论0 收藏0
《DOM编程艺术》中CSS—DOM的总结（二）

摘要：部分这是一个表格月日北京路号人民广场月日南京路号人民博物馆月日上海路号人民艺术中心部分要美观，还是稍微写点样式吧代码部分思路就是获取到所有的，然后遍历，并对做样式修改。前言：接上篇，本篇有两个内容：一个是Demo：当鼠标hover到表格的一行上时这行表格字体加粗。。。好了，废话少说，开始！！！－－－－－－－－－－－－－－－－－－严肃的分割线－－－－－－－－－－－－－－－－－－ 1....

amc 2019-08-29 10:54 评论0 收藏0
《DOM编程艺术》中CSS—DOM的总结（三）

摘要：前言这是系列最后一篇，本文主要总结了的用法，以及最后对函数进行抽象。一个多说无益，还是上代码来得实在还记得编程艺术中的总结一中那个无聊的根据元素在节点树里的位置来设置样式的吧现在可以用属性直接更改样式了。前言：这是CSS－DOM系列最后一篇，本文主要总结了className的用法，以及最后对函数进行抽象。－－－－－－－－－－－－－－－－－－我是分割线－－－－－－－－－－－－－－－－...

王岩威 2019-08-29 10:54 评论0 收藏0