jQuery源码学习笔记八

今天把jQuery的Sizzle选择器引擎讲完。最后给出其大体的工作流程。这东西非常复杂，不要妄图看一遍就明白了。无论看懂与否，多看点源码，还是有裨益的。至少在处理循环结构上有收获吧。

  
//@author  司徒正美|なさみ|cheng http://www.cnblogs.com/rubylouvre/ All rights reserved
    // EXPOSE
      jQuery.find = Sizzle;
      jQuery.filter = Sizzle.filter;
      jQuery.expr = Sizzle.selectors;
      //以:开头许多都是自定义伪类
      jQuery.expr[":"] = jQuery.expr.filters;
      //css属性display引起的元素不可见
      Sizzle.selectors.filters.hidden = function(elem){
        return elem.offsetWidth === 0 || elem.offsetHeight === 0;
      };
      //css属性display引起的元素不可见
      Sizzle.selectors.filters.visible = function(elem){
        return elem.offsetWidth > 0 || elem.offsetHeight > 0;
      };
      //是否在运动中
      Sizzle.selectors.filters.animated = function(elem){
        return jQuery.grep(jQuery.timers, function(fn){
          return elem === fn.elem;
        }).length;
      };
      //重载jQuery.multiFilter
      jQuery.multiFilter = function( expr, elems, not ) {
        if ( not ) {
          expr = ":not(" + expr + ")";
        }

        return Sizzle.matches(expr, elems);
      };
      //把路径上的元素放到结果上，dir为parentNode,previousSibling,nextSilbing
      jQuery.dir = function( elem, dir ){
        var matched = [], cur = elem[dir];
        while ( cur && cur != document ) {
          if ( cur.nodeType == 1 )
            matched.push( cur );
          cur = cur[dir];
        }
        return matched;
      };
      //在内部调用result好像都为2，dir为previousSibling,nextSilbing
      //用于子元素过滤
      jQuery.nth = function(cur, result, dir, elem){
        result = result || 1;
        var num = 0;
        //如果cur为undefined中止循环
        for ( ; cur; cur = cur[dir] )
          if ( cur.nodeType == 1 && ++num == result )
            break;

        return cur;
      };
      //查找不等于elem的兄弟元素节点
      jQuery.sibling = function(n, elem){
        var r = [];

        for ( ; n; n = n.nextSibling ) {
          if ( n.nodeType == 1 && n != elem )
            r.push( n );
        }

        return r;
      };

      return;

      window.Sizzle = Sizzle;

