jQuery1.8 css模块评析
jQuery早期的核心设施早都是DE大神那里拿过来的,什么选择器，事件系统，精确计算样式……现在CSS模块集中了DE大神的两个伟大的HACK
一个是用于在标准浏览器下转换百分比值为更有用的像素值
// A tribute to the "awesome hack by Dean Edwards"
// Chrome < 17 and Safari 5.0 uses "computed value" instead of "used value" for margin-right
// Safari 5.1.7 (at least) returns percentage for a larger set of values, but width seems to be reliably pixels
// this is against the CSSOM draft spec: http://dev.w3.org/csswg/cssom/#resolved-values
if ( rnumnonpx.test( ret ) && rmargin.test( name ) ) {
width = style.width;
minWidth = style.minWidth;
maxWidth = style.maxWidth;
style.minWidth = style.maxWidth = style.width = ret;
ret = computed.width;
style.width = width;
style.minWidth = minWidth;
style.maxWidth = maxWidth;
}
一个是在IE下刷新原始值为当前的计算值(像素值)。
// From the awesome hack by Dean Edwards
// http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102291
// If we're not dealing with a regular pixel number
// but a number that has a weird ending, we need to convert it to pixels
// but not position css attributes, as those are proportional to the parent element instead
// and we can't measure the parent instead because it might trigger a "stacking dolls" problem
if ( rnumnonpx.test( ret ) && !rposition.test( name ) ) {
// Remember the original values
left = style.left;
rsLeft = elem.runtimeStyle && elem.runtimeStyle.left;
// Put in the new values to get a computed value out
if ( rsLeft ) {
elem.runtimeStyle.left = elem.currentStyle.left;
}
style.left = name === "fontSize" ? "1em" : ret;
ret = style.pixelLeft + "px" ;
// Revert the changed values
style.left = left;
if ( rsLeft ) {
elem.runtimeStyle.left = rsLeft;
}
}
return ret === "" ? "auto" : ret;
浏览器内部肯定有一套获取精确的像素值（对于某些样式属性来说）的机制，被DE大神发现了它们的触发条件。
此外,jquery还提供两个单独的API,width, height获取元素的长宽,它们甚至可以取得隐藏元素的长宽。出于性能的考量，浏览器对隐藏元素的样式是统统不计算的，有一套默认值返回给你，对于长宽就是0。对于动画来说，这有点不方便，比如show, slideDown等特效！因此jQuery等偷偷让它们显示出来，取得精确值，再隐藏回来，这个是由jquery.swap方法来干。不过到了jquery1.8中，是否要调用这swap方法的条件严格了，
rdisplayswap = /^(none|table(?!-c[ea]).+)/,
jQuery.each([ "height" , "width" ], function ( i, name ) {
jQuery.cssHooks[ name ] = {
get: function ( elem, computed, extra ) {
if ( computed ) {
// certain elements can have dimension info if we invisibly show them
// however, it must have a current display style that would benefit from this
if ( elem.offsetWidth === 0 && rdisplayswap.test( curCSS( elem, "display" ) ) ) {
return jQuery.swap( elem, cssShow, function () {
return getWidthOrHeight( elem, name, extra );
});
} else {
return getWidthOrHeight( elem, name, extra );
}
}
},
set: function ( elem, value, extra ) {}
};
});
rdisplayswap这个正则意思是，以 none 或者 table （但后面不是 -ce 或 -ca）开头的display值。换言之，下面这几种display值会进入swap分支
none table-column table-column-group table-footer-group table-header-group table-row table-row-group
此外，我们在设置宽高时，jquery会根据当前的box-sizing选择盒子模型，于是有了augmentWidthOrHeight这个方法。
为了不用用户自己写CSS3私有实现的前缀，jquery还会贴心地帮你补上它们，于是有了vendorPropName方法。
由于现在-webkit-的私有属性基本上事实的标准，opera也开始支持-webkit-前缀，我们可以看到 cssPrefixes = [ "Webkit", "O", "Moz", "ms" ] 是这样排列的！
有些样式，必须添加单位才能效，而jquery搞了个cssNumber，帮你在这些样式之外的样式补上“px”。总之，jquery在背后帮你做了许多事情，你写一行代码，jQuery帮你写了剩下的五十行或三百行！
标签: javascript
作者： Leo_wl
出处： http://www.cnblogs.com/Leo_wl/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
版权信息查看更多关于jQuery1.8 css模块评析的详细内容...