原文链接: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

背景

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;
});

[未完待续……]

Tags: , ,



朋友们的留言

  1. hinadong | 08月 22nd, 2010 at 12:27

    天才的程序员!现在看了博主翻译的书后发现Javascript还是比较好理解的

    Reply to this comment
  2. Cein | 09月 11th, 2010 at 13:56

    经常光顾博主翻译的文章和书,再次道声谢谢!

    Reply to this comment
  3. 为之漫笔 | 09月 13th, 2010 at 09:07

    @Cein 不客气 :)

    Reply to this comment
  4. ugg boots | 12月 22nd, 2010 at 10:14

    天才的程序员!

    Reply to this comment
  5. Laminate Flooring | 05月 8th, 2011 at 16:58

    你都是为每个需要绑定单击事件的元素

    Reply to this comment
  6. tight virgin pussy | 09月 16th, 2011 at 02:31

    I think other web site proprietors really should take this website as an model, extremely clean and excellent user friendly style and design, as nicely as the content. You’re an expert in this subject!

    Reply to this comment
  7. nfl jerseys | 10月 7th, 2011 at 11:10

    Nfl Jerseys,The article is worth reading, I like it very much. I will keep your new articles.
    http://www.nfljerseysmalls.com

    Reply to this comment
  8. Ugg Boots On Sale | 10月 7th, 2011 at 11:10

    Ugg Boots On Sale I really like this website, and hope you will write more ,thanks a lot for your information.
    http://www.bestuggaustralia.com

    Reply to this comment
  9. supra shoes | 10月 25th, 2011 at 09:39

    The article is worth reading, I like it very much. I will keep your new articles.

    Reply to this comment
  10. north face outlet | 11月 5th, 2011 at 14:27

    Been reading this blog for awhile but i have been lazy to drop a comment and say thanks.
    I certainly enjoyed the way you explore your experience and knowledge of the subject! Keep up on it. Thanks for sharing the infoYou made fantastic nice points here.

    Reply to this comment
  11. new era 59fifty hats | 11月 16th, 2011 at 14:54

    YES! I finally found this web page! I’ve been looking just for this article for so long!!
    http://www.menacorde.com/wordpress/?p=608

    Reply to this comment
  12. cheap NFL jerseys | 11月 19th, 2011 at 17:40

    I love the way you wrote this article. This is wonderful. I do hope you intend to write more of these types of articles. Thank you for this interesting content!
    http://www.discountsjerseys.com/

    Reply to this comment
  13. bridal wedding dresses | 12月 13th, 2011 at 09:44

    good arctile , thanks for sharing it and please keep doing this good job .

    Reply to this comment
  14. custom jerseys | 12月 15th, 2011 at 14:49

    I monster beats,monster beats believe that supra shoes,supra shoes we are not real tods shoes,tods shoes social workers.

    Reply to this comment
  15. one shoulder wedding dresses | 01月 4th, 2012 at 13:57

    good post , i like it , thanks for sharing it . have a nice day .

    Reply to this comment

我来说两句儿

可以在留言中使用以下标签 :<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Spam Protection by WP-SpamFree