窥探jQuery——面向JavaScript程序员

简介

Simon Willison来自英国，是一名经验丰富的开发人员。曾工作于Yahoo，是Web开发框架Django的创始人之一，也是OpenID的推动者。这是一篇针对jQuery的描述性文章，由于作者出色的分析，该文被引入jquery.com的教程库，对jQuery的推动有一定作用。英文版权归Simon Willison所有，中译文作者yangyang（aka davidkoree）。双语版可用于非商业传播，但须注明英文版作者、版权信息，以及中译文作者。翻译水平有限，请广大读者指正。

当 jQuery 在2006年1月现身时，给我的第一印象，是这玩意儿构造得很精明。基于CSS选择器（CSS selectors）来打点一切，其思路相当灵巧（参考getElementsBySelector）。但链盒工事（chaining stuff）看起来更像个噱头，并且整体看来，jQuery库提供的功能并不能覆盖所有基础性的东西。因此我断定，jQuery只会昙花一现。

几个月以来，我逐渐明白自己想错了。从技术工艺上考量，jQuery十分凌厉。它用简洁的方法，把大量常用功能封装起来，并提供精巧的插入式API，来满足标准库之外的功能模块的实现。jQuery秉持的核心，乃DOM元素的集合（译注：通常是某些子集合）——它把元素集合作为一个根本，给高度抽象出来了。最重要的，是这种遵循最佳实践的抽象，能让jQuery与其他JavaScript代码相处融洽。

很多对jQuery的介绍，都是针对设计师和初级开发人员。接下来我想说明，为什么jQuery也会吸引那些富有经验的开发人员。

名称空间（Namespacing）

编写可重用的、优秀的JavaScript代码，其关键在于对名称空间的积极把控。JavaScript只拥有单一的、全局的名称空间（即window对象），而很多程序员（以及一些库）恣意地为之添加各种东西。要知道全局变量是魔鬼！聪明的开发人员，会使用类似组件模式的技术，来尽力减少全局对象的数量。

jQuery仅向全局名称空间引入一个标记：jQuery函数/对象。其余的要么是jQuery的直接属性（译注：原文‘directy property’系笔误，应是‘direct property’），要么就是调用jQuery函数所返回的对象的方法。

那“语言升级”（language enhancements）又是什么呢？大多数库会提供映射，过滤，剥离，往往是浏览器的JavaScript引擎所缺少的那些功能。还有一些库，直接扩展了JavaScript内置的String和Array类，但这是冒险的做法。String.prototype和Array.prototype也有各自的名称空间，在其内添加的属性一旦发生冲突，所带来的风险，不亚于在全局环境下的草率大意。

在语言升级方面，jQuery提供了很多函数（功能），但每个函数都被赋给jQuery对象的属性：jQuery.each，jQuery.extend，jQuery.grep，jQuery.map，jQuery.merge以及jQuery.trim。如此一来，它们就不会跟其他代码产生冲突。

声名狼藉的$函数（The infamous $ function）

刚才我说到，jQuery是唯一被引入的全局标记，其实并不尽然：$标记作为jQuery的快捷方式，也被引入进来。庆幸的是，$的存在不会带来负面影响：如果你需要让原始的$起死回生（比如，这之前你的代码使用了Prototype），你可以调用jQuery.noConflict()来恢复它。

如果你既想拥有$的便利，又不希望jQuery跟其他同样使用了全局$函数的代码发生冲突，可遵循jQuery文档所建议的惯用方式：

(function($) {    // 在这个函数体里，$可作为jQuery的引用    // 很方便，对吧？})(jQuery);把一切都附加到$标记的做法，曾让我认为jQuery华而不实。不过，从体系的角度来审视这种设计，一切又是非常明了的——尽管我常喜欢在代码中定义自己的$快捷方式。

选取元素（Selecting some elements）

jQuery的每个操作，都以选取DOM中一个或更多的节点（nodes）作为开始。jQuery（拥有一种真正的面向特定领域）的选取语法，是十分有趣的，它结合了CSS 1，CSS 2，部分CSS 3语法，一些XPath语法，以及一些特定的扩展。在这里我不会做详细介绍，我只列出几个有用的例子：


jQuery('div.panel')
选取了所有class="panel"的div
jQuery('p#intro')
选取了所有id="intro"的段落
jQuery('div#content a:visible')
选取了id="content"的div中所有可见的链接
jQuery('input[@name=email]')
选取了所有name="email"的输入域
jQuery('table.orders tr:odd')
选取了类名为“orders”的表中所有的奇数行

jQuery('a[@href^="http://"]')
选取了所有（以http://开头的）外部链接
jQuery('p[a]')
选取了所有包含一个或多个链接的段落

上述例子中，:visible和:odd是jQuery实现的扩展，很具特色。而属性的选取使用@作为标记，其方式和XPath一样，要优于CSS 2。

jQuery的这套选取语法包罗万象，有些类似正则表达式，想完全消化是需要花上一段时间的。