《扩展 jQuery》——第2章　第一个插件2.1　jQuery的架构-CSDN博客

本节书摘来自异步社区《扩展 jQuery》一书中的第2章，第2.1节，作者：【美】Keith Wood著，更多章节内容可以访问云栖社区“异步社区”公众号查看

第2章　第一个插件

jQuery是一个可以使得与网页上元素交互更容易的JavaScript库。它通常被用于通过直接选择或者遍历DOM来查找元素，然后在这些元素上应用一些功能。开发者可以添加或删除这些元素，或者改变它们的属性，还可以为它们添加事件处理器用来响应用户的动作。开发者也可以随着时间推移改变元素的属性来产生动画。jQuery也提供了Ajax让开发者容易地从服务器上获取数据，并且不阻塞当前页面及其内容。
2.1　jQuery的架构
jQuery的源代码由许多文件组成，这是为了开发阶段的需要。在构建阶段，它们将会被合并为单个JavaScript文件（供产品使用的最小化版本，或者方便调试的完整版本）。每一个源代码文件专注于jQuery的一个特定功能，其中许多提供了扩展点，可以用来增强内置功能。

一个扩展点是指一个可以用来注册特定类型（如集合函数或者 Ajax 增强）新功能的jQuery属性或者函数，这些新功能被视为和相应的内置功能完全一样。当框架处理到开发者的插件的引用时，就会调用相应的插件代码。

图2.1反映了组成jQuery的模块或文件，以及它们之间的依赖。

screenshot

jQuery的主要可扩展模块（图2.1中的阴影部分）包括：提供了选择DOM元素功能的Sizzle库；包括jQuery函数本身的core模块、处理Ajax的ajax模块、处理事件的event模块，以及提供动画功能的effects模块。

2.1.1　 jQuery的扩展点
表2.1列出了jQuery和jQuery UI所提供的扩展点，接下来的几小节中会介绍它们。回想一下，$是函数jQuery的一个别名（除非通过调用noConflict释放$）。
screenshot

2.1.2　选择器
jQuery将Sizzle选择引擎作为它自己代码的一部分。这个独立的库用来执行选择处理，让开发者在网页上定位到自己需要的元素。在可能的情况下，它会把操作代理到浏览器提供的本地函数上以提高性能，其余部分直接由JavaScript实现。例如，开发者想在ID为preferences的元素中，找到所有跟在input字段（也可能是checkbox的标签）后的label元素，就可以使用如下代码：

screenshot

Sizzle允许开发者通过节点名、类名、子节点或属性值来选择元素。开发者也可以使用各种伪类选择器，包括层叠样式表（CSS）规范定义的和 Sizzle 自己添加的，例如：checked，：even和：not。通过把多个选择器组合在一个选择字符串中，开发者可以找到想要的元素。

伪类选择器

CSS规范：“伪类基于特征对元素进行分类，而不是基于它们的名字、属性或者内容；原则上，特征是不可以从文档树上推导得到的。”这些选择器都通过一个冒号（：）后面跟着位置条件（如：nth-child(n)）、内容条件（：empty）和否定条件（：not(selector)）进行区分。
开发者可以通过扩展$.expr.pseudos（jQuery 1.8之前的版本中是$.expr.filters）添加自己的伪类选择器，并在选择过程中使用。最后要说的是，一个选择器只不过是一个函数，它接收一个元素作为参数，如果这个元素被接受，则返回true，被拒绝，则返回false。

通过扩展$.expr.setFilters，开发者可以在当前的一组匹配元素中，通过位置进行过滤元素。开发者需要提供一个函数，它返回匹配到的元素集合（jQuery 1.8之后版本）或返回一个布尔标志来标识是否包含（jQuery 1.7及之前版本）。

关于如何为jQuery/Sizzle添加自定义选择器和过滤器的详细内容，请参见第3章。

2.1.3　集合插件
集合插件是最为常用的jQuery扩展，被用来操作使用选择器或者遍历DOM得到的一组元素。

这些插件必须扩展$.fn，用一个函数来实现自己的功能。这样，它们就能被整合到jQuery内置的处理流程中。如果读者看一下源码，会发现$.fn只是$prototype的别名。这就意味着，任何加入$.fn的函数对所有jQuery集合对象都是可用的，例如使用选择器或者DOM元素调用jQuery得到的结果。这样，这些函数就能在恰当的上下文中在这些集合上调用。

所有集合插件都应该返回当前元素集合，或者当它提供了某种形式的遍历功能时，也可以返回一个新集合。这样，它们就能与其他jQuery函数一起链式调用——jQuery操作的一个核心范式。

第4章将介绍一系列包括最佳实践的原则。第5章则介绍一个实现了这些最佳实现的插件开发框架。

2.1.4　工具函数
可以通过直接扩展$把那些不能操作元素集合的JavaScript函数（例如内置的trim和parseXML）添加到jQuery中。虽然不是必须把它们包括到jQuery中来（它们也可以被定义为独立的JavaScript函数），但这样它们可以充分利用jQuery的其他功能，并且保证使用风格的统一。另外，把它们加进来也减轻了全局命名空间的混乱，降低了命名冲突的可能性，同时也保证功能相关的函数能放在一起。

工具函数没有固定的参数列表，但是它们可以接收需要的任何参数。

第6章将介绍如何为jQuery添加新的工具函数。

2.1.5　jQuery UI小部件
jQuery UI是官方提供的一组构建在基本jQuery库之上的UI组件、行为和特效。它提供了一个实现最佳实践原则的小部件开发框架。