好了，回头看Sizzle的主程序部分：

  
        Sizzle.find = function(expr, context, isXML){
            var set, match;
            if ( !expr ) {//如果不是字符串表达式则返回空数组
                return [];
            }
            for ( var i = 0, l = Expr.order.length; i < l; i++ ) {
                var type = Expr.order[i], match;//按照ID NAME TAG的优先级顺序执行
               //这里可以想象一下
               //match = "#aaa".exec( /#((?:[\w\u00c0-\uFFFF_-]|\\.)+)/)
               //然后检测match是否为空数组，空数组相当于false
                if ( (match = Expr.match[ type ].exec( expr )) ) {
                 //ID的正则 /#((?:[\w\u00c0-\uFFFF_-]|\\.)+)/
                    var left = RegExp.leftContext
                    //如果不是一步到位，是复杂的表达式，需要多次查找与筛选
                    if ( left.substr( left.length - 1 ) !== "\\" ) {
                      //把换行符去掉，得到正常的字段
                      //如"#id12\
                      //34"
                      //去掉后，就得到"#id1234"
                        match[1] = (match[1] || "").replace(/\\/g, "");
                        set = Expr.find[ type ]( match, context, isXML );
                        if ( set != null ) {
                          //移除相应部分的表达，
                          // 如#aaa ee，得到ID对应的元素后，把#aaa去掉，
                          //然后用Expr的表达式来匹配剩下的部分
                            expr = expr.replace( Expr.match[ type ], "" );
                            break;
                        }
                    }
                }
            }

            if ( !set ) {
                //返回所有后代
                set = context.getElementsByTagName("*");
            }

            return {//返回一个对象
                set: set,
                expr: expr
            };
        };

  
      Sizzle.filter = function(expr, set, inplace, not){
        var old = expr, result = [], curLoop = set, match, anyFound,
        isXMLFilter = set && set[0] && isXML(set[0]);

        while ( expr && set.length ) {
          for ( var type in Expr.filter ) {
            //这是Expr.filter中的键值对
            //PSEUDO: function(elem, match, i, array){},
            //CHILD: function(elem, match){},
            //ID: function(elem, match){},
            //TAG: function(elem, match){},
            //CLASS: function(elem, match){},
            //ATTR: function(elem, match){},
            //POS: function(elem, match, i, array){}
            if ( (match = Expr.match[ type ].exec( expr )) != null ) {//match为数组
              var filter = Expr.filter[ type ], found, item;//filter这函数
              anyFound = false;

              if ( curLoop == result ) {//如果结果集为空数组，就让result = [];
                result = [];
              }

              if ( Expr.preFilter[ type ] ) {
                //这是Expr.preFilter中的键值对
                //CLASS: function(match, curLoop, inplace, result, not, isXML){},
                //ID: function(match){},
                //TAG: function(match, curLoop){},
                //CHILD: function(match){ },
                //ATTR: function(match, curLoop, inplace, result, not, isXML){},
                //PSEUDO: function(match, curLoop, inplace, result, not){ },
                //POS: function(match){}
                //preFilter与filter的功能不同，preFilter对字符串进行调整，好让选择器能找到元素
                //filter对查找到的元素或元素数组进行筛选
                match = Expr.preFilter[ type ]( match, curLoop, inplace, result, not, isXMLFilter );
                if ( !match ) {//如果返回的是false
                  anyFound = found = true;//就把anyFound与found标记为true
                } else if ( match === true ) {
                  continue;
                }
              }

              if ( match ) {
                for ( var i = 0; (item = curLoop[i]) != null; i++ ) {
                  if ( item ) {
                    //检测元素是否符合要求
                    found = filter( item, match, i, curLoop );
                    var pass = not ^ !!found;

                    if ( inplace && found != null ) {
                      if ( pass ) {
                        anyFound = true;
                      } else {
                        curLoop[i] = false;
                      }
                    } else if ( pass ) {
                      result.push( item );//符合要求就放到结果数组中
                      anyFound = true;
                    }
                  }
                }
              }

              if ( found !== undefined ) {
                if ( !inplace ) {
                  curLoop = result;//结果数组将作为一下次要遍历的元素集合返回
                }
                //移除用户输入字符串已查找了的那一部分表达式
                expr = expr.replace( Expr.match[ type ], "" );

                if ( !anyFound ) {
                  return [];
                }

                break;
              }
            }
          }

          // Improper expression
          if ( expr == old ) {
            if ( anyFound == null ) {
              throw "Syntax error, unrecognized expression: " + expr;
            } else {
              break;
            }
          }

          old = expr;
        }

        return curLoop;
      };

