javascript dom编程艺术笔记之图片库的改进

Posted 故事情结

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javascript dom编程艺术笔记之图片库的改进相关的知识,希望对你有一定的参考价值。

dom的操作要遵守的原则

1.平稳退化

2.分离javascript

3.向后兼容

4.性能考虑

 

改进后的显示图片方法

 

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){
        discription.firstChild.nodeValue=text;
     }
    }
    return true;
}

 

新添加的分离html和javascript方法

function prepareGallery(){
    if(!document.getElementById) return false;
    if(!document.getElementByTagName) return false;
    if(!document.getElementById("imagegallery")) return false;
    var gallery=document.getElementById("imagegallery");
    var link=gallery.getElementByTagName("a");
    for(var i=0; i<link.length ;i++){
        link[i].onclick=function(){
            return showpic(this) ? false:true;
        }
    }
}

 

添加事件的方法

function addLoadEvent(func){
    var oldonload=window.onload;
    if(typeof window.onload!=‘function‘){
        window.onload=func;
    }else{
        window.onload-function(){
            oldonload();
            func();
        }
    }
 }

以上是关于javascript dom编程艺术笔记之图片库的改进的主要内容,如果未能解决你的问题,请参考以下文章

干货JavaScript DOM编程艺术学习笔记4-6

JavaScript DOM编程艺术 读书笔记 第4章 案例研究:Javascript图片库

干货JavaScript DOM编程艺术学习笔记7-9

JavaScript DOM编程艺术-学习笔记(第十二章)

JavaScript DOM 编程艺术 笔记

Javascript DOM 编程艺术读书笔记16/03/26