jquery 源码分析六 - Sizzle

以下吐槽：

   最近一直在面试啊找工作啊，然后学校里又有一堆事情，结果看代码的时间变少了。憋了好几天终于感觉可以写一篇文章了，早上就爬起来赶紧写下来，怕又忘了。吐槽下：小本科找工作真的好难。。。。

正文开始：

首先是Sizzle里面的一些基础方法，也可是说是用的比较多的东西。因为Sizzle一开始就定义了许许多多的变量，所以这边先讲一些这次会用到的变量(比较简单的。。)

    expando = "sizzle" + -(new Date()),
    //给每个Sizzle生成一个特征码，区别每个sizzle
    preferredDoc = window.document,
    //指向document
    dirruns = 0,
    done = 0,
    classCache = createCache(),
    tokenCache = createCache(),
    compilerCache = createCache(),
    //这个制造了一个存储的空间，具体的createCache函数会在下面讲
    sortOrder = function( a, b ) {
        if ( a === b ) {
            hasDuplicate = true;
        }
        return 0;
    },

    // 未定义
    strundefined = typeof undefined,
    MAX_NEGATIVE = 1 << 31,

    // 定义原生的方法，方便后面快速使用
    hasOwn = ({}).hasOwnProperty,
    arr = [],
    pop = arr.pop,
    push_native = arr.push,
    push = arr.push,
    slice = arr.slice,
    // 如果原生的indexOf没有的话，就用自己写得函数
    indexOf = arr.indexOf || function( elem ) {
        var i = 0,
            len = this.length;
        for ( ; i < len; i++ ) {
            if ( this[i] === elem ) {
                return i;
            }
        }
        return -1;
    },

注意：这里的代码都是在开头var里面截取出来的，所以后面都是逗号。。。

下面是关于createCache()，createCache返回的是一个function，这个函数接受两个参数，分别是key,value。key值会存入keys 数组中，然后value会放到这个函数作为object形式的相应key值下，具体代码如下：

