【JavaScript DOM编程艺术】- 案例研究：图片库改进版

根据上一章“最佳实践”的学习，我们来改进图片库。

是否平稳退化？

如果禁用了JS，浏览图片库是怎样的呢？
看起来是没有问题的，因为我们在< a >的href属性中使用了图片的真实地址，而不是伪协议或#。

JS和HTML是分离的嘛？

把onclick事件处理函数从HTML中分离到JS中。

是否向后兼容？

看起来代码并没有进行对象检测，所以我们需要。
在showPic函数中：

• 检查placeholder是否存在
• 存在的话nodeName是否为IMG
• 检查description是否存在
• 存在的话firstChild.nodeType是否等于3，即是否为文本节点。

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");
        var description = document.getElementById("description");
        if(description.firstChild.nodeType == 3){
            description.firstChild.nodeType = text;
        }
    }
}

在prepareGallery函数中

• 检查浏览器是否支持getElementsByTagName
• 检查浏览器是否支持getElementById
• 检查文档中是否有Id(“imagegallery”)

function prepareGallery(){
    if(!document.getElementsByTagName)return false;
    if(!document.getElementById)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].onclick = function(){
            showPic(this);
            return false;
        }
    }
}

看起来没什么问题了。可是如果我们把HTML中的placeholder删除，会发现点击图片链接没有反应。
问题在于prepareGallery函数做出了一个假设：showPic函数一定会正常返回。基于这一假设，prepareGallery函数取消了onclick事件的默认行为。
但实际上是否要返回false应该有showPic函数的返回来决定，即：

• 如果showPic函数正确执行返回true，prepareGallery返回false。
• 如果showPic函数未正确执行返回false，prepareGallery返回true使得链接可以被打开。

修改showPIc如下：

function showPic(whichPic){
    //原来的代码
    return true;
}

修改prepareGallery如下：

function prepareGallery(){
    //原来的代码
    for(var i=0;i<links.length;i++){
        links[i].onclick = function(){
            return !showPic(this);          
        }
    }
}

优化

还有一些细节值得优化，例如检查showPic函数中< a >标签中title属性是否存在，如果不存在则默认空字符串。

if(whichPic.getAttribute("title")){
    var text = whichPic.getAttribute("title");
}else{
    var text = "";
}

DOM Core和HTML-DOM

document.getElementsByTagName(“form”) 简化为 document.forms
类似
element.getAttribute(“src”) 简化为 element.src

尽管我们改进了代码，但是最理想的情况是，让一些元素在遇到支持DOM的浏览器时才出现在HTML文档里。在下一章里，我们会学习利用DOM提供的方法和属性创建HTML元素，并把它们插入HTML文档里。