今天碰到一个古怪的问题,按照以前的逻辑思维怎么也走不通。大概的代码是:
$("#node_a,#node_b,#node_c").appendTo($("#container"));
按照以前的逻辑就是将node_a,node_b,node_c节点按顺序插入到container节点内。可是今天出错了。
下面看一个DEMO。http://demo.thankphp.net/65_jquery.htm [IE下看效果]
可以看出来jquery1.3.2和jquery1.3.1的selector有着天壤之别。
仔细阅读了一下jquery最新的1.3.2的代码,发现jquery1.3.2的selector有这样的代码变化。
Sizzle CSS选择器引擎中增加了这样一段话:http://sizzlejs.com/ thankwsx
if ( sortOrder ) {
hasDuplicate = false;
results.sort(sortOrder);
if ( hasDuplicate ) {
for ( var i = 1; i < results.length; i++ ) {
if ( results[i] === results[i-1] ) {
results.splice(i--, 1);
}
}
}
}
sortOrder又是哪里来的呢?
var sortOrder;
if ( document.documentElement.compareDocumentPosition ) {
sortOrder = function( a, b ) {
var ret = a.compareDocumentPosition(b) & 4 ? -1 : a === b ? 0 : 1;
if ( ret === 0 ) {
hasDuplicate = true;
}
return ret;
};
} else if ( "sourceIndex" in document.documentElement ) {
sortOrder = function( a, b ) {
var ret = a.sourceIndex - b.sourceIndex;
if ( ret === 0 ) {
hasDuplicate = true;
}
return ret;
};
} else if ( document.createRange ) {
sortOrder = function( a, b ) {
var aRange = a.ownerDocument.createRange(), bRange = b.ownerDocument.createRange();
aRange.selectNode(a);
aRange.collapse(true);
bRange.selectNode(b);
bRange.collapse(true);
var ret = aRange.compareBoundaryPoints(Range.START_TO_END, bRange);
if ( ret === 0 ) {
hasDuplicate = true;
}
return ret;
};
}
现在一切都清楚了,jquery1.3.2版本之前,选择器是按选择器提供的顺序选择节点的,而jquery1.3.2版本之后选择器选择节点的先后顺序与你的书写顺序无关了,jquery会自动匹配节点集合中节点的顺序按节点顺序返回。
为了查这么一个BUG,花费了大半天的时间。其实只要看看jquery官方提供的Release Note就一切明了了。http://docs.jquery.com/Release:jQuery_1.3.2
项目庞大了之后,所有引用的第三方的代码更新升级的时候必须小心谨慎,如果有一些意料外的事情发生要首先检查是否是第三方代码引起的。【在本身代码未作更改的前提下】。第三方代码的升级换代要了解清楚可能会有的影响。兼容性在项目中有时候是最最重要的。

