0 Comments

Sizzle过滤器

发布于:2013-06-03  |   作者:广州网站建设  |   已聚集:人围观
Sizzle过滤器

Sizzle过滤器主要包含两部分:第一部分是过滤函数(jQuery.filter()),在该函数中将对需要过滤的表达式及其对应的表达式处理函数执行分析,并返回过滤后的jQuery对象;第二部分就是过滤表达式对象(Expr = Sizzle.selectors),该对象包含了所有表达式处理的方法和匹配的正则表达式。

Sizzle选择器先初步分析参数字符串,找出基本特征字符串,并根据这些特征字符在Expr对象中调用对应的正则表达式,然后进一步分析选择符字符串,同时根据进一步分解出来的特殊字符,在Expr对象中匹配到对应的选择器函数,最后根据这个选择器函数的返回值是否为true,决定是否保留当前过滤的元素。被保留的元素就是筛选元素,它将被推进jQuery对象集合中。

jQuery.filter()函数完成分析属性([])、Pseudo(:)、Class (.)和ID(#)的筛选功能,从给定的集合中筛选出满足上面四种筛选表达式的集合。针对find()方法,jQuery.filter()函数的完成并不表明整个选择符的分析完成了,如果单独使用这个函数,表达式中就不应该含有查找的选择器表达式。筛选是根据[、:、#和.这四个符号来作为筛选器的分隔符的。Class筛选器通过classFilter来完成,它还把Pseudo中的:not、:nth-child单独从Pseudo类中提出来处理。对于[的属性筛选器,实现起来也很简单。除去这些,它还调用jQuery.expr[m[1]];来处理Pseudo类。

Sizzle过滤器的实现代码如下所示。

广州网站建设,网站建设,广州网页设计,广州网站设计
  1. Sizzle.filter = function(expr, set, inplace, not){  
  2.     var old = exprresult = [], curLoop = set, match, anyFound,  
  3.         isXMLFilter = set && set[0] && isXML(set[0]);  
  4.     while ( expr && set.length ) {  
  5.         //Expr.filter包含元素[CHILD,PSEUDO,ID,TAG,CLASS, ATTR,POS],元素类型是Function  
  6.         //match: {  
  7.         //    ID: /#((?:[\w\u00c0-\uFFFF_-]|\\.)+)/,  
  8.         //    CLASS: /\.((?:[\w\u00c0-\uFFFF_-]|\\.)+)/,  
  9.         //    NAME: /\[name=['"]*((?:[\w\u00c0-\uFFFF_-]|\\.)+)['"]*\]/,  
  10.         //    ATTR: /\[\s*((?:[\w\u00c0-\uFFFF_-]|\\.)+ )\s*(?:(\S?=)\s*(['"]*) (.*?)\3|)\s*\]/,  
  11.         //    TAG: /^((?:[\w\u00c0-\uFFFF\*_-]|\\.)+)/,  
  12.         //    CHILD: /:(only|nth|last|first)-child(?:\( (even|odd|[\dn+-]*)\))?/,  
  13.         //    POS: /:(nth|eq|gt|lt|first|last|even|odd)(?:\((\d*)\))?(?=[^-]|$)/,  
  14.         //    PSEUDO: /:((?:[\w\u00c0-\uFFFF_-]|\\.)+ )(?:\((['"]*)((?:\([^\])+\)|[^\2\ (\)]*)+)\2\))?/  
  15.         //}  
  16.         for ( var type in Expr.filter ) {  
  17.             //这里先判断下过滤器是不是符合jQuery选择器的语法  
  18.             //把正则匹配的结果赋值给match变量  
  19.  //当type为PSEUDO和POS时,进入该代码块  
  20.             if ( (match = Expr.match[ type ].exec( expr )) != null ) {  
  21.                 var filter = Expr.filter[ type ], found, item;  
  22.                 anyFound = false;  
  23.                 if ( curLoop == result ) {  
  24.                     result = [];  
  25.                 }  
  26.                 //Expr.preFilter和Expr.filter定义方法类似,只是元素的方法不一样  
  27.                 //主要功能就是做过滤之前的过滤器处理,例如:  
  28.                 //ID: function(match){  
  29.                 //    return match[1].replace(/\\/g, "");  
  30.                 //},  
  31.                 //就是去掉\,  
  32.                 //TAG: function(match, curLoop){  
  33.                 //    for ( var i = 0; !curLoop[i]; i++ ){}  
  34.                 //    return isXML(curLoop[i]) ? match[1] :  match[1].toUpperCase();  
  35.                 //},  
  36.                 //判断标签是不是XML对象,如果不是返回标签大写  
  37.                 if ( Expr.preFilter[ type ] ) {  
  38.                     //进一步处理正则匹配的结果,由于js没有方法重载的概念,  
  39.                     //虽然有些元素可能没有5个参数,js编译器会自动忽略,而不会出错  
  40.                     //例如,在C语言中会报错,js不会  
  41.                     //用到5个参数的只有CLASS过滤和PSEUDO  
  42.                     match = Expr.preFilter[ type ]( match,  curLoop, inplace, result, not, isXMLFilter );  
  43.                     if ( !match ) {  
  44.                         anyFound = found = true;  
  45.                     } else if ( match === true ) {  
  46.                         continue;  
  47.                     }  
  48.                 }  
  49.                 //如果存在匹配  
  50.                 if ( match ) {  
  51.                     for ( var i = 0; (item = curLoop[i]) != null; i++ ) {  
  52.                         if ( item ) {  
  53.                             found = filter( item, match, i, curLoop );  
  54.                             var pass = not ^ !!found;  
  55.                             if ( inplace && found != null ) {  
  56.                                 if ( pass ) {  
  57.                                     anyFound = true;  
  58.                                 } else {  
  59.                                     curLoop[i] = false;  
  60.                                 }  
  61.                             } else if ( pass ) {  
  62.                                 result.push( item );  
  63.                                 anyFound = true;  
  64.                             }  
  65.                         }  
  66.                     }  
  67.                 }  
  68.                 //如果匹配到元素  
  69.                 if ( found !== undefined ) {  
  70.                     //如果没有指定上下文  
  71.                     if ( !inplace ) {  
  72.                         curLoop = result;  
  73.                     }  
  74.                     exprexpr = expr.replace( Expr.match[ type ], "" ); //清除空格  
  75.                     //如果不匹配,则返回空数组  
  76.                     if ( !anyFound ) {  
  77.                         return [];  
  78.                     }  
  79.                     break;  
  80.                 }  
  81.             }  
  82.         }  
  83.         //处理不正确的表达式  
  84.         if ( expr == old ) {  
  85.             if ( anyFound == null ) {  
  86.                 throw "Syntax error, unrecognized expression: " + expr;  
  87.             } else {  
  88.                 break;  
  89.             }  
  90.         }  
  91.         //把表达式传递给old存储  
  92.         old = expr;  
  93.     }  
  94.     //返回过滤的集合  
  95.     return curLoop;  
  96. }; 

广州网站建设,网站建设,广州网页设计,广州网站设计
标签:
飞机