通过调用jQuery UI的$.widget函数可以创建小部件。这个函数的第一个参数是新的小部件的名字（包括命名空间来防止名字冲突）；第二个参数是可选的，用来指定继承的基“类”；第三个参数是一组自定义函数和覆盖，用来增强基本的功能。小部件框架会负责把小部件应用在选择好的元素上，并设置、获取和保存控制小部件外观和行为的选项，还有当小部件不再需要时的清理工作。函数$.widget
.bridge在幕后维护用户调用的集合函数与定义小部件时提供的功能之间的映射。

第 8 章将进一步详述 jQuery UI 小部件和它提供的框架。第 9 章将探讨如何使用jQuery UI的鼠标模块来实现一个围绕鼠标拖动功能的新组件。

2.1.6　jQuery UI特效
jQuery UI 另一个主要部分是网页元素的一系列动画特效。这些动画大多数用来隐藏和显现一个元素，比如blind（百叶窗）和drop（掉落）；还有一部分用来吸引用户的注意，比如highlight（高亮）和shake（晃动）。

可以通过扩展$.effects.effect（jQuery 1.9之前的版本中是$.effects）把新的特效整合到jQuery UI的特效处理中，然后这些特效就可以在jQuery UI提供的effect函数或者show、hide、toggle 这些增强函数中使用了。每个特效都是一个函数。它把一个回调函数添加到当前元素的 fx 队列中，前一个入队的事件处理完毕后，这个回调函数会执行特效的动画。

缓动（Easings）定义了一个属性值如何随着时间变化，可以被用在动画中控制加速和减速。缓动虽然是jQuery基本的一部分，但只提供了两个实例—linear（线性）和swing（摇摆）。 jQuery UI则提供了30种额外的缓动。开发者可以通过扩展$.easing添加自己的缓动，需要定义一个函数来返回动画过程中当前时间间隔（通常是0到1）的属性变化值（通常也是0到1）。

想得到更多关于jQuery UI特效的信息，以及关于缓动的介绍，请参见第10章。

2.1.7　动画属性
jQuery的动画功能允许开发者改变一个选定元素的多个属性值。这些属性通常会影响元素的外观，或者移动元素的位置，改变元素大小或边框尺寸，或者调整它内容字体的大小。不过jQuery只能在数值类型的属性（包括一个单位）上进行动画。开发者需要添加自定义动画来支持更加复杂的属性。

通过扩展$.Tween.prop-Hooks来实现在其他属性上的动画，开发者需要提供两个函数，一个获取属性值，另一个设置属性值。在jQuery 1.8 之前的版本中，开发者需要扩展$.fx.step，并提供一个函数来执行动画的一帧。

第11章将介绍如何为jQuery添加一个新的动画。

2.1.8　Ajax处理
Ajax处理是jQuery所提供的功能中的一个关键部分。它可以更容易地从服务器获取信息并更新当前页面，而且不用刷新整个页面。因为获取的数据可能有多种格式，jQuery使用预过滤器（prefilter）控制开始读取数据之前的处理，使用传输器（transport）获取基本的数据，使用转换器（converter）把数据转换为一个可用的格式。这些机制都可以被增强，以满足特殊需求。图2.2是一个标准的Ajax调用成功的时序图。

screenshot

通过调用$.ajaxPrefilter 函数，开发者可以定义一个在请求某个特定格式的数据（比如html、xml 或者 script）时被调用的函数。因为开发者的函数持有一个用来获取数据的XMLHttpRequest对象引用，所以开发者可以完全控制每个请求，包括取消请求。

开发者可以通过调用$.ajaxTransport函数为特定数据格式定义一个处理函数，处理真正获取数据的过程，这样开发者可以自定义如何访问数据（比如把图像数据直接加载到Image元素中）。默认使用XMLHttpRequest对象。

最终，数据通常以文本格式返回，但是在做一些初始化处理后可能会更有用，比如把XML解析为DOM。通过调用$.ajaxSetup函数，开发者可以定义新的转换器把结果转换为另一种格式，并作为Ajax请求的结果返回。

关于如何通过定义自己的预过滤器、传输协议以及转换器，请参见第12章。

2.1.9　事件处理
jQuery允许开发者为选出的元素附加事件处理器，以响应用户动作。在发生基本的鼠标、键盘及状态变化的事件时，这些处理器会被调用。如果有必要，开发者可以定义一个自定义事件来处理特殊的场景。

开发者可以通过扩展$.event.special添加一个自定义事件。每一个事件的定义都提供这一事件的类型，以及设置事件处理的函数，当这个事件不再需要时的卸载函数，以及在适当情况下触发事件的函数。

第13章将详细介绍如何创建和处理自定义事件。

2.1.10　验证规则
尽管验证插件不是基本 jQuery 库的一部分，但是它是一个应用非常广泛的插件，并且提供了扩展点，允许开发者添加新的验证规则。这些规则可以和内置的那些规则（如required和number）一起使用，在提交表单前确保字段中填写的数据的完整性和正确性。

开发者可以调用$.validator.addMethod来定义一个自定义验证规则，开发者需要提供规则的名称和一个验证函数，如果验证成功，则返回true，否则返回false。此时还需要指定一个验证失败时的错误信息。开发者可以用$.validator.addClassRules函数使自己的新规则做到在元素的class属性中指定名字就能自动验证。

第14章将介绍如何定义开发者自己的验证规则。