主程序：

      var Sizzle = function(selector, context, results, seed) {
        results = results || [];
        context = context || document;

        if ( context.nodeType !== 1 && context.nodeType !== 9 )
          return [];//context必须为DOM元素或document，要不返回空数组

        if ( !selector || typeof selector !== "string" ) {
          return results;//selector必须存在并且为字符串，否则返回上次循环的结果集
        }

        var parts = [], m, set, checkSet, check, mode, extra, prune = true;

        // Reset the position of the chunker regexp (start from head)
        chunker.lastIndex = 0;

        while ( (m = chunker.exec(selector)) !== null ) {
          parts.push( m[1] );

          if ( m[2] ) {
            extra = RegExp.rightContext;//匹配内容的右边归入extra
            break;
          }
        }
        //POS: /:(nth|eq|gt|lt|first|last|even|odd)(?:\((\d*)\))?(?=[^-]|$)/,
        if ( parts.length > 1 && origPOS.exec( selector ) ) {
          //处理E F   E > F    E + F   E ~ F
          if ( parts.length === 2 && Expr.relative[ parts[0] ] ) {
            //这里的parts[0]肯定不是“”，亦即不会是后代选择器
            set = posProcess( parts[0] + parts[1], context );
          } else {
            set = Expr.relative[ parts[0] ] ?
              [ context ] :
              Sizzle( parts.shift(), context );

            while ( parts.length ) {
              selector = parts.shift()

              if ( Expr.relative[ selector ] )
                selector += parts.shift();

              set = posProcess( selector, set );
            }
          }
        } else {
          var ret = seed ?
            {
            expr: parts.pop(),
            set: makeArray(seed)
          } :
            Sizzle.find( parts.pop(), parts.length === 1 && context.parentNode ? context.parentNode : context, isXML(context) );
          set = Sizzle.filter( ret.expr, ret.set );

          if ( parts.length > 0 ) {
            checkSet = makeArray(set);
          } else {
            prune = false;
          }

          while ( parts.length ) {//倒序的while循环比for循环快
            var cur = parts.pop(), pop = cur;

            if ( !Expr.relative[ cur ] ) {
              cur = "";
            } else {
              pop = parts.pop();
            }

            if ( pop == null ) {
              pop = context;
            }

            Expr.relative[ cur ]( checkSet, pop, isXML(context) );
          }
        }

        if ( !checkSet ) {
          checkSet = set;
        }

        if ( !checkSet ) {
          throw "Syntax error, unrecognized expression: " + (cur || selector);
        }
        //数组化NodeList，并加入结果集中
        if ( toString.call(checkSet) === "[object Array]" ) {
          if ( !prune ) {
            results.push.apply( results, checkSet );
          } else if ( context.nodeType === 1 ) {
            for ( var i = 0; checkSet[i] != null; i++ ) {
              if ( checkSet[i] && (checkSet[i] === true || checkSet[i].nodeType === 1 && contains(context, checkSet[i])) ) {
                results.push( set[i] );
              }
            }
          } else {
            for ( var i = 0; checkSet[i] != null; i++ ) {
              if ( checkSet[i] && checkSet[i].nodeType === 1 ) {//确保是元素节点
                results.push( set[i] );
              }
            }
          }
        } else {
          makeArray( checkSet, results );
        }

        if ( extra ) {
          Sizzle( extra, context, results, seed );
          if ( sortOrder ) {
            hasDuplicate = false;
            results.sort(sortOrder);//重排结果集中的DOM元素，按照原来在网页先后顺序排列
            if ( hasDuplicate ) {
              for ( var i = 1; i < results.length; i++ ) {//确保没有重复的DOM元素，方法比较垃圾
                if ( results[i] === results[i-1] ) {
                  results.splice(i--, 1);
                }
              }
            }
          }
        }

        return results;
      };

最后重新说一下其逻辑：

1. 首先用一个叫chunker的强大正则，把诸如 var str = " #div , h1#id\
   dd.class > span[dd='22222 > 3233'] ul+ li, .class:contain(\"你的+ 999\"),strong span ";这样的字符串，Sizzle称之为selector的东西，分解成一个数组。
2. 接着对上下文的内容进行判断，确保其为DOM元素或document，否则返回空数组。然后判断selector是否为字符串，由于Sizzle会不断递归调用，selector会越来越短的，直到为零。这些越来越短的selector其实也是第一次chunker 分解的结果之一。不过它们都有可能g再遭分解。每一次循环，这些分解了的字符串都会经过筛选（非空字符），放入parts数组中。
3. 这些selector最先会判断一下，是否为亲子兄长相邻后代等关系选择器。由于第一次chunker把大部分空白消灭了，造成了一个不幸的结果，把后代选择器也消灭了。因此必须补上后代选择器。详见后面posProcess的“selector + "*"”操作。
4. 在选择器中，也亦即id,tag,name具有查找能力，在标准浏览器中重载了class部分，让getElementsByClassName也能工作。如果querySelectorAll能工作最好不过，整个Sizzle被重载了。总而言之，Sizzle.find所做的工作比较少，它是按[ "ID", "NAME", "TAG" ]的优先级查找元素的。不过在这之前，先要调用Expr.preFilter把连字符"\"造成的字符串破坏进行修复了。如上面的例子，h1#iddd由于中间的连字符串被切成两个部分，成了数组中的两个元素h1#dd与dd。显然这样查找会找不到dd这个ID，后面查找所有dd元素也是错误的，因此必须把它们重新整合成一个元素h1#dddd。
5. 根据id,name与tag找到这些元素后，下一个循环就是找它们的子元素或后代元素了，所以Sizzle才会急冲冲地修复后代选择器的问题。至于筛选，Expr有大量的方法来进行。最后是重新排序与去除重复选中的元素，以结果集返回。