function createCache() {
    var keys = [];

    function cache( key, value ) {
        // 用key+ " "来防止覆盖原生的一些方法
        if ( keys.push( key + " " ) > Expr.cacheLength ) {
            //若超过数量限制，就把最前面的一些数弹出
            delete cache[ keys.shift() ];
        }
        return (cache[ key + " " ] = value);
    }
    return cache;
}

 接下来是一些正则表达式，备份正则表达式还没理解，所以有注释的只是其中部分：

    //用于检测空格符，包括回车之类的
    whitespace = "[\\x20\\t\\r\\n\\f]",
    // 检测由\\.或字符-或非ASCII从00到a0的值
    characterEncoding = "(?:\\\\.|[\\w-]|[^\\x00-\\xa0])+",

    // 这个还没理解，英文翻译了也没看懂。。但是应该是用来匹配css的
    // 一个未被应用的值应该是css标识符http://www.w3.org/TR/css3-selectors/#attribute-selectors
    // Proper syntax: http://www.w3.org/TR/CSS21/syndata.html#value-def-identifier
    identifier = characterEncoding.replace( "w", "w#" ),

    // 用来匹配attribute的，有点长。。。
    attributes = "\\[" + whitespace + "*(" + characterEncoding + ")" + whitespace +
        "*(?:([*^$|!~]?=)" + whitespace + "*(?:(['\"])((?:\\\\.|[^\\\\])*?)\\3|(" + identifier + ")|)|)" + whitespace + "*\\]",

    // Prefer arguments quoted,
    //   then not containing pseudos/brackets,
    //   then attribute selectors/non-parenthetical expressions,
    //   then anything else
    // These preferences are here to reduce the number of selectors
    //   needing tokenize in the PSEUDO preFilter
    pseudos = ":(" + characterEncoding + ")(?:\\(((['\"])((?:\\\\.|[^\\\\])*?)\\3|((?:\\\\.|[^\\\\()[\\]]|" + attributes.replace( 3, 8 ) + ")*)|.*)\\)|)",

    // 检测字符串首尾空白符用的
    rtrim = new RegExp( "^" + whitespace + "+|((?:^|[^\\\\])(?:\\\\.)*)" + whitespace + "+$", "g" ),
        //用来检测逗号前后的空白的
    rcomma = new RegExp( "^" + whitespace + "*," + whitespace + "*" ),
    rcombinators = new RegExp( "^" + whitespace + "*([>+~]|" + whitespace + ")" + whitespace + "*" ),

    rattributeQuotes = new RegExp( "=" + whitespace + "*([^\\]'\"]*?)" + whitespace + "*\\]", "g" ),

    rpseudo = new RegExp( pseudos ),
    ridentifier = new RegExp( "^" + identifier + "$" ),
        //根据不同的属性建立不同的正则，后面可以分离检测不同的css selector部分
    matchExpr = {
        "ID": new RegExp( "^#(" + characterEncoding + ")" ),
        "CLASS": new RegExp( "^\\.(" + characterEncoding + ")" ),
        "TAG": new RegExp( "^(" + characterEncoding.replace( "w", "w*" ) + ")" ),
        "ATTR": new RegExp( "^" + attributes ),
        "PSEUDO": new RegExp( "^" + pseudos ),
        "CHILD": new RegExp( "^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\(" + whitespace +
            "*(even|odd|(([+-]|)(\\d*)n|)" + whitespace + "*(?:([+-]|)" + whitespace +
            "*(\\d+)|))" + whitespace + "*\\)|)", "i" ),
        "bool": new RegExp( "^(?:" + booleans + ")$", "i" ),
        // 用于 .is()
        "needsContext": new RegExp( "^" + whitespace + "*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\(" +
            whitespace + "*((?:-\\d)?\\d*)" + whitespace + "*\\)|)(?=[^-]|$)", "i" )
    },
        //input类型检测
    rinputs = /^(?:input|select|textarea|button)$/i,
    rheader = /^h\d$/i,
        //是否有原生代码
    rnative = /^[^{]+\{\s*\[native \w/,

    // 快速简单的检测ID TAG CLASS
    rquickExpr = /^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,

    rsibling = /[+~]/,
    rescape = /'|\\/g,

    // 没搞懂。。。CSS escapes http://www.w3.org/TR/CSS21/syndata.html#escaped-characters
    runescape = new RegExp( "\\\\([\\da-f]{1,6}" + whitespace + "?|(" + whitespace + ")|.)", "ig" ),
    funescape = function( _, escaped, escapedWhitespace ) {
        var high = "0x" + escaped - 0x10000;
        // NaN means non-codepoint
        // Support: Firefox
        // Workaround erroneous numeric interpretation of +"0x"
        return high !== high || escapedWhitespace ?
            escaped :
            high < 0 ?
                // BMP codepoint
                String.fromCharCode( high + 0x10000 ) :
                // Supplemental Plane codepoint (surrogate pair)
                String.fromCharCode( high >> 10 | 0xD800, high & 0x3FF | 0xDC00 );
    };

还有一段关于push那些NodeList的bug修复，在Android小于4.0的浏览器中，push会静默的失败，所以为了兼容这个，就需要写一个自己的push方法，jquery代码如下：

try {
    push.apply(
        (arr = slice.call( preferredDoc.childNodes )),
        preferredDoc.childNodes
    );
    // 检测Android<4.0
    // push静默的失败，下面这句会抛出错误
    arr[ preferredDoc.childNodes.length ].nodeType;
} catch ( e ) {
    push = { apply: arr.length ?

        // 尽量使用原生的push
        function( target, els ) {
            push_native.apply( target, slice.call(els) );
        } :

        // 对于IE9
        // 用自己的方法，直接添加到后面
        function( target, els ) {
            var j = target.length,
                i = 0;
            // 需要自己设置length，length不可靠
            while ( (target[j++] = els[i++]) ) {}
            target.length = j - 1;
        }
    };
}

下一篇会分析的是Sizzle比较核心的代码，已经看了一大部分了，会尽快发上来，不会拖延很长时间的(谁来拯救我的拖延症。。)