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

简介: jQuery是一个可以使得与网页上元素交互更容易的JavaScript库。它通常被用于通过直接选择或者遍历DOM来查找元素,然后在这些元素上应用一些功能。开发者可以添加或删除这些元素,或者改变它们的属性,还可以为它们添加事件处理器用来响应用户的动作。开发者也可以随着时间推移改变元素的属性来产生动画。

本节书摘来自异步社区《扩展 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
screenshot
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章将介绍如何定义开发者自己的验证规则。

相关文章
|
11天前
|
存储 缓存 API
探索后端技术:构建高效、可扩展的系统架构
在当今数字化时代,后端技术是构建任何成功应用程序的关键。它不仅涉及数据存储和处理,还包括确保系统的高效性、可靠性和可扩展性。本文将深入探讨后端开发的核心概念,包括数据库设计、服务器端编程、API 开发以及云服务等。我们将从基础开始,逐步深入到更高级的主题,如微服务架构和容器化技术。通过实际案例分析,本文旨在为读者提供一个全面的后端开发指南,帮助大家构建出既高效又具有高度可扩展性的系统架构。
|
5天前
|
JavaScript
jQuery 树型菜单插件(Treeview)
jQuery 树型菜单插件(Treeview)
21 2
|
6天前
|
JavaScript 前端开发
jQuery Growl 插件(消息提醒)
jQuery Growl 插件(消息提醒)
16 4
jQuery Growl 插件(消息提醒)
|
8天前
|
存储 JSON JavaScript
jQuery Cookie 插件
jQuery Cookie 插件
21 4
jQuery Cookie 插件
|
11天前
|
Kubernetes Cloud Native 持续交付
探索云原生架构:打造弹性可扩展的应用
【9月更文挑战第29天】在云计算的浪潮中,云原生架构成为企业追求高效、灵活和可靠服务的关键。本文将深入解析云原生的概念,探讨如何利用容器化、微服务和持续集成/持续部署(CI/CD)等技术构建现代化应用。我们将通过一个简易的代码示例,展示如何在Kubernetes集群上部署一个基于Node.js的应用,从而揭示云原生技术的强大能力和潜在价值。
28 6
|
28天前
|
Cloud Native Devops 持续交付
探索云原生架构:构建高效、灵活和可扩展的系统
本文将深入探讨云原生架构的核心概念、主要技术以及其带来的优势。我们将从云原生的定义开始,了解其设计理念和技术原则;接着分析容器化、微服务等关键技术在云原生中的应用;最后总结云原生架构如何助力企业实现数字化转型,提升业务敏捷性和创新能力。通过这篇文章,读者可以全面了解云原生架构的价值和应用前景。
|
28天前
|
运维 Cloud Native Devops
云原生架构的崛起与实践云原生架构是一种通过容器化、微服务和DevOps等技术手段,帮助应用系统实现敏捷部署、弹性扩展和高效运维的技术理念。本文将探讨云原生的概念、核心技术以及其在企业中的应用实践,揭示云原生如何成为现代软件开发和运营的主流方式。##
云原生架构是现代IT领域的一场革命,它依托于容器化、微服务和DevOps等核心技术,旨在解决传统架构在应对复杂业务需求时的不足。通过采用云原生方法,企业可以实现敏捷部署、弹性扩展和高效运维,从而大幅提升开发效率和系统可靠性。本文详细阐述了云原生的核心概念、主要技术和实际应用案例,并探讨了企业在实施云原生过程中的挑战与解决方案。无论是正在转型的传统企业,还是寻求创新的互联网企业,云原生都提供了一条实现高效能、高灵活性和高可靠性的技术路径。 ##
50 3
|
1月前
|
设计模式 存储 人工智能
深度解析Unity游戏开发:从零构建可扩展与可维护的游戏架构,让你的游戏项目在模块化设计、脚本对象运用及状态模式处理中焕发新生,实现高效迭代与团队协作的完美平衡之路
【9月更文挑战第1天】游戏开发中的架构设计是项目成功的关键。良好的架构能提升开发效率并确保项目的长期可维护性和可扩展性。在使用Unity引擎时,合理的架构尤为重要。本文探讨了如何在Unity中实现可扩展且易维护的游戏架构,包括模块化设计、使用脚本对象管理数据、应用设计模式(如状态模式)及采用MVC/MVVM架构模式。通过这些方法,可以显著提高开发效率和游戏质量。例如,模块化设计将游戏拆分为独立模块。
95 3
|
2月前
|
存储 API 持续交付
探索微服务架构:构建灵活、可扩展的后端系统
【8月更文挑战第25天】 本文将引导您理解微服务架构的核心概念,探讨其对现代后端系统设计的影响。我们将从基础讲起,逐步深入到微服务的高级应用,旨在启发读者思考如何利用微服务原则优化后端开发实践。
44 4
|
2月前
|
消息中间件 负载均衡 持续交付
构建可扩展的微服务架构:从设计到实现
在微服务架构的世界里,设计和实现可扩展性是至关重要的。然而,开发者往往面临着如何在系统复杂性和性能之间取得平衡的问题。本文通过深入探讨微服务架构的关键设计原则和实践,展示了如何从初期设计到最终实现,构建一个既高效又可扩展的系统架构。