［笔记7］JavaScript DOM编程艺术_图片库改进版

勤于思考是每位有创新精神的网页设计人员都应该具备的特质。

平稳退化

第一个问题，如果JS功能被禁用，会怎么样？把href属性设置为一个真实存在的值，能够让之前提到的图片库平稳退化。

JS与HTML标记是分离的吗？

第二个问题，网页的行为层(JS)是作用于其结构层(HTML)之上的么？还是两种代码混杂在一起？

• 必须找到一种“挂钩”把JS代码与HTML文档中的有关标记关联起来。在页面元素上设置class和id是常见的方式，应该合理设置这些类型，少为佳。

添加事件处理函数

现在我需要编写一个简短的函数把有关操作关联到onclick事件上，函数命名为prepareGallery

• 检查当前浏览器是否理解getElementsByTagName
• 检查当前浏览器是否理解getElementById
• 检查当前网页是否存在一个id为imagegallery的元素
• 遍历imagegallery元素中的所有链接
• 设置onclick事件，让它在有关链接被点击时完成以下操作。
  • 把这个链接作为参数传递给showPic函数
  • 取消链接被点击时的默认行为，不让浏览器打开这个链接
    检查点

var supported=document.getElementsByTagName&&document.getElementById;
if(!supported)return;
//更加针对的检查
if(!document.getElementById("imagegallery")){
   return false;
}

作为一条原则，如果想用JS给某个网页添加一些行为，就不应该让JS代码对这个网页结构有任何依赖。

整理后的代码如下：

function prepareGallery(){
   if(!document.getElementsByTagName) return false;
   if(!document.getElementById)return false;
   if(!document.getElementById("imagegallery"))return false;
}

变量名里有什么
使用变量名进行对象的临时存储。

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");
}

遍历
改变行为

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;
    }
   }
}

共享onload事件

让函数在网页加载完毕后立即执行。

PS：但是如果存在多个函数，需要在网页加载完毕之后执行，可以先创建一个匿名函数来容纳这两个函数，然后把这两个匿名函数绑定到onload事件上。

window.onload=function(){
    firstFunction();
    secondFunction();
}

这里还有一个弹性最佳的解决方案。使用addLoadEvent，它只有一个参数，打算在页面加载完毕时执行函数的名字。

addLoadEvent函数将要完成的操作。

• 把现有的window.onload事件处理函数的值存入变量oldonload
• 如果在这个处理函数上海没有绑定任何函数，就像平时那样把新函数添加给它。
• 如果在这个处理函数上已经绑定了一些函数，就把新函数追加到现有指令的末尾。

addLoadEvent函数的代码清单。

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

//上面的代码我们就可以这样实现。
addLoadEvent(firstFunction);
addLoadEvent(secondFunction);

不要做太多的假设

在代码里用到了id属性值等于palceholder和description的元素，但我并未对这些元素是否存在做任何检查。我们需要增加一些语句来检查这些元素是否存在。

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;
}

改进后的showPic函数不再假设有关标记文档里肯定存在着placeholder图片和description元素，即使没有placeholder图片，也不会发生任何JS错误。但是有一个问题就是如果把placeholder图片从标记文档里删掉并在浏览器里刷新这个页面，就会出现无论点击清单里的哪一个链接，都没有任何响应。
原因在于showPic函数肯定会正常返回，基于这一假设，prepareGallery函数取消了onclick事件的默认行为。

links[i].onclick=function(){
        showPic(this);
        return false;
    }

是否要返回一个false值来取消onclick事件的默认行为，应该由showPic函数决定。showPic应返回两个可能的值。

• 如果图片切换成功，返回true。
• 如果图片切换不成功，返回false。

源码链接：

优化

尽管代码已经相当完善了，在showPic函数里仍存在一些需要处理的假设。

• 检查title属性是否真的存在

if(whichpic.getAttribute("title")!=null)
或者
if(whichpic.getAttribute("title"))
代码优化如下：
var text＝whichpic.getAttribute("tilte")?whichpic.getAttribute("title"):"";

• 检查placeholder元素是否存在

if(placeholder.nodeName!="IMG")return false;

请注意，nodeName属性总是返回一个大写字母的值，即使元素在HTML文档中是小写字母。
-对description元素的第一个子元素是一个文本节点进行检查。

if(description.firstChild.nodeType==3){
  description.firstChild.nodeValue=text;
}

优化后的代码如下：

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;
}

PS:在实际工作中，你要自己决定是否真的需要这些检查。它们针对的是HTML文档有可能不在你控制范围内的情况。

键盘访问

在有关onclick事件处理的脚本中，有一项优化工作是不能不考虑的。

公所周知，不使用鼠标也可以浏览Web。键盘上的Tab键可以让我们从这个链接移动到另一个链接，而按下回车键将启用当前链接。有个名叫onkeypress的事件处理函数是专门用来处理键盘事件的。按下键盘上任何一个按键都会触发onkeypress事件。

一种简单的方法：
可以确保onkeypress模仿onclick事件行为。

links[i].onkeypress=links[i].onclick;

小心onkeypress

最后的决定是不添加onkeypress事件处理函数。原因是这个事件处理函数很容易出问题。用户每按下一个案件都会触发它。
onclick事件与鼠标点击动作相关联的感觉。事实却并非如此。在几乎所有浏览器里，用tab键移动到某个链接然后按下回车键的动作也会触发onclick事件。从这点看来，把它命名为onactivate更恰当。

最好不要使用onkeypress事件处理函数。onclick事件处理函数已经能满足需要，虽然它叫做onclick，但是它对键盘的访问支持相当完美。

最终代码：

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 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(){
        return !showPic(this);
    }
   }
}

把JS与CSS结合起来

把内嵌型事件处理函数移出标记文档时，我在文档里为JS代码留下了一个“挂钩”，如<ul id="imagegallery">，这个挂钩完全可以用在CSS样式表里。

DOM Core和HTML-DOM

在编写JS代码时只用到以下几个DOM方法。

• getElementById
• getElementByTagName
• getAttribute
• setAttribute
  这些方法都是DOM Core的组成部分。它们并不专属于JS，支持DOM的任何一种程序设计语言都可以使用它们。它们的用途也并非仅限于处理网页，它们可以用来处理用任何一种标记语言编写出来的文档。

PS：在Web文档中，同样的代码即可以使用DOM来编写，也可以使用HTML-DOM来编写。通常情况下，HTML-DOM的语句更简短。如：var source＝whichpic.getAttribute("href");可以使用HTML-DOM达到同样目的的语句：var source＝whichpic.href;

结构与行为的分离程度越大越好。