jQuery源码分析之tokenize方法的Expr.preFilter

快乐打工仔 分类:实例代码

关于tokenize()方法的分析可以参阅jQuery源码分析之tokenize()方法一章节。

下面再分析一下此方法的Expr.preFilter,需要的朋友可以做一下参考。

代码实例如下:

Expr.preFilter : {
    "ATTR" : function(match) {
        /*
         * 完成如下任务:
         * 1、属性名称解码
         * 2、属性值解码
         * 3、若判断符为~=,则在属性值两边加上空格
         * 4、返回最终的mtach对象
         * 
         * match[1]表示属性名称,
         * match[1].replace(runescape, funescape):将属性名称中的十六进制数解码成
         *   单字节unicode字符或双字节unicode字符(中文或其它需要两个字节表达的文字)
         * 正则表达式的详细说明,可以参看我的“详解jQuery选择器正则表达式”文章
         */
        match[1] = match[1].replace(runescape, funescape);
  
        /*
         * 将属性值解码
         * match[4]:表示放在单引号或双引号内的属性值
         * match[5]: 表示不用引号括起来的属性值
         */
        match[3] = (match[4] || match[5] || "").replace(runescape,
                funescape);
  
        /*
         * ~=的意思是单词匹配,在W3C中对单词的定义是以空白为不同单词的分隔符
         * 故此处在match[3]两边加上空格后,可以利用indexOf,正确识别出该单词是否存在
         */
        if (match[2] === "~=") {
            match[3] = " " + match[3] + " ";
        }
  
        /*
         * 返回有用的前四个元素结果
         */
        return match.slice(0, 4);
    },
  
    "CHILD" : function(match) {
        /*
         * 完成如下几项任务:
         * 1、把命令中child和of-type之前的字符变成小写字符
         * 2、对于nth开头的选择器检查括号内的数据有效性
         * 3、match[4]和match[5]分别存放xn+b中的x和b,x和b允许是负数
         * 4、返回最终的match对象
         * 
         * match[1]:(only|first|last|nth|nth-last)中的一个
         */
        match[1] = match[1].toLowerCase();
  
        /*
         * 对于nth-child、nth-of-type、nth-last-child、nth-last-of-type四种类型括号内需设置有效数据
         * 而其它则括号内不允许有任何数据
         */
        if (match[1].slice(0, 3) === "nth") {
            /*
             * 若选择器括号内没有有效参数,则抛出异常
             * 举例:若选择器是nth或nth(abc)则属于非法选择器
             */
            if (!match[3]) {
                Sizzle.error(match[0]);
            }
            /*
             * 下面先以nth-child()为例介绍一下语法,以便更好的理解下面代码的作用
             * nth-child允许的几种使用方式如下:
             *   :nth-child(even)
             *   :nth-child(odd)
             *   :nth-child(3n)
             *   :nth-child(+2n+1)
             *   :nth-child(2n-1)
             * 下面代码中赋值号左侧的match[4]、match[5]用于分别记录括号内n前及n后的数值,包括正负号
             * 对于:nth-child(even)和:nth-child(odd)来说,match[4]为空,
             *   所以返回 2 * (match[3] === "even" || match[3] === "odd")的计算结果
             *   因为在js中true=1,false=0,所以(match[3] === "even" || match[3] === "odd")等于1
             *   因此,2 * (match[3] === "even" || match[3] === "odd")的计算结果为2
             * 
             * 等号右侧的“+”的作用是强制类型转换,将之后的字符串转换成数值类型 
             */
            match[4] = +(match[4] ? match[5] + (match[6] || 1)
                    : 2 * (match[3] === "even" || match[3] === "odd"));
            match[5] = +((match[7] + match[8]) || match[3] === "odd");
  
        } else if (match[3]) {
            /*
             * 若非nth起头的其它CHILD类型选择器带有括号说明,则抛出异常
             * 这里jQuery并没有严格按照W3C的规则来判定,因为其允许:first-child()的这种形式存在
             * 也就是对于jQuery来说:first-child()等同于:first-child,是合法选择器
             */
            Sizzle.error(match[0]);
        }
  
        return match;
    },
  
    "PSEUDO" : function(match) {
        /*
         * 完成如下任务:
         * 1、获取伪类中用引号括起来的值
         * 2、对于非引号括起来的值,若存在伪类嵌套,则进一步解析确定当前伪类实际结束位置,
         *  获取当前伪类的完整字符串和值
         * 3、返回match中的前三项的副本。
         * 
         * unquoted表示括号内非引号括起来的值,
         * 以:eq(2)为例,unquoted=2
         */
        var excess, unquoted = !match[5] && match[2];
  
        /*
         * 因为pseudo与child的匹配正则表达式有交集,所以,需要把属于child的部分忽略掉
         */
        if (matchExpr["CHILD"].test(match[0])) {
            return null;
        }
        /*
         * 若括号内的值使用引号(match[3])括起来的,
         * 则将除引号外的值(match[4])赋给match[2]。
         * match[3]表示引号。
         */
        if (match[3] && match[4] !== undefined) {
            match[2] = match[4];
        } else if (unquoted
                /*
                 * rpseudo.test(unquoted):用来测试unquoted是否包含伪类,
                 * 若包含伪类,则说明有可能存在伪类嵌套的可能性,需要进一步对unquoted进行解析
                 * 例如: :not(:eq(3))
                 */
                && rpseudo.test(unquoted)
                &&
                /*
                 * 获取unquoted中连续有效地选择器最后一个字符所在位置
                 */
                (excess = tokenize(unquoted, true))
                &&
                /*
                 * unquoted.indexOf(")", unquoted.length - excess)
                 *   从之前获得的连续有效地选择器最后一个字符所在位置之后找到")"所在位置,
                 *   通常就在当前位置之后。
                 * 再减去unquoted.length,用来获得match[0]中的有效完整的伪类字符串最后位置,
                 *   注意,此时excess是一个负值
                 * 
                 */
                (excess = unquoted.indexOf(")", unquoted.length
                        - excess)
                        - unquoted.length)) {
  
            // 获取有效的完整伪类match[0]和伪类括号内的数据match[2]
            match[0] = match[0].slice(0, excess);
            match[2] = unquoted.slice(0, excess);
        }
  
        // 返回match前三个元素的副本
        return match.slice(0, 3);
    }
}
jQuery源码分析之tokenize方法的Expr.preFilter

回复

我来回复
  • 暂无回复内容