jQuery1.11源码分析(3)-----Sizzle源码中的浏览器兼容性检测和处理[原创]

上一章讲了正则表达式，这一章继续我们的前菜，浏览器兼容性处理。

先介绍一个简单的沙盒测试函数。

/**
 * Support testing using an element
 * @param {Function} fn Passed the created div and expects a boolean result
 */
//特性检测的一个技巧，造一个div，最后将其删掉,提供一种简单的沙盒(如果该div不加入到DOM树上，则部分属性如currentStyle会没有)
function assert( fn ) {
	var div = document.createElement("div");

	try {
		return !!fn( div );
	} catch (e) {
		return false;
	} finally {
		// Remove from its parent by default
		if ( div.parentNode ) {
            //为了不造成影响，最后如果该div还在DOM树上，就将其移除掉
			div.parentNode.removeChild( div );
		}
		// release memory in IE
        // IE下对于不在DOM树里的DOM节点必须手动置为null，关于IE内存泄露的文章很多，不再赘述
		div = null;
	}
}

嗯，说明如注释，接下来我们先处理push函数，有些浏览器Nodelist是不能使用push的，我们先检测一下在当前浏览器下push能不能支持Nodelist，不能的话则把push换成自己的方法，使push能够支持Nodelist

// Optimize for push.apply( _, NodeList )
//居然还可以对push进行优化，看看push支不支持Nodelist
//因为Nodelist不是数组，所以在某些浏览器下没有Push方法，需要人工造一个支持nodelist的push方法。
try {
	push.apply(
		(arr = slice.call( preferredDoc.childNodes )),
		preferredDoc.childNodes
	);
	// Support: Android < 4.0
	// Detect silently failing push.apply
    //防止安卓4.0以下版本静默失败(失败了但不报错)。
	arr[ preferredDoc.childNodes.length ].nodeType;
} catch ( e ) {
    //如果arr有值，即arr.length > 0，说明上述push方法是有效的，使用原生API，否则换成自己的方法
	push = { apply: arr.length ?
		// Leverage slice if possible
		function( target, els ) {
            //这里一定要用apply,否则会把整个els给Push进去而不是拆成一个个push
			push_native.apply( target, slice.call(els) );
		} :

		// Support: IE<9
		// Otherwise append directly
        //这里不明白为什么。。
        //因为在IE下对Nodelist执行slice会报错找不到JScript对象，所以arr.length为0
        //http://www.jb51.net/article/24182.htm
		function( target, els ) {
			var j = target.length,
				i = 0;
			// Can't trust NodeList.length
            //为什么IE8下不能相信长度？
			while ( (target[j++] = els[i++]) ) {}
			target.length = j - 1;
		}
	};
}

说明如注释，然后再来三发对于html元素向DOM元素转换时，部分属性会遇到的bug以及处理

// Support: IE<8
// Prevent attribute/property "interpolation"
// http://msdn.microsoft.com/en-us/library/ms536429%28VS.85%29.aspx
//在IE<8下会自动串改部分属性，比如下面的href会改成当前地址+#，大家可以试试。
//出现这种情况后，当我们要取某些属性时，交给代理函数进行处理，比如Expr.attrHandle
if ( !assert(function( div ) {
	div.innerHTML = "<a href='#'></a>";
	return div.firstChild.getAttribute("href") === "#" ;
}) ) {
	addHandle( "type|href|height|width", function( elem, name, isXML ) {
		if ( !isXML ) {
            //getAttribute我搜了一下。。没有第二个参数，还没翻标准。。暂且认为是错的。
//我靠。。还真有第二个参数。。http://msdn.microsoft.com/en-us/library/ms536429%28VS.85%29.aspx
			return elem.getAttribute( name, name.toLowerCase() === "type" ? 1 : 2 );
		}
	});
}

// Support: IE<9
// Use defaultValue in place of getAttribute("value")
if ( !support.attributes || !assert(function( div ) {
	div.innerHTML = "<input/>";
	div.firstChild.setAttribute( "value", "" );
	return div.firstChild.getAttribute( "value" ) === "";
}) ) {
	addHandle( "value", function( elem, name, isXML ) {
		if ( !isXML && elem.nodeName.toLowerCase() === "input" ) {
			return elem.defaultValue;
		}
	});
}

