JavaScript DOM 编程艺术(第2版)读书笔记(6)

案例研究:图片库改进版

我们在学校里学过一种理论,叫做结构化程序设计。其中有这样一条原则:函数应该只有一个入口和一个出口。从理论上讲,我很赞同这项原则;但在实际工作中,过分拘泥于这项原则往往会使代码变得非常难以阅读。如果为了避免留下多个出口点而去改写那些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“,但它对键盘访问的支持相当完美。

<!--

作者:纤锐
出处:http://www.cnblogs.com/beginner2014/p/4166582.html
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接。谢谢合作。

-->

原文地址:https://www.cnblogs.com/beginner2014/p/4166582.html