zoukankan      html  css  js  c++  java
  • 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
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接。谢谢合作。

    -->

  • 相关阅读:
    HDU 1495 非常可乐
    ja
    Codeforces Good Bye 2016 E. New Year and Old Subsequence
    The 2019 Asia Nanchang First Round Online Programming Contest
    Educational Codeforces Round 72 (Rated for Div. 2)
    Codeforces Round #583 (Div. 1 + Div. 2, based on Olympiad of Metropolises)
    AtCoder Regular Contest 102
    AtCoder Regular Contest 103
    POJ1741 Tree(点分治)
    洛谷P2634 [国家集训队]聪聪可可(点分治)
  • 原文地址:https://www.cnblogs.com/beginner2014/p/4166582.html
Copyright © 2011-2022 走看看