`
nuysoft
  • 浏览: 521052 次
  • 性别: Icon_minigender_1
  • 来自: 北京
博客专栏
91bd5d30-bd1e-3b00-9210-87db1cca0016
jQuery技术内幕
浏览量:200740
社区版块
存档分类
最新评论

[原创] jQuery源码分析-04 选择器-Sizzle-设计思路

阅读更多

 

作者:nuysoft/高云 QQ:47214707 Email:nuysoft@gmail.com 
声明:本文为原创文章,如需转载,请注明来源并保留原文链接
让我们把工作原理讲的更简单一些,先不讲从右向左也不讲接口,先来分析下如果要执行一段选择器表达式,或者说设计一个简版选择器引擎,直觉上需要做些什么工作: 
以div > p为例来模拟这个过程,找div元素下的p元素: 

1. 首先要能正确的将独立的块表达式从选择器表达式中分割出来,这是必须的,否则没法找div元素或p元素 

2. 然后要能正确的执行块表达式,无论是left>right或right>left,首先要能找到div元素或p元素 
块表达式可能不仅仅是简单的id/name/tag/class,也可能是它们之间的组合,甚至是与伪类的组合 
比如div.red,查找具有指定.red的div,怎么实现这个过程呢? 
可以先找div数组,再在div数组上过滤.red;或者也可以先找*.red数组,再在*.red数组上找div 
不管哪种方式,上边的过程都可以分解为:一个简单查找器和一个对查找结果过滤的过滤器 

3. 单个块表达式搞定了,最后来处理块表达式之间的关系,DOM元素之间关系不外乎四种:父子,祖先,兄长,兄弟 
就是找父亲或找儿子,找祖宗或找后代,找哥哥姐姐或找弟弟妹妹,关系不复杂,都有原生API支持
只要把2~3重复执行就可以完成(我感觉我的神经好粗大),选择器引擎的大致思路就是如此。

把上述过程与Sizzle对应着理解: 
1. 分割器 chunker正则 
2. 块查找 Sizzle.find( expr, context, isXML ) 
   块内过滤 Sizzle.filter( expr, set, inplace, not ) 
3. 块间关系过滤 Expr.relative 
这三个接口正是Sizzle实现的核心API。 
  
当然上边的分析有事后诸葛亮的嫌疑,毕竟我已经看过Sizzle源码了, 但是当我试着用上边的过程来理解Sizzle的工作原理时,顿时豁然开朗,希望有所启发。
3
4
分享到:
评论
1 楼 追梦1819 2017-05-02  
[size=x-small][color=red][/color][/size]

相关推荐

    jQuery源码分析-04 选择器-Sizzle-工作原理分析

    《jQuery源码分析-选择器-Sizzle工作原理详解》 Sizzle是jQuery中用于解析CSS选择器的关键组件,它的高效工作原理是理解jQuery选择器功能的基础。本文将深入剖析Sizzle的工作流程,帮助读者理解其背后的逻辑。 ...

    jQuery-, jQuery源码解读 -- jQuery v1.10.2.zip

    jQuery的选择器引擎Sizzle是其强大功能的关键之一。Sizzle支持CSS1-CSS3的选择器,并能有效地匹配和选取DOM元素。通过阅读源码,我们可以学习到如何编写高效的选择器,以及如何利用Sizzle实现复杂的DOM遍历。 3. *...

    Jquery源码分析 源码

    - **模块化**:jQuery源码采用模块化设计,如核心功能、选择器、遍历、属性操作、事件等都是独立模块,便于维护和扩展。 - **工厂函数**:$(selector)是jQuery的工厂函数,它接受字符串、DOM元素或jQuery对象,...

    jQuery-Selectors-源码.rar

    分析jQuery选择器的源码,不仅可以提升我们对CSS选择器的理解,还能让我们掌握更多JavaScript编程技巧,以及如何编写高性能的DOM操作代码。 总的来说,jQuery-Selectors-源码.zip提供了深入了解jQuery选择器内部...

    JQuery源码详细中文注释_Jquery源码分析_

    总结,jQuery源码分析涉及的内容广泛,包括选择器引擎、事件处理、DOM操作、动画效果、Ajax通信以及插件开发等多个方面。深入理解jQuery源码,有助于我们更好地利用它来构建高效、易维护的Web应用。通过阅读中文注释...

    jquery-1.4.2.js和jquery-1.4.2-vsdoc.js

    - **Sizzle选择器引擎**:在1.4.2版本中,jQuery使用Sizzle作为其选择器引擎,提高了选择器的执行效率。 - **DOM遍历优化**:通过优化`each()`函数,使得遍历DOM树更加高效。 - **缓存机制**:jQuery会缓存DOM...

    jquery api, jquery ui api, jquery源码分析

    1. **选择器引擎(Sizzle)**:jQuery 使用Sizzle作为其选择器引擎,它是如何快速高效地解析CSS选择器并找到匹配元素的。 2. **链式调用(Chaining)**:jQuery对象返回自身,允许连续调用多个方法,这是其优雅语法...

    jQuery中的Sizzle引擎分析

    通过查看源码,开发者可以学习到更多关于Sizzle实现的细节,比如如何处理复杂的CSS选择器组合,以及如何与jQuery其他组件协同工作。 总的来说,Sizzle引擎是jQuery的核心组成部分,它的强大功能和跨浏览器兼容性...

    jQuery源码分析-01总体架构分析

    《jQuery源码分析-总体架构解析》 在深入探究jQuery的源码之前,我们首先要理解其总体架构的设计理念。jQuery以其高效、易用的特性深受开发者喜爱,而这背后离不开其精心设计的架构。本文将围绕jQuery的核心构造...

    jquery 源码分析

    Sizzle选择器引擎是jQuery的一大亮点,它实现了对CSS1至CSS3选择器的支持。Sizzle的工作原理是将CSS选择器解析为一系列的测试规则,然后应用到DOM树上,找到匹配的元素。通过这个引擎,jQuery能快速准确地定位页面中...

    Jquery详解-源码分析

    1. **选择器引擎(Sizzle)**:jQuery的核心是它的选择器引擎Sizzle,它实现了CSS1到CSS3的选择器,使得开发者能够轻松地选取DOM元素。Sizzle使用正则表达式和DOM遍历来高效匹配元素。 2. **链式调用**:jQuery对象...

    jQuery原理系列-css选择器的简单实现

    jQuery最强大的功能在于它可以通过css选择器查找元素,它的源码中有一半是sizzle css选择器引擎的代码,在html5规范出来之后,增加了document.querySelector和document.querySelectorAll直接查找元素,如果是做...

    jquery-source-code-analysis:jquery源码分析-jquery source code

    在DOM操作方面,jQuery提供了如`$(selector)`的选择器,它基于Sizzle引擎,能高效地选取DOM元素。`$(element).hide()`、`.show()`、`.toggle()`等方法则实现了元素的显示与隐藏。此外,`.append()`、`.prepend()`等...

    jquery-1.2-UnCompressed

    - **Sizzle选择器引擎**:jQuery 1.2使用Sizzle作为其内置的选择器引擎,提高了选择器的执行效率。 - **缓存机制**:jQuery会缓存匹配到的DOM元素,减少重复查询DOM的操作,提升性能。 - **优化的DOM操作**:通过...

    jQuery表单选择器源码

    要深入理解jQuery表单选择器的源码,可以阅读`jQuery源码`和`Sizzle源码`,同时结合实际项目进行实践。`第7章 表单选择器.pdf`文档可能是对这部分内容的一个详细讲解,建议配合源码阅读,加深理解。 总结,jQuery...

    jquery-1.2-Compressed

    1. **选择器引擎Sizzle**:jQuery的核心之一是它的选择器引擎Sizzle,它支持CSS1至CSS3的选择器,使开发者能方便地选取DOM元素,如$("#id")、$(".class")和$("tagname")。 2. **链式调用**:jQuery的API设计允许...

    jQuery源码分析系列.pdf

    在附录部分,给出了如何做jQuery源码分析的建议,这对于有兴趣深入研究jQuery源码的开发者来说,提供了一种学习方法和研究思路。 对于Java工程师来说,文中也提出了应向jQuery学习的几点建议,这些建议可能与Java...

    jQuery源码详细分析中文注释

    《jQuery源码详细分析中文注释》是一份深入解析jQuery库源码的宝贵资源,它为开发者提供了理解这个广泛使用的JavaScript库内部工作机制的机会。jQuery以其简洁的API和强大的功能深受前端开发者的喜爱,但其背后的...

Global site tag (gtag.js) - Google Analytics