(function(){
   var resources = document.getElementById('resources');
   resources.addEventListener('click',handler,false);
   function handler(e){
    var x = e.target; // get the link tha
    if(x.nodeName.toLowerCase() === 'a'){
     alert('Event delegation:' + x);
     e.preventDefault();
    }
   };
  })();

因为点击事件就发生在这些页面元素里，你要做的就是比较它们的 nodeName，找出应该回应这个事件的那个元素。

免责声明：上面说的这两个关于事件的例子，在所有浏览器里都能运行，除了IE6，在IE6上你需要使用一个事件模型，而不是简单的W3C的标准实现。这也就是我们推荐使用一些工具包的原因。

这种方法的好处并不是仅限于把多个事件处理器缩减为一个。你想想，举个例子，你需要动态的往这个链接表里追加更多的链接。使用事件委托后，你就不需要做其它修改了；否则的话，你需要重新循环这个链接表，重新给每个链接安装事件处理器。

匿名函数和模块化

在JavaScript里最令人懊恼的事情是变量没有使用范围。任何变量，函数，数组，对象，只要不在函数内部，都被认为是全局的，这就是说，这个页面上的其它脚本也可以访问它，而且可以覆盖重写它。

解决办法是，把你的变量放在一个匿名函数内部，定义完之后立即调用它。例如，下面的写法将会产生三个全局变量和两个全局函数：

复制代码 代码如下:

  var name = 'Chris';
  var age = '34';
  var status = 'single';
  function createMember(){
  // [...]
  }
  function getMemberDetails(){
  // [...]
  }

如果这个页面上的其它脚本里也存在一个叫 status 的变量，麻烦就会出现。如果我们把它们封装在一个 myApplication 里，这个问题就迎刃而解了：

复制代码 代码如下:

  var myApplication = function(){
   var name = 'Chris';
   var age = '34';
   var status = 'single';
   function createMember(){
    // [...]
   }
   function getMemberDetails(){
    // [...]
   }
  }();

但是，这样一来，在函数外面就没有什么功能了。如果这是你需要的，那就可以了。你还可以省去函数的名称：

复制代码 代码如下:

  (function(){
   var name = 'Chris';
   var age = '34';
   var status = 'single';
   function createMember(){
    // [...]
   }
   function getMemberDetails(){
    // [...]
   }
  })();

如果你想在函数外面也能使用里面的东西，那就要做些修改。为了能访问 createMember() 或 getMemberDetails(),你需要把它们变成 myApplication的属性，从而把它们暴露于外部的世界:

复制代码 代码如下:

  var myApplication = function(){
   var name = 'Chris';
   var age = '34';
   var status = 'single';
   return{
    createMember:function(){
     // [...]
    },
    getMemberDetails:function(){
     // [...]
    }
   }
  }();
  //myApplication.createMember() 和
  //myApplication.getMemberDetails() 就可以使用了。
[code]
这被称作 module 模式或 singleton。Douglas Crockford 多次谈到过这些，Yahoo User Interface Library YUI 里对此有大量的使用。但这样一来让我感到不便的是，我需要改变句式来使函数和变量能被外界访问。更甚者，调用时我还需要加上myApplication 这个前缀。所以，我不喜欢这样做，我更愿意简单的把需要能被外界访问的元素的指针导出来。这样做后，反倒简化了外界调用的写法：
[code]
  var myApplication = function(){
   var name = 'Chris';
   var age = '34';
   var status = 'single';
   function createMember(){
    // [...]
   }
   function getMemberDetails(){
    // [...]
   }
   return{
    create:createMember,
    get:getMemberDetails
   }
  }();
  //现在写成 myApplication.get()和 myApplication.create() 就行了。我把这个称作 “revealing module pattern.”

可配置化

一旦我把所写的JavaScript代码发布到这个世界上，就有人想改动它，通常是人们想让它完成一些它本身完成不了的任务—但通常也是我写的程序不够灵活，没有提供用户可自定义的功能。解决办法是给你的脚本增加一个配置项对象。我曾经写过一篇深入介绍JavaScript配置项对象的文章，下面是其中的要点：

在你的脚本了添加一个叫做configuration的对象。
这个对象里面，存放所有人们在使用这个脚本时经常要改动的东西：
CSS ID 和类名称;
按钮的名称，标签字等;
诸如”每页显示图片数”的值， “图像的显示的尺寸”的值;
地点，位置，以及语言设置。
将这个对象作为一个公用属性返回给用户，这样用户可以修改覆盖它。
通常情况下这是你编程过程中的最后一步要做的事情。我把这些集中表现在了一个例子里： “Five things to do to a script before handing it over to the next developer.”

实际上，你也希望你的代码能够让人们很方面的使用，并且根据他们各自的需要进行一些改动。如果你实现了这个功能，你会少收到一些抱怨你的脚本的人发送给你的让你困惑的邮件，这些信件会告诉你，有人修改了你的脚本，而且很好用。

与后台交互

在这么多年的编程经历中，我所领悟到的一个重要的事情就是，JavaScript是一个很优秀的开发界面交互的语言，但如果用来处理数字或访问数据源，那就有点使不上劲了。
最初，我学习JavaScript，是用来替代Perl的，因为我很讨厌非要把代码拷贝到 cgi-bin 文件夹下才能使Perl运行。后来，我明白了应该使用一种后台工作的语言来处理主要的数据，而不能什么事情都让JavaScript去做。更重要的是我们要考虑安全性和语言特征。

如果我访问一个Web service, 我可以获取到JSON-P 格式的数据，在客户端浏览器里我把它做各种各样的数据转换，但当我有了服务器时，我有了更多的方法来转换数据，我可以在Server端生成JSON或HTML格式的数据返回给客户端，以及缓存数据等操作。如果你事先了解了并准备了这些，你会长期收益，省去了很多头疼的时间。编写适用各种浏览器的程序是种浪费时间，使用工具包吧！

在我最初开始搞Web开发时，在访问页面时，究竟是使用 document.all 还是使用 document.layers 的问题上痛苦的挣扎了很久。我选择了 document.layers，因为我喜欢任何层都是自己的document的思想 (而且我写了太多的 document.write 来生成元素)。层模式最终失败了，于是我开始使用 document.all。当Netscape 6 公布只支持 W3C DOM 模型时，我很高兴，但其实用户并不关心这些。用户只是看见这种浏览器不能显示大多数浏览器都能正常显示的东西—这是我们编码的问题。我们编写了短视的代码，只能运行在当前的环境下，而不幸的是，我们的运行环境却在不停的改变。

我已经浪费了太多的时间来处理对各种浏览器各种版本兼容的问题。善于处理这类问题提供了我一个好的工作机会。但现在我们不必在忍受这种痛苦了。

一些工具包，例如 YUI, jQuery 以及Dojo 都能够帮我们处理这类问题。它们通过抽象各种接口实现来处理浏览器的各种问题，像版本不兼容，设计缺陷等，把我们从痛苦中解救出来。除非你要测试某个Beta版的浏览器，千万不要在自己的程序里添加修正浏览器的缺陷的代码，因为你很有可能当浏览器已经修改了这个问题时，你却忘了删除你的代码。

另一方面，完全依赖于工具包也是个短视的行为。工具包可以帮你快速的开发，但如果你不深入理解JavaScript，你也会做错事。