jQuery源码学习札记四

jQuery源码学习笔记四

<p>这一节重点讲jQuery对样式的处理，虽然IE同时拥有style,currentStyle与runtimeStyle，但没有一个能获取<a href="https://developer.mozilla.org/en/CSS/computed_value">used value</a>，这是原罪。直接导致的结果是处理样式，就是处理IE的非精确值问题，有时能否获得值也是个大问题。jQuery与其他类库一样，在这方面下了很大工夫，最终在这方面打败其他类库。</p>

<pre " : "") + className;
????????? });
??????? },

??????? // internal only, use removeClass("class")
??????? remove: function( elem, classNames ) {
????????? //觉得什么都用自定义函数解决效率太低了，更何况jQuery.grep的逻辑如此复杂
????????? if (elem.nodeType == 1)
??????????? elem.className = classNames !== undefined ?
??????????? jQuery.grep(elem.className.split(/\s+/), function(className){
??????????? return !jQuery.className.has( classNames, className );
????????? }).join(" ") :
??????????? "";
??????? },

??????? // internal only, use hasClass("class")
??????? has: function( elem, className ) {
????????? return elem && jQuery.inArray( className, (elem.className || elem).toString().split(/\s+/) ) &gt; -1;
??????? }
????? },
????? //这是一个非常重要的内部函数，用于精确获取样式值
????? // A method for quickly swapping in/out CSS properties to get correct calculations
????? swap: function( elem, options, callback ) {
??????? var old = {};//备份用
??????? // Remember the old values, and insert the new ones
??????? for ( var name in options ) {
????????? old[ name ] = elem.style[ name ];
????????? elem.style[ name ] = options[ name ];
??????? }
??????? //交换之后调用测试函数
??????? callback.call( elem );
??????? //测试完后还原
??????? // Revert the old values
??????? for ( var name in options )
????????? elem.style[ name ] = old[ name ];
????? },
????? //jQuery对象也有一个与它同名的方法，但这不是简单的代理
????? //不过实际路线图为原型的css→原型的attr→静态的attr→静态的css
????? //最后是curCSS，这才是真身
????? css: function( elem, name, force, extra ) {
??????? //处理宽与高，因为IE不能正确返回以px为单位的精确值
??????? if ( name == "width" || name == "height" ) {
????????? //props用于swap，一个聪明的手段，值得学习
????????? var val, props = { position: "absolute", visibility: "hidden", display:"block" }, which = name == "width" ? [ "Left", "Right" ] : [ "Top", "Bottom" ];

????????? function getWH() {
??????????? //Ext与Prototypet等类库也是这样实现
??????????? //在标准模式中，offsetWidth是包含padding，borderWidth与width
??????????? //在怪癖模式下，offsetWidth等于width，而width是包含padding与borderWidth
??????????? //offsetHeight同理
??????????? val = name == "width" ? elem.offsetWidth : elem.offsetHeight;

??????????? if ( extra === "border" )
????????????? return;
??????????? jQuery.each( which, function() {
????????????? if ( !extra )
????????????? //求出paddingLeft与paddingRight之和，或paddingTop与paddingBottom之和，
????????????? //然后作为减数，去减offsetWidth或offsetHeight
??????????????? val -= parseFloat(jQuery.curCSS( elem, "padding" + this, true)) || 0;
????????????? if ( extra === "margin" )

????????????? val += parseFloat(jQuery.curCSS( elem, "margin" + this, true)) || 0;
??????????? else
????????????? val -= parseFloat(jQuery.curCSS( elem, "border" + this + "Width", true)) || 0;
????????? });
??????? }
??????? if ( elem.offsetWidth !== 0 )
????????? getWH();
??????? else
??????? //如果display:none就求不出offsetWidht与offsetHeight，swap一下
????????? jQuery.swap( elem, props, getWH );
??????? return Math.max(0, Math.round(val));
????? }
????? //再调用jQuery.curCSS进行深加工
????? return jQuery.curCSS( elem, name, force );
??? },

