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;
};

最后重新说一下其逻辑：

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