// Support: IE<9
// Use getAttributeNode to fetch booleans when getAttribute lies
//使用getAttribute获取那些非attrName=attrValue形式的attr属性时，会出错，所以换成使用getAttributeNode，然后判断获得的Attr节点的specified属性，看看是否指定。
if ( !assert(function( div ) {
	return div.getAttribute("disabled") == null;
}) ) {
	addHandle( booleans, function( elem, name, isXML ) {
		var val;
		if ( !isXML ) {
			return elem[ name ] === true ? name.toLowerCase() :
					(val = elem.getAttributeNode( name )) && val.specified ?
					val.value :
				null;
		}
	});
}

说明如注释，接下来我们先声明一个对象，这个对象类似于配置文件(config)的作用，嗯。。配置文件通常很长

Expr = Sizzle.selectors = {

	// Can be adjusted by the user
    //缓存的长度
	cacheLength: 50,
    //用来标识奇葩函数
	createPseudo: markFunction,
    //存放用来匹配的表达式
	match: matchExpr,
    //前面说过的，存放提取部分特殊属性的handle
	attrHandle: {},
    //查找过程所用的函数就存在这，后面会进行声明
	find: {},
    //前面说个token中有一种类型是表示两个元素的关系，这个关系处理函数用relative保存起来，first用来表示是否是查找到的第一个元素。
    //例如假设tokens[i]是{type:'>',value:'>'},调用body[Expr.relative[tokens[i].type][dir]],
	relative: {
		">": { dir: "parentNode", first: true },
		" ": { dir: "parentNode" },
		"+": { dir: "previousSibling", first: true },
		"~": { dir: "previousSibling" }
	},

在Expr里还有三个部分：preFilter(用来对捕获组进行预处理)，filter(返回一个个matcher，最后将多个matcher编译成一个)，pseudo(其实就是filter的一种)，后续可能留出篇幅来进行讲解。

接下来我们休息一下，再一口气啃掉一个超长的初始化函数。这个初始化的主要作用是从健壮性的考虑出发，设置一下文档节点，检查一下是不是HTML，检查一下各个原生API是不是好用，检查一下querySelectorAll是不是好用，初始化查找过程用的函数(比如Expr.find['ID']);

/**
 * Sets document-related variables once based on the current document
 * @param {Element|Object} [doc] An element or document object to use to set the document
 * @returns {Object} Returns the current document
 */
//基于当前文档节点设置一些文档相关的内容，如支持性什么的。
setDocument = Sizzle.setDocument = function( node ) {
    console.log('setDocument in');
	var hasCompare,
		doc = node ? node.ownerDocument || node : preferredDoc,         //获得文档节点的一种方式，这样写的好处是保持健壮性
		parent = doc.defaultView;

	// If no document and documentElement is available, return
    //nodeType不等于9说明不是文档节点
    //做这么多判断。。嗯。。还是为了健壮性
	if ( doc === document || doc.nodeType !== 9 || !doc.documentElement ) {
		return document;
	}

	// Set our document
	document = doc;
	docElem = doc.documentElement;

	// Support tests
	documentIsHTML = !isXML( doc );

	// Support: IE>8
	// If iframe document is assigned to "document" variable and if iframe has been reloaded,
	// IE will throw "permission denied" error when accessing "document" variable, see jQuery #13936
	// IE6-8 do not support the defaultView property so parent will be undefined
    //这里是一个jQuery的bug修复
	if ( parent && parent !== parent.top ) {
		// IE11 does not have attachEvent, so all must suffer
		if ( parent.addEventListener ) {
			parent.addEventListener( "unload", function() {
				setDocument();
			}, false );
		} else if ( parent.attachEvent ) {
			parent.attachEvent( "onunload", function() {
				setDocument();
			});
		}
	}

	/* Attributes
	---------------------------------------------------------------------- */

	// Support: IE<8
	// Verify that getAttribute really returns attributes and not properties (excepting IE8 booleans)
    //如果这里检测通过的话，后面获取属性值用的就是getAttribute这个API，否则用的就是getAttributeNode
	support.attributes = assert(function( div ) {
		div.className = "i";
		return !div.getAttribute("className");
	});

	/* getElement(s)By*
	---------------------------------------------------------------------- */

	// Check if getElementsByTagName("*") returns only elements
    //检查getElementsByTagName是否会包含注释节点，最好不要包含。
	support.getElementsByTagName = assert(function( div ) {
		div.appendChild( doc.createComment("") );
		return !div.getElementsByTagName("*").length;
	});

	// Check if getElementsByClassName can be trusted
    //?????细节
	support.getElementsByClassName = rnative.test( doc.getElementsByClassName ) && assert(function( div ) {
		div.innerHTML = "<div class='a'></div><div class='a i'></div>";

		// Support: Safari<4
		// Catch class over-caching
		div.firstChild.className = "i";
		// Support: Opera<10
		// Catch gEBCN failure to find non-leading classes
        //Opera<10 的时候当一个元素有多个class的时候，获得第二个会出错。
		return div.getElementsByClassName("i").length === 2;
	});
	// Support: IE<10
	// Check if getElementById returns elements by name
	// The broken getElementById methods don't pick up programatically-set names,
	// so use a roundabout getElementsByName test
    //????所以迂回使用getElementsByName来检测？不明原理
	support.getById = assert(function( div ) {
		docElem.appendChild( div ).id = expando;
		return !doc.getElementsByName || !doc.getElementsByName( expando ).length;
	});
    //Expr里的函数分为查找和过滤两种功能类型。
    //接下来分别进行这两种函数功能性的检测和支持
	// ID find and filter
	if ( support.getById ) {

		Expr.find["ID"] = function( id, context ) {
            //??????为什么要转换成字符串形式的undefined
			if ( typeof context.getElementById !== strundefined && documentIsHTML ) {
				var m = context.getElementById( id );
				// Check parentNode to catch when Blackberry 4.6 returns
				// nodes that are no longer in the document #6963
                //!!!!在黑莓4.6的浏览器中会返回那些不在DOM树中的节点，所以通过该节点是否有父节点来判断该节点是否在DOM树中,bug修正，并且转换为数组形式。
				return m && m.parentNode ? [m] : [];
			}
		};
        //这里返回一个后面用来做matcher的函数
		Expr.filter["ID"] = function( id ) {
            //对id做编码转换，这是一种闭包类型。
			var attrId = id.replace( runescape, funescape );
			return function( elem ) {
				return elem.getAttribute("id") === attrId;
			};
		};
	} else {
		// Support: IE6/7
		// getElementById is not reliable as a find shortcut
        //???getElementById不可靠？？
        //!!!!删掉以后，Sizzle就不再通过ID来获取节点，获取属性的方式也由getAttribute变为getAttributeNode
		delete Expr.find["ID"];

		Expr.filter["ID"] =  function( id ) {
			var attrId = id.replace( runescape, funescape );
			return function( elem ) {
                //每个DOM元素下有隐含的属性节点，通过查看其属性节点的方式来过滤
				var node = typeof elem.getAttributeNode !== strundefined && elem.getAttributeNode("id");
				return node && node.value === attrId;
			};
		};
	}

	// Tag
	Expr.find["TAG"] = support.getElementsByTagName ?
		function( tag, context ) {
            console.log('find tag begin');
			if ( typeof context.getElementsByTagName !== strundefined ) {
				return context.getElementsByTagName( tag );
			}

		} :
        //否则采用过滤掉注释节点的写法。
		function( tag, context ) {
            console.log('find tag begin');
			var elem,
				tmp = [],
				i = 0,
				results = context.getElementsByTagName( tag );

			// Filter out possible comments
            //必须过滤注释节点
			if ( tag === "*" ) {
                //赋值判断写法。
				while ( (elem = results[i++]) ) {
					if ( elem.nodeType === 1 ) {
						tmp.push( elem );
					}
				}

				return tmp;
			}
			return results;
		};

	// Class
	Expr.find["CLASS"] = support.getElementsByClassName && function( className, context ) {
        console.log('find class begin');
		if ( typeof context.getElementsByClassName !== strundefined && documentIsHTML ) {
			return context.getElementsByClassName( className );
		}
	};

	/* QSA/matchesSelector
	---------------------------------------------------------------------- */

	// QSA and matchesSelector support

	// matchesSelector(:active) reports false when true (IE9/Opera 11.5)
	rbuggyMatches = [];

	// qSa(:focus) reports false when true (Chrome 21)
	// We allow this because of a bug in IE8/9 that throws an error
	// whenever `document.activeElement` is accessed on an iframe
	// So, we allow :focus to pass through QSA all the time to avoid the IE error
	// See http://bugs.jquery.com/ticket/13378
    //用来存放有bug的QSA字符串，最后用|连接起来当作正则表达式，用来检测选择符是否有bug
	rbuggyQSA = [];

	if ( (support.qsa = rnative.test( doc.querySelectorAll )) ) {
		// Build QSA regex
		// Regex strategy adopted from Diego Perini
        //这两个assert没有返回值，主要是把有bug的QSA字符串检测出来。
		assert(function( div ) {
			// Select is set to empty string on purpose
			// This is to test IE's treatment of not explicitly
			// setting a boolean content attribute,
			// since its presence should be enough
			// http://bugs.jquery.com/ticket/12359
            //这个bug检测很简练
			div.innerHTML = "<select>
<option selected="selected"></option>




</select>";

			// Support: IE8, Opera 10-12
			// Nothing should be selected when empty strings follow ^= or $= or *=
            //!!!空白字符串不应该跟在 ^=、$=、*=这样的字符后面，否则逻辑上是走不通的，你想想啊，^=''的意思是匹配开头为空字符的字符串。。哪个字符串开头是空字符？，剩下同理
			if ( div.querySelectorAll("[t^='']").length ) {
				rbuggyQSA.push( "[*^$]=" + whitespace + "*(?:''|"")" );
			}

			// Support: IE8
			// Boolean attributes and "value" are not treated correctly
            //!!!IE8中的QSA不能正确识别非key=value形式的属性选择符
			if ( !div.querySelectorAll("[selected]").length ) {
				rbuggyQSA.push( "\[" + whitespace + "*(?:value|" + booleans + ")" );
			}

			// Webkit/Opera - :checked should return selected option elements
			// http://www.w3.org/TR/2011/REC-css3-selectors-20110929/#checked
			// IE8 throws error here and will not see later tests
            //!!!!:checked伪类选择器理论应该返回被选择的option元素，但IE8下有bug。。
			if ( !div.querySelectorAll(":checked").length ) {
				rbuggyQSA.push(":checked");
			}
		});

		assert(function( div ) {
			// Support: Windows 8 Native Apps
			// The type and name attributes are restricted during .innerHTML assignment
            //????卧槽。。win8不能直接用innerHTML来创建type和name属性？
			var input = doc.createElement("input");
			input.setAttribute( "type", "hidden" );
			div.appendChild( input ).setAttribute( "name", "D" );

			// Support: IE8
			// Enforce case-sensitivity of name attribute
            //!!!!增强对name大小写的敏感性，如果大小写不敏感，则不能使用带有name=.的属性选择符
			if ( div.querySelectorAll("[name=d]").length ) {
				rbuggyQSA.push( "name" + whitespace + "*[*^$|!~]?=" );
			}

			// FF 3.5 - :enabled/:disabled and hidden elements (hidden elements are still enabled)
			// IE8 throws error here and will not see later tests
            //!!!!理论上hidden的元素还应该能用:enabled伪类选择符选择到的，但IE8和FF3.5下有bug
			if ( !div.querySelectorAll(":enabled").length ) {
				rbuggyQSA.push( ":enabled", ":disabled" );
			}

			// Opera 10-11 does not throw on post-comma invalid pseudos
            //?????
			div.querySelectorAll("*,:x");
			rbuggyQSA.push(",.*:");
		});
	}

	if ( (support.matchesSelector = rnative.test( (matches = docElem.webkitMatchesSelector ||
		docElem.mozMatchesSelector ||
		docElem.oMatchesSelector ||
		docElem.msMatchesSelector) )) ) {

		assert(function( div ) {
			// Check to see if it's possible to do matchesSelector
			// on a disconnected node (IE 9)
            //!!!!检测是否matchesSelector会匹配到没有连接的节点
			support.disconnectedMatch = matches.call( div, "div" );

			// This should fail with an exception
			// Gecko does not error, returns false instead
            //?????
			matches.call( div, "[s!='']:x" );
			rbuggyMatches.push( "!=", pseudos );
		});
	}

	rbuggyQSA = rbuggyQSA.length && new RegExp( rbuggyQSA.join("|") );
	rbuggyMatches = rbuggyMatches.length && new RegExp( rbuggyMatches.join("|") );

	/* Contains
	---------------------------------------------------------------------- */
	hasCompare = rnative.test( docElem.compareDocumentPosition );

	// Element contains another
	// Purposefully does not implement inclusive descendent
	// As in, an element does not contain itself
    //这里和懒函数的方式异曲同工,如果有原生compareDocumentPosition或contains
	contains = hasCompare || rnative.test( docElem.contains ) ?
		function( a, b ) {
            console.log('contains begin');
			var adown = a.nodeType === 9 ? a.documentElement : a,
				bup = b && b.parentNode;
			return a === bup || !!( bup && bup.nodeType === 1 && (
				adown.contains ?
					adown.contains( bup ) :
                    //这里&上16仅仅是判断a是否包含bup，b如果是a本身，则两者应该不算包含关系
                    //http://www.2cto.com/kf/201301/181075.html
					a.compareDocumentPosition && a.compareDocumentPosition( bup ) & 16
			));
		} :
        //否则就用土办法不断遍历DOM树
		function( a, b ) {
			if ( b ) {
				while ( (b = b.parentNode) ) {
					if ( b === a ) {
						return true;
					}
				}
			}
			return false;
		};

	/* Sorting
	---------------------------------------------------------------------- */

	// Document order sorting
    //用来传给sort函数的排序方法
	sortOrder = hasCompare ?
	function( a, b ) {
		// Flag for duplicate removal
		if ( a === b ) {
			hasDuplicate = true;
			return 0;
		}

		// Sort on method existence if only one input has compareDocumentPosition
        //!undefined === true
        //!function (){} === false
        //if(-1){console.log(1);} -->1
        //用以检查是否两个输入都有该API
		var compare = !a.compareDocumentPosition - !b.compareDocumentPosition;
		if ( compare ) {
			return compare;
		}

		// Calculate position if both inputs belong to the same document
		compare = ( a.ownerDocument || a ) === ( b.ownerDocument || b ) ?
			a.compareDocumentPosition( b ) :

			// Otherwise we know they are disconnected
			1;

		// Disconnected nodes
		if ( compare & 1 ||
			(!support.sortDetached && b.compareDocumentPosition( a ) === compare) ) {

			// Choose the first element that is related to our preferred document
			if ( a === doc || a.ownerDocument === preferredDoc && contains(preferredDoc, a) ) {
				return -1;
			}
			if ( b === doc || b.ownerDocument === preferredDoc && contains(preferredDoc, b) ) {
				return 1;
			}

			// Maintain original order
			return sortInput ?
                //最后这里处理了给字符串调用sort的情况
                //后面有一句代码
                //support.sortStable = expando.split("").sort( sortOrder ).join("") === expando;
				( indexOf.call( sortInput, a ) - indexOf.call( sortInput, b ) ) :
				0;
		}

		return compare & 4 ? -1 : 1;
	} :
    //如果没有contains这样的原生API使用
	function( a, b ) {
		// Exit early if the nodes are identical
		if ( a === b ) {
			hasDuplicate = true;
			return 0;
		}

		var cur,
			i = 0,
			aup = a.parentNode,
			bup = b.parentNode,
			ap = [ a ],
			bp = [ b ];

		// Parentless nodes are either documents or disconnected
        //只要其中有一个元素没有父元素
		if ( !aup || !bup ) {
			return a === doc ? -1 :
				b === doc ? 1 :
				aup ? -1 :
				bup ? 1 :
				sortInput ?
				( indexOf.call( sortInput, a ) - indexOf.call( sortInput, b ) ) :
				0;

		// If the nodes are siblings, we can do a quick check
        //或者两个元素的父元素是兄弟，就可以立马判定
		} else if ( aup === bup ) {
			return siblingCheck( a, b );
		}

		// Otherwise we need full lists of their ancestors for comparison
        //否则遍历出所有祖先路径，然后一一对比，直到找到分歧点，再比较分歧点的序数即可
		cur = a;
		while ( (cur = cur.parentNode) ) {
			ap.unshift( cur );
		}
		cur = b;
		while ( (cur = cur.parentNode) ) {
			bp.unshift( cur );
		}

		// Walk down the tree looking for a discrepancy
		while ( ap[i] === bp[i] ) {
			i++;
		}

		return i ?
			// Do a sibling check if the nodes have a common ancestor
			siblingCheck( ap[i], bp[i] ) :

			// Otherwise nodes in our document sort first
			ap[i] === preferredDoc ? -1 :
			bp[i] === preferredDoc ? 1 :
			0;
	};
    //最后返回文档节点
	return doc;
};

上面这个初始化函数实在太长。。再调用一下就好。

// Initialize against the default document
setDocument();