??? curCSS: function( elem, name, force ) {
????? var ret, style = elem.style;

????? // We need to handle opacity special in IE
????? if ( name == "opacity" && !jQuery.support.opacity ) {
??????? ret = jQuery.attr( style, "opacity" );

??????? return ret == "" ?
????????? "1" :
????????? ret;
????? }

????? // Make sure we're using the right name for getting the float value
????? if ( name.match( /float/i ) )
??????? name = styleFloat;

????? if ( !force && style && style[ name ] )
??????? ret = style[ name ];//缓存结果

????? else if ( defaultView.getComputedStyle ) {
??????? //标准浏览器
??????? // Only "float" is needed here
??????? if ( name.match( /float/i ) )
????????? name = "float";//把cssFloat转换为float
??????? //把驼峰风格转换为连字符风格
??????? name = name.replace( /([A-Z])/g, "-$1" ).toLowerCase();

??????? var computedStyle = defaultView.getComputedStyle( elem, null );
??????? if ( computedStyle )
????????? ret = computedStyle.getPropertyValue( name );

??????? // We should always get a number back from opacity
??????? if ( name == "opacity" && ret == "" )
????????? ret = "1";//把opacity设置成1

????? } else if ( elem.currentStyle ) {
??????? //IE浏览器部分
??????? var camelCase = name.replace(/\-(\w)/g, function(all, letter){
????????? return letter.toUpperCase();
??????? });
??????? //把连字符风格转换为驼峰风格
??????? ret = elem.currentStyle[ name ] || elem.currentStyle[ camelCase ];
??????? // 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
??????? //将不是以px为单位的计算值全部转换为以px为单位，用到 Dean Edwards（Base2类库的作者）的hack
??????? //网上有文章讲解这hach，这里不重复
??????? if ( !/^\d+(px)?$/i.test( ret ) && /^\d/.test( ret ) ) {
????????? // Remember the original values
????????? var left = style.left, rsLeft = elem.runtimeStyle.left;
????????? // Put in the new values to get a computed value out
????????? elem.runtimeStyle.left = elem.currentStyle.left;
????????? style.left = ret || 0;
????????? ret = style.pixelLeft + "px";
????????? // Revert the changed values
????????? style.left = left;
????????? elem.runtimeStyle.left = rsLeft;
??????? }
????? }
????? return ret;
??? },
??? attr: function( elem, name, value ) {
????? // 文本，注释节点不处理
????? if (!elem || elem.nodeType == 3 || elem.nodeType == 8)
??????? return undefined;
????? //不处理xml文档的
????? var notxml = !jQuery.isXMLDoc( elem ),
????? //是读方法还是写方法
????? set = value !== undefined;

????? // Try to normalize/fix the name
????? //兼容处理，
????? //jQuery.props = {
????? //"for": "htmlFor",
????? //"class": "className",
????? //"float": styleFloat,
????? //cssFloat: styleFloat,
????? //styleFloat: styleFloat,
????? //readonly: "readOnly",
????? //maxlength: "maxLength",
????? //cellspacing: "cellSpacing",
????? //rowspan: "rowSpan",
????? //tabindex: "tabIndex"
????? //};
????? name = notxml && jQuery.props[ name ] || name;

????? // Only do all the following if this is a node (faster for style)
????? // IE elem.getAttribute passes even for style
????? if ( elem.tagName ) {

??????? // These attributes require special treatment
??????? var special = /href|src|style/.test( name );

??????? // Safari mis-reports the default selected property of a hidden option
??????? // Accessing the parent's selectedIndex property fixes it
??????? //修正无法取得selected正确值的bug
??????? if ( name == "selected" && elem.parentNode )
????????? elem.parentNode.selectedIndex;

??????? // If applicable, access the attribute via the DOM 0 way
??????? if ( name in elem && notxml && !special ) {
????????? if ( set ){
??????????? //不允许改写type的值
??????????? // We can't allow the type property to be changed (since it causes problems in IE)
??????????? if ( name == "type" && jQuery.nodeName( elem, "input" ) && elem.parentNode )
????????????? throw "type property can't be changed";

??????????? elem[ name ] = value;
????????? }

????????? // browsers index elements by id/name on forms, give priority to attributes.
????????? if( jQuery.nodeName( elem, "form" ) && elem.getAttributeNode(name) )
????????? //getAttributeNode() 方法的作用是：通过指定的名称获取当前元素中的属性节点。
??????????? return elem.getAttributeNode( name ).nodeValue;

????????? // elem.tabIndex doesn't always return the correct value when it hasn't been explicitly set
????????? // http://fluidproject.org/blog/2008/01/09/getting-setting-and-removing-tabindex-values-with-javascript/
????????? //IE只能tabIndex
????????? //标准浏览器用tabindex
????????? if ( name == "tabIndex" ) {
??????????? var attributeNode = elem.getAttributeNode( "tabIndex" );
??????????? return attributeNode && attributeNode.specified
????????????? ? attributeNode.value
??????????? : elem.nodeName.match(/(button|input|object|select|textarea)/i)
????????????? ? 0
??????????? : elem.nodeName.match(/^(a|area)$/i) && elem.href
????????????? ? 0
??????????? : undefined;
????????? }

????????? return elem[ name ];
??????? }

??????? if ( !jQuery.support.style && notxml &&? name == "style" )
????????? return jQuery.attr( elem.style, "cssText", value );

??????? if ( set )
??????? // convert the value to a string (all browsers do this but IE) see #1070
????????? elem.setAttribute( name, "" + value );
??????? //IE的getAttribute支持第二个参数，可以为 0,1,2
??????? //0 是默认；1 区分属性的大小写；2取出源代码中的原字符串值。
??????? //IE 在取 href 的时候默认拿出来的是绝对路径，加参数2得到我们所需要的相对路径。
??????? var attr = !jQuery.support.hrefNormalized && notxml && special
??????? // Some attributes require a special call on IE
????????? ? elem.getAttribute( name, 2 )
??????? : elem.getAttribute( name );

??????? // Non-existent attributes return null, we normalize to undefined
??????? return attr === null ? undefined : attr;
????? }

????? // elem is actually elem.style ... set the style

????? // IE uses filters for opacity
????? if ( !jQuery.support.opacity && name == "opacity" ) {
??????? if ( set ) {
????????? // IE has trouble with opacity if it does not have layout
????????? // Force it by setting the zoom level
????????? //IE7中滤镜（filter）必须获得hasLayout才能生效，我们用zoom这个IE私有属性让其获得hasLayout
????????? elem.zoom = 1;

????????? // Set the alpha filter to set the opacity
????????? elem.filter = (elem.filter || "").replace( /alpha\([^)]*\)/, "" ) +
??????????? (parseInt( value ) + '' == "NaN" ? "" : "alpha(opacity=" + value * 100 + ")");
??????? }

??????? return elem.filter && elem.filter.indexOf("opacity=") &gt;= 0 ?
????????? (parseFloat( elem.filter.match(/opacity=([^)]*)/)[1] ) / 100) + '':
????????? "";
????? }
????? //获得其他属性，直接用DOM 0方法读写
????? name = name.replace(/-([a-z])/ig, function(all, letter){
??????? return letter.toUpperCase();
????? });

