John Resig谈改进Web应用的高级JavaScript技术

2010年2月，JavaScript框架jQuery的创建者及核心开发人员John Resig，在今年迈阿密举行的Future of Web Apps大会上作了演讲。在短短25分钟的演讲中，John为与会者概述了jQuery 1.4背后的新特性和新理念。以下是根据他的演讲录音整理的文字稿。 谢谢。感谢邀请我来这里的所有人。真的非常感谢。今天，我想谈两个话题，基本上是围绕jQuery展开的，但我会尽量照顾到那些没有使用jQuery的朋友，希望这两个话题对你们开发Web应用也会有所帮助。 在座的所有朋友在开发Web应用时，可能都要用到几种技术。我们总想提升JavaScript代码的性能，总想增强易访问性，让代码更简单一点。最后，我们还想让设计过程再容易一些。 说到性能，在JavaScript中有很多技术可以运用，其中有三个比较容易，而通过jQuery来实现则会更容易。一个就是事件委托。事件委托是一种绕过传统方法的事件绑定技术。我的意思是说，通常在为某个元素添加单击处理程序时，你都是为每个需要绑定单击事件的元素，分别绑定单击处理程序。这样做真的很浪费。如果有一个包含上千个单元格的表格，那么你就要添加大量的单击处理程序。 事件委托，就是在你添加处理程序时，要添加到DOM树上层的某个父元素上。比如，添加到表格上，而不是添加到每个单元格上。这样就可以利用浏览器原 生的事件冒泡机制。也就是说，用户在单击某个单元格时，事件会沿DOM树向上冒泡，冒泡到表格，而你可以在这个时候再处理它。这就是事件委托。 这样一来，你只要为文档添加一个事件就行，根本用不着添加几千个。而且速度又快，灵活性又高。为此，jQuery提供了两个方法；一个是 “dotlive”（.live()）。另一个则是我们前几天刚刚添加的方法，即“delegate”（.delegate()）。关于委托，除了它的速 度快之外，我认为真正有价值的地方在于，它对所有当前乃至未来的元素都有效。即便现在文档中只有一千个单元格，而你又添加了一千个，它照样还是有效。你不 用为处理新增的单元格而添加新处理程序。 委托方法（.delegate()）是这几天我们刚刚加进来的。这个方法的本质就是将委托的概念具体化了。下面我想讲一个实际的例子。假如你想为某 个核心元素，例如表格，添加单击事件。然后你还要监视（这个表格中）任意单元格上的悬停事件。那么，只要编写短短几行代码，很快就可以实现你的意图。 $(“table”).delegate(“td”, “hover”, function(){ $(this).toggleClass(“active”); }); 实时事件（.live()）则是另外一种编写和实现委托的方式，但关键是它能起作用，并且看上去与事件绑定的效果还完全一样。你可以使用相同的语 法，可以使用选择符，然后可以直接给它添加事件，或者至少看起来是直接的。而在后台，jQuery会帮你周旋并确保一切都各就各位。 举个例子，我们这里在鼠标悬停时会显示一些菜单，子菜单在消失时带一个小动画。有意思的是，如果我们又添加了新菜单，这个新添加的菜单也会带有相同的动画。这时候，动画效果的添加就是实时的。而且，不管是对页面中当前还是将来的元素，也都会持续有效。（点击这里查看交互演示。） $(“a.menu”).live(“hover”, function(){ $(this).next().toggle(200); return false; }); 转载出处：http://www.cn-cuckoo.com/2010/04/09/john-resig-on-advanced-javascript-to-improve-your-web-app-1493.html 原文链接：http://carsonified.com/blog/dev/john-resig-on-advanced-javascript-to-improve-your-web-app/ 录音整理：http://carsonified.com/blog/author/keir-whitaker/ 在线演示：http://ejohn.org/apps/workshop/adv-talk/index2.html