jQuery源码中的chunker 正则过滤符分析

代码如下:

var chunker = /((?:\((?:\([^()]+\)|[^()]+)+\)|\[(?:\[[^[\]]*\]|['"][^'"]*['"]|[^[\]'"]+)+\]|\\.|[^ >+~,(\[\\]+)+|[>+~])(\s*,\s*)?((?:.|\r|\n)*)/g,

这是Jq中最长的一个正则了，也研究了很久，一直很懵懂，感觉还是通过调试，然后一步一步的分析值理解起来比较容易，

我尝试做成图形比较直观一点，以不同的颜色区分了一下，如下图：


分组一是通过以下代码逐一拆分成一个数组的：


代码如下:

// 此处循环的作用是拆分每个选择器到 parts 数组，比如div#id>p ul li 拆分成['div#id','>','p','ul','li']
while ( (chunker.exec(""), m = chunker.exec(soFar)) !== null ) {
// soFar存储的是过滤了第一层后的选择符字符串，也就是图片上的分组三
soFar = m[3];
//选择器块第一部分推入数组
parts.push( m[1] );
// 如果拆分到了逗号的地方','，则前一组结束，跳出循环，到另外一组选择器了
if ( m[2] ) {
// 记录另外一组选择器
extra = m[3];
break;
}
}

其它的比如ID，class之类的就好理解了


代码如下:

match: {
// \u00c0-\uFFFF 匹配多个国家或名族的字母文字
ID: /#((?:[\w\u00c0-\uFFFF-]|\\.)+)/, //如：#myId
CLASS: /\.((?:[\w\u00c0-\uFFFF-]|\\.)+)/, // 如：.myClass
NAME: /\[name=['"]*((?:[\w\u00c0-\uFFFF-]|\\.)+)['"]*\]/, //如：[name="myName"]
ATTR: /\[\s*((?:[\w\u00c0-\uFFFF-]|\\.)+)\s*(?:(\S?=)\s*(['"]*)(.*?)\3|)\s*\]/, //如：[attribute="value"]
TAG: /^((?:[\w\u00c0-\uFFFF\*-]|\\.)+)/, //如：div p a
CHILD: /:(only|nth|last|first)-child(?:\((even|odd|[\dn+-]*)\))?/, //如：:first-child or :nth-child(5n+1)
POS: /:(nth|eq|gt|lt|first|last|even|odd)(?:\((\d*)\))?(?=[^-]|$)/, //如：:nth(3) span
PSEUDO: /:((?:[\w\u00c0-\uFFFF-]|\\.)+)(?:\((['"]?)((?:\([^\)]+\)|[^\(\)]*)+)\2\))?/ // :jlkj\kjl('kl(kklk)kl')
}

未完待续……

赞 (0)

相关推荐

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

    1. 总体架构 1.1 自调用匿名函数 self-invoking anonymous function 打开jQuery源码,首先你会看到这样的代码结构: 复制代码 代码如下: (function( window, undefined ) { // jquery code })(window); 1. 这是一个自调用匿名函数.什么东东呢?在第一个括号内,创建一个匿名函数:第二个括号,立即执行 2. 为什么要创建这样一个"自调用匿名函数"呢? 通过定义一个匿名函数,创建了一个"

  • jQuery源码分析-03构造jQuery对象-工具函数

    作者:nuysoft/高云 QQ:47214707 EMail:nuysoft@gmail.com 声明:本文为原创文章,如需转载,请注明来源并保留原文链接. 读读写写,不对的地方请告诉我,多多交流共同进步,本章的的PDF等本章写完了发布. jQuery源码分析系列的目录请查看 http://nuysoft.iteye.com/blog/1177451,想系统的好好写写,目前还是从我感兴趣的部分开始,如果大家有对哪个模块感兴趣的,建议优先分析的,可以告诉我,一起学习. 3.4 其他静态工具函数

  • jQuery源码分析-03构造jQuery对象-源码结构和核心函数

    作者:nuysoft/高云 QQ:47214707 EMail:nuysoft@gmail.com 毕竟是边读边写,不对的地方请告诉我,多多交流共同进步.本章还未写完,完了会提交PDF. 前记: 想系统的好好写写,但是会先从感兴趣的部分开始. 近期有读者把PDF传到了百度文库上,首先感谢转载和传播,但是据为已有并设置了挺高的财富值才能下载就不好了,以后我整理好了会传到文库上.请体谅一下. 3. 构造jQuery对象 3.1 源码结构 先看看总体结构,再做分解: 复制代码 代码如下: (funct

  • 查看源码的工具 学习jQuery源码不错的工具

    查看源码的工具 学习jQuery源码不错的工具

    使用jQuery还可以让我们从各大浏览器不兼容的噩梦中解脱出来,最新版的jQuery还增强的对HTML5的支持,使得我们更加应该使用它.但是jQuery的源码很长,有些地方的实现还很巧妙,使得我们仅仅会javascript也未必能很好的理解每个函数是怎么运行的.下面就让我分享我学习jQuery源码的时候使用的几个工具和应该了解的问题. 这个jquery源代码查看器,还不是很强大,只是能够简单的查看函数引用,但是不能返回. 我上这个网上下载下来了,准备改进一下,你们可以先下载来用一用,有什么意见和

  • jQuery源码分析-05异步队列 Deferred 使用介绍

    5. 异步队列 Deferred 5.1 概述 异步队列是一个链式对象,增强对回调函数的管理和调用,用于处理异步任务. 异步队列有三种状态:初始化(unresolved),成功(resolved),失败(rejected). 执行哪些回调函数依赖于状态. 状态变为成功(resolved)或失败(rejected)后,将保持不变. 回调函数的绑定可以是同步,也可以是异步的,即可以在任何时候绑定. (本节中的 绑定 注册 增加 具有相同的含义) 5.2 关键方法 先看看jQuery. Deferre

  • 基于jquery的图片幻灯展示源码

    复制代码 代码如下: //图片幻灯展示 $(function() { var imgPro = { imgWidth : 626, //图片宽度 imgConLength : 0, //图片总长度 index : 0, //导航锁定索引 count : 0, //图片数量 left : 0, //绝对定位left pre : -1, //上个图片索引 curr : 0, //当前图片索引 next : 1, //下个图片索引 direction : 1, //自动播放方向 interTime :

  • jQuery源码分析之jQuery中的循环技巧详解

    jQuery的源码中有很多值得学习借鉴的技巧,本文即收集了jQuery中出现的各种遍历技巧和场景.具体分析如下: // 简单的for-in(事件) for ( type in events ) { } // 缓存length属性,避免每次都去查找length属性,稍微提升遍历速度 // 但是如果遍历HTMLCollection时,性能提升非常明显,因为每次访问HTMLCollection的属性,HTMLCollection都会内部匹配一次所有的节点 for ( var j = 0, l = ha

  • 通过jQuery源码学习javascript(一)

    通过jQuery源码学习javascript(一)

    Jquery这么普及,必有它过人之处,通过开源代码进行学习,是个不错的学习方法啊! 以下是我模拟的方法,我尽量简化方法. 定义对象C(类似于jquery的$方法)--这个也是jquery设计非常巧妙的地方 复制代码 代码如下: (function(){ var _cQuery = window.cQuery, cQuery = function(){ return new cQuery.fn.init(); }; cQuery.fn = cQuery.prototype = { init : f

  • jQuery源码分析-02正则表达式 RegExp 常用正则表达式

    作者:nuysoft/JS攻城师/高云 QQ:47214707 EMail:nuysoft@gmail.com 声明:本文为原创文章,如需转载,请注明来源并保留原文链接. 后文预告:jQuery中的正则表达式分析 2.4 常用正则表达式 在网上找到一篇广为流传的文章<常用正则表达式>,逐一分析,不足地方进行补充和纠正. 复制代码 代码如下: 常用的数字正则(严格匹配) 正则 含义 ^[1-9]\d*$ 匹配正整数 ^-[1-9]\d*$ 匹配负整数 ^-?[1-9]\d*$ 匹配整数 ^[1-

  • 通过jQuery源码学习javascript(二)

    通过jQuery源码学习javascript(二)

    巧妙1:函数 在javascript代码中函数是个不可多得的人才. ♥ 它可以归置代码段,封装相对独立的功能. ♥ 它也可以实现类,注入OOP思想. jQuery就是一个函数,你也可以把它当成类(呵呵,本身就是类). 复制代码 代码如下: (function(){ var jQuery = function() { // 函数体 } window.jQuery = window.$ = jQuery; })(); console.log(jQuery); 上面的空函数就是所谓的构造函数,构造函数

  • jQuery.prototype.init选择器构造函数源码思路分析

    一.源码思路分析总结 概要: jQuery的核心思想可以简单概括为"查询和操作dom",今天主要是分析一下jQuery.prototype.init选择器构造函数,处理选择器函数中的参数: 这个函数的参数就是jQuery()===$()执行函数中的参数,可以先看我之前写的浅析jQuery基础框架一文,了解基础框架后,再看此文. 思路分析: 以下是几种jQuery的使用情况(用于查询dom),每种情况都返回一个选择器实例(习惯称jQuery对象(一个nodeList对象),该对象包含查询

  • 通过jQuery源码学习javascript(三)

    通过jQuery源码学习javascript(三)

    疑问 第一篇中有位博友提出了以下的问题,我也不太明白,如果有明白的,能否告知一.二. 复制代码 代码如下: var str = "test"; for(var a in str){ console.log(a + ":" + str[ a ]); } 输出结果 这是一个字符串对象,在使用for的时候,会出现上面的情况. 自调用匿名函数(function(){})(window) 复制代码 代码如下: (function(window, undefined){ //

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

    作者:nuysoft/高云 QQ:47214707 EMail:nuysoft@gmail.com 声明:本文为原创文章,如需转载,请注明来源并保留原文链接. 在分析Sizzle源码之前,先整理一下选择器的工作原理 先明确一些选择器中用到的名词,后边阅读时不会有歧义: 选择器表达式: "div > p" 块表达式: "div" "p" 并列选择器表达式: "div, p" 块分割器: Sizzle中的chunker正则,

随机推荐