????? if ( set )
??????? elem[ name ] = value;

????? return elem[ name ];
??? },

</pre>
<p>其实在curCss与attr方法中还夹着一个clean方法，总觉得clean职责太多，里面分支繁缛，看得我头晕眼花……太凌乱，这方法应该分割成几个方法条理更清晰，效率更高。</p>
<pre )
????????? context = context.ownerDocument || context[0] && context[0].ownerDocument || document;

??????? // If a single string is passed in and it's a single tag
??????? // just do a createElement and skip the rest

??????? if ( !fragment && elems.length === 1 && typeof elems[0] === "string" ) {
????????? var match = /^&lt;(\w+)\s*\/?&gt;$/.exec(elems[0]);
????????? if ( match )
??????????? return [ context.createElement( match[1] ) ];
??????? }
??????? //div是用于把字符串转换为DOM的
??????? var ret = [], scripts = [], div = context.createElement("div");
??????? jQuery.each(elems, function(i, elem){
????????? if ( typeof elem === "number" )
??????????? elem += '';//转换为字符串

????????? if ( !elem )
??????????? return;

????????? // Convert html string into DOM nodes
????????? if ( typeof elem === "string" ) {
??????????? // Fix "XHTML"-style tags in all browsers
??????????? //生成闭合的标签对，亦即把在XHTML中不合法的写法强制转换过来
??????????? elem = elem.replace(/(&lt;(\w+)[^&gt;]*?)\/&gt;/g, function(all, front, tag){
????????????? //但对于abbr|br|col|img|input|link|meta|param|hr|area|embed等元素不修改
????????????? return tag.match(/^(abbr|br|col|img|input|link|meta|param|hr|area|embed)$/i) ?
??????????????? all :
??????????????? front + "&gt;&lt;/" + tag + "&gt;";
??????????? });

??????????? // Trim whitespace, otherwise indexOf won't work as expected
??????????? //将“ &lt;div&gt; ”去掉两边的空白“&lt;div&gt;”，用于下面的indexOf
??????????? var tags = elem.replace(/^\s+/, "").substring(0, 10).toLowerCase();

??????????? var wrap =
????????????? // option or optgroup
??????????? //option与optgroup的直接父元素一定是select
????????????? !tags.indexOf("&lt;opt") &&
????????????? [ 1, "&lt;select multiple='multiple'&gt;", "&lt;/select&gt;" ] ||
????????????? //legend的直接父元素一定是fieldset
????????????? !tags.indexOf("&lt;leg") &&
????????????? [ 1, "&lt;fieldset&gt;", "&lt;/fieldset&gt;" ] ||
????????????? //thead,tbody,tfoot,colgroup,caption的直接父元素一定是table
??????????? tags.match(/^&lt;(thead|tbody|tfoot|colg|cap)/) &&
????????????? [ 1, "&lt;table&gt;", "&lt;/table&gt;" ] ||
????????????? //tr的直接父元素一定是tbody，
????????????? !tags.indexOf("&lt;tr") &&
????????????? [ 2, "&lt;table&gt;&lt;tbody&gt;", "&lt;/tbody&gt;&lt;/table&gt;" ] ||
????????????? //&lt;thead&gt; matched above
??????????? //td与th的直接父元素一定是tr
??????????? (!tags.indexOf("&lt;td") || !tags.indexOf("&lt;th")) &&
????????????? [ 3, "&lt;table&gt;&lt;tbody&gt;&lt;tr&gt;", "&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;" ] ||
????????????? //col一定是colgroup
????????????? !tags.indexOf("&lt;col") &&
????????????? [ 2, "&lt;table&gt;&lt;tbody&gt;&lt;/tbody&gt;&lt;colgroup&gt;", "&lt;/colgroup&gt;&lt;/table&gt;" ] ||

????????????? // IE can't serialize &lt;link&gt; and &lt;script&gt; tags normally
????????????? !jQuery.support.htmlSerialize &&
????????????? [ 1, "div&lt;div&gt;", "&lt;/div&gt;" ] ||

????????????? [ 0, "", "" ];

??????????? // Go to html and back, then peel off extra wrappers
??????????? div.innerHTML = wrap[1] + elem + wrap[2];

??????????? // Move to the right depth
??????????? while ( wrap[0]-- )
????????????? div = div.lastChild;
??????????? //IE会自动添加tbody，要特殊处理
??????????? // Remove IE's autoinserted &lt;tbody&gt; from table fragments
??????????? if ( !jQuery.support.tbody ) {

????????????? // String was a &lt;table&gt;, *may* have spurious &lt;tbody&gt;

????????????? var hasBody = /&lt;tbody/i.test(elem),
????????????? tbody = !tags.indexOf("&lt;table") && !hasBody ?
??????????????? div.firstChild && div.firstChild.childNodes :

??????????????? // String was a bare &lt;thead&gt; or &lt;tfoot&gt;
????????????? wrap[1] == "&lt;table&gt;" && !hasBody ?
??????????????? div.childNodes :
??????????????? [];

????????????? for ( var j = tbody.length - 1; j &gt;= 0 ; --j )
??????????????? if ( jQuery.nodeName( tbody[ j ], "tbody" ) && !tbody[ j ].childNodes.length )
????????????????? tbody[ j ].parentNode.removeChild( tbody[ j ] );

??????????? }

??????????? // IE completely kills leading whitespace when innerHTML is used
??????????? if ( !jQuery.support.leadingWhitespace && /^\s/.test( elem ) )
????????????? div.insertBefore( context.createTextNode( elem.match(/^\s*/)[0] ), div.firstChild );
??????????? //div中的所有节点都转换为数组
??????????? elem = jQuery.makeArray( div.childNodes );
????????? }

????????? if ( elem.nodeType )
????????? //过滤非元素节点的节点
??????????? ret.push( elem );
????????? else
????????? //把符合要求的节点加入ret中
??????????? ret = jQuery.merge( ret, elem );

??????? });

??????? if ( fragment ) {
????????? for ( var i = 0; ret[i]; i++ ) {
??????????? //处理script元素
??????????? if ( jQuery.nodeName( ret[i], "script" ) && (!ret[i].type || ret[i].type.toLowerCase() === "text/javascript") ) {
????????????? scripts.push( ret[i].parentNode ? ret[i].parentNode.removeChild( ret[i] ) : ret[i] );
??????????? } else {
????????????? if ( ret[i].nodeType === 1 )
??????????????? ret.splice.apply( ret, [i + 1, 0].concat(jQuery.makeArray(ret[i].getElementsByTagName("script"))) );
????????????? fragment.appendChild( ret[i] );
??????????? }
????????? }

????????? return scripts;
??????? }

??????? return ret;
????? },