解析Sizzle 的源码首先从Sizzle 的入口开始
/**
*
* 这个方法是Sizzle 的入口
*/
var Sizzle = function(selector, context, results, seed) {
/**
* results是保存结果的数组 context默认为document 各种局部变量的定义
*/
results = results || [];
context = context || document;
var match, elem, contextXML, m, nodeType = context.nodeType;
// nodeType ==9说明context是document nodeType ==1表示context是element
if (nodeType !== 1 && nodeType !== 9) {
return [];
}
// 如果选择器不是字符串或者为空 返回一个空的数组
if (!selector || typeof selector !== "string") {
return results;
}
// 是否是xml格式
contextXML = isXML(context);
// seed是预留的参数 一般情况下不会有值
if (!contextXML && !seed) {
/**
* rquickExpr正则表达式匹配#号.号开头后接多个单词字符包括上划线- 或者多个单词字符 一旦匹配成功------------
* match[1]对应 #ID -----------match[2]对应 TAG -------match[3]对应 .class
*
*/
if ((match = rquickExpr.exec(selector))) {
/**
* 处理Sizzle("#ID")
*/
// Speed-up: Sizzle("#ID")
if ((m = match[1])) {
// 如果上下文是document 可以直接使用document.getElementById方法获取元素
if (nodeType === 9) {
elem = context.getElementById(m);
// Check parentNode to catch when Blackberry 4.6 returns
// nodes that are no longer in the document #6963
if (elem && elem.parentNode) {
// Handle the case where IE, Opera, and Webkit
// return items
// by name instead of ID
if (elem.id === m) {
/**
* makeArray的作用就是合并两个对象或者数组 并返回合并后的数组或对象
* 把结果保存到results
*/
return makeArray([elem], results);
}
} else {
return makeArray([], results);
}
} else {
/**
* 如果Context不是document 先通过ownerDocument属性取得document
* 然后在再通过document.getElementById来获取element
*/
// Context is not a document
if (context.ownerDocument
&& (elem = context.ownerDocument
.getElementById(m))
&& contains(context, elem) && elem.id === m) {
return makeArray([elem], results);
}
}
/**
* 处理 Sizzle("TAG")
* 通过element元素的getElementsByTagName方法获取选择器表达式
*/
// Speed-up: Sizzle("TAG")
} else if (match[2]) {
return makeArray(context.getElementsByTagName(selector),
results);
/**
* 处理 Sizzle(".CLASS")
* assertUsableClassName测试各个浏览器element是否支持getElementsByClassName方法
*
*/
// Speed-up: Sizzle(".CLASS")
} else if (assertUsableClassName && (m = match[3])
&& context.getElementsByClassName) {
return makeArray(context.getElementsByClassName(m), results);
}
}
}
// All others
return select(selector, context, results, seed, contextXML);
};
分享到:
相关推荐
在分析Sizzle源码之前,先整理一下选择器的工作原理 先明确一些选择器中用到的名词,后边阅读时不会有歧义: 选择器表达式: “div > p” 块表达式: “div” “p” 并列选择器表达式: “div, p” 块分割器: ...
jquery从1.3开始,使用了新的选择器–sizzle。效率超过了以前的jquery版本的其他选择器。下面这篇文章主要介绍了jQuery源中sizzle选择器的相关资料,文中介绍的很详细,需要的朋友可以参考借鉴,下面来一起看看吧。
这里加入了很多对于原生JavaScript的理解,忽略了Sizzle选择器(它可以单独抽离出来使用Sizzle.js框架)的源码分析,同时由于13.事件操作源码相对比较复杂,只是粗略的进行了源码的调试和说明,对于Jquery如何监听...
近期看了一些网上关于Sizzle的分析文章,就匹配次序往往就说使用了从右到左的逆向匹配法,但是具体如何并没有详细介绍,或者就像我之前的几篇文章一样,就代码一行一行做详细介绍,但缺乏整体概念,这里就jQuery-...
对jQuery的Sizzle各方法做了深入分析(同时也参考了一些网上资料)后,将结果分享给大家。我将采用连载的方式,对Sizzle使用的一些方法详细解释一下,每篇文章介绍一个方法。 若需要转载,请写明出处,多谢。 /* ...
正在学习Sizzle源码或有一定前端基础的同学们,可以一边看源码一边看这些文章进行验证,所以虽然我会分析源码中的正则表达式,有大量的注释,但不会讲正则表达式的基本用法!
jQuerySource决定你走多远的是基础,jQuery源码分析,向长者膜拜!关于本源码的博客介绍: 。目录目录 - ,后面的学习才好办 -介绍jQuery的入口函数init的构造 -Sizzle再jQuery中的应用 Tokens-介绍Sizzle函数中的...
从2011年6月开始,开始把心得和记录整理成《jQuery 1.6.1源码分析系列》,陆续发表在程序员社区ITEye和博客园上,本书最初的内容也是基于这个系列而来的。《jQuery 1.6.1源码分析系列》成体系但尚粗糙不堪,因此...
接着详细分析了底层支持模块的源码实现,包括:选择器sizzle、异步队列deferred、数据缓存data、队列queue、浏览器功能测试support;最后详细分析了功能模块的源码实现,包括:属性操作attributes、事件系统events、...
接着详细分析了底层支持模块的源码实现,包括:选择器sizzle、异步队列deferred、数据缓存data、队列queue、浏览器功能测试support;最后详细分析了功能模块的源码实现,包括:属性操作attributes、事件系统events、...
jquery源码分析(2.0.3版本) 大概内容大纲 (功能(){ (21,94)定义了一些变量和函数jQuery = function(){} (96,284)给JQ对象添加一些方法和属性 (285,347)扩展名:JQ的继承方法 (349,817)jQuery....
接着详细分析了底层支持模块的源码实现,包括:选择器sizzle、异步队列deferred、数据缓存data、队列queue、浏览器功能测试support;最后详细分析了功能模块的源码实现,包括:属性操作attributes、事件系统events、...
阅读并分析jQuery源代码,以巩固JS知识并学习一些奇妙的技术。 2017.7.5 jQuery源代码(一) 顺一遍jQuery源码的大体逻辑: 一些变量和函数jQuery继承即扩展方法jQuery.extend方法,即jQuery的静态方法,也可以...