案例研究：图片库改进版

我们在学校里学过一种理论，叫做结构化程序设计。其中有这样一条原则：函数应该只有一个入口和一个出口。从理论上讲，我很赞同这项原则；但在实际工作中，过分拘泥于这项原则往往会使代码变得非常难以阅读。如果为了避免留下多个出口点而去改写那些if语句的话，这个函数的核心代码就会被掩埋在一层又一层的花括号里，就像下面这样：

function prepareGallery(){

  if (document.getElementsByTagName){

     if (document.getElementById){

       if(document.getElementById("imagegallery")){

         statements go here...

       }

    }

  }

}

我个人认为，如果一个函数有多个出口，只要这些出口集中出现在函数的开头部分，就是可以接受的。就像下面这样：

function prepareGallery(){

  if (!document.getElementsByTagName) return false;

  if(!document.getElementById) return false;

  if(!document.getElementById("imagegallery")) return false;

  statements go here...

}

注意：在为变量命名时一定要谨慎从事。有些单词在Javascript 语言里有特殊的含义和用途，这些统称为“保留字”的单词不能用做变量名。另外，现有Javascript 函数或方法的名字也不能用来命名变量。不要使用诸如alert、var或if之类的单词作为变量的名字。

共享onload事件

假设我有两个函数：firstFunction 和 secondFunction。如果想让它们俩都在页面加载时得到执行，我该怎么办？如果把它们逐一绑定到onload事件上，它们当中将只有最后那个才会被实际执行：

window.onload = firstFunction ;

window.onload = secondFunction;

secondFunction将取代firstFunction 。

有一种方法可以让我避过这一难题：可以先创建一个匿名函数来容纳这两个函数，然后把那个匿名函数绑定到onload事件上，如下所示：

window.onload = function(){

  firstFunction ();

  secondFunction();

}

它确实能很好地工作——在需要绑定的函数不是很多的场合，这应该是最简单的解决方案了。

这里还有一个弹性最佳的解决方案——不管你打算在页面加载完毕时执行多少个函数，它都可以应付自如。这个方案需要额外编写一些代码，但好处是一旦有了那些代码，把函数绑定到window.onload事件就非常容易了。

这个函数的名字是addLoadEvent，它是由Simon Willison编写的。它只有一个参数：打算在页面加载完毕时执行的函数的名字。

下面是addLoadEvent函数将要完成的操作：

1，把现有的window.onload事件处理函数的值存入变量oldonload。

2，如果这个处理函数上还没有绑定任何函数，就像平时那样把新函数添加给它。

3，如果这个处理函数上已经绑定了一些函数，就把新函数追加到现有指令的末尾。

下面是addLoadEvent函数的代码清单：

function addLoadEvent(func){

  var oldonload = window.onload;

  if(typeof window.onlaod != ‘function‘){

    window.onload = func;

  }else{

    window.onload = functoin(){

      oldonload();

      func();

    }

  }

}

这将把那些在页面加载完毕时执行的函数创建为一个队列。如果想把刚才那两个函数添加到这个队列里去，只需写出以下代码就行了：

addLoadEvent(firstFunction);

addLoadEvent(secondFunction);

键盘访问

并不是所有用户都使用鼠标。比如说，有视力残疾的用户往往无法看清屏幕上四处移动的鼠标指针，他们往往更喜欢使用键盘。

有个名叫onkeypress的事件处理函数是专门用来处理键盘事件的。按下键盘上任何一个按键都会触发onkeypress事件。

如果想让onkeypress事件与onclick事件触发同样的行为，可以简单地把有关指令复制一份：

links[i].onclick = function(){

  return showPic(this)?false:true;

}

links[i].onkeypress = function(){

  return showPic(this)?false:true;

}

还有一种更简单的办法：

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

但是onkeypress 函数很容易出问题。用户每按下一个按键都会触发它。在某些浏览器里，甚至包括Tab键！这意味着如果绑定在onkeypress 事件上的处理函数上返回的是false，那些只使用键盘访问的用户将永远无法离开当前链接。

那这些只使用键盘的人可怎么办？

幸运的是，onclick事件处理函数比我们想象的聪明。虽然它的名字"onclick"给人一种它只与鼠标点击动作相关联的印象，但事实却并非如此：在几乎所有的浏览器里，用Tab键移动到某个链接然后按下回车键的动作也会触发onclick事件。

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

JavaScript DOM 编程艺术（第2版）读书笔记（6）