mass Framework attr模块 v3
为了获取最佳的性能与兼容性，attr模块在v3中分割为两大块。attr模块大胆HTML5的classList,Array.isArray等新式API， attr_fix则是专门为IE6789准备的。attr模块存在大量的钩子，为摆平浏览器做了许多工件，但我们没有必须把所有补丁都集成到一个JS文件，其中过半是为IE侍侯的，因此分割出去对标准浏览器的加载量非常有利。
下面是attr.js，它相当于jQuery的attributes.js（github中的划分）。
//==================================================// 属性操作模块 v3//==================================================define("attr",!!top.getComputedStyle ? ["$node"] : ["$attr_fix"], function( $ ){ var rreturn = /\r/g, rtabindex = /^(a|area|button|input|object|select|textarea)$/i, rnospaces = /\S+/g, support = $.support function getValType( el ){ var ret = el.tagName.toLowerCase(); return ret == "input" && /checkbox|radio/.test(el.type) ? el.type : ret; } $.implement({ /** * 为所有匹配的元素节点添加className，添加多个className要用空白隔开 * 如$("body").addClass("aaa");$("body").addClass("aaa bbb"); * <a href="http://www.cnblogs.com/rubylouvre/archive/2011/01/27/1946397.html">相关链接</a> */ addClass: function( item ){ if ( typeof item == "string") { for ( var i = 0, el; el = this[i++]; ) { if ( el.nodeType === 1 ) { item.replace(rnospaces, function(clazz){ el.classList.add(clazz); }) } } } return this; }, //如果不传入类名,则清空所有类名,允许同时删除多个类名 removeClass: function( item ) { var removeSome = item && typeof item === "string",removeAll = item === void 0 for ( var i = 0, node; node = this[ i++ ]; ) { if ( node.nodeType === 1 ) { if(removeSome && node.className){ item.replace(rnospaces, function(clazz){ node.classList.remove(clazz); }) }else if(removeAll){ node.className = ""; } } } return this; }, //如果第二个参数为true，要求所有匹配元素都拥有此类名才返回true hasClass: function( item, every ) { var method = every === true ? "every" : "some", rclass = new RegExp('(\\s|^)'+item+'(\\s|$)');//判定多个元素，正则比indexOf快点 return $.slice(this)[ method ](function( el ){//先转换为数组 return (el.className || "").match(rclass); }); }, //如果存在（不存在）就删除（添加）指定的类名。对所有匹配元素进行操作。 toggleClass: function( value, stateVal ){ var type = typeof value , classNames = type === "string" && value.match( rnospaces ) || [], className, i, isBool = typeof stateVal === "boolean"; return this.each(function( el ) { i = 0; if(el.nodeType === 1){ var self = $( el ), state = stateVal; if(type == "string" ){ while ( (className = classNames[ i++ ]) ) { state = isBool ? state : !self.hasClass( className ); self[ state ? "addClass" : "removeClass" ]( className ); } } else if ( type === "undefined" || type === "boolean" ) { if ( el.className ) { $._data( el, "__className__", el.className ); } el.className = el.className || value === false ? "" : $._data( el, "__className__") || ""; } } }); }, //如果匹配元素存在类名old则将其置换为类名neo replaceClass: function( old, neo ){ for ( var i = 0, node; node = this[ i++ ]; ) { if ( node.nodeType === 1 && node.className ) { var arr = node.className.match( rnospaces ), arr2 = []; for ( var j = 0; j < arr.length; j++ ) { arr2.push( arr[j] == old ? neo : arr[j]); } node.className = arr2.join(" "); } } return this; }, val : function( item ) { var el = this[0], getter = valHooks[ "option:get" ]; if ( !arguments.length ) {//读操作 if ( el && el.nodeType == 1 ) { var ret = (valHooks[ getValType(el)+":get" ] || $.propHooks[ "@default:get" ])( el, "value", getter ); return typeof ret === "string" ? ret.replace( rreturn, "" ) : ret == null ? "" : ret; } return void 0; } //我们确保传参为字符串数组或字符串，null/undefined强制转换为"", number变为字符串 if( Array.isArray( item ) ){ item = item.map(function (item) { return item == null ? "" : item + ""; }); }else if( isFinite(item) ){ item += ""; }else{ item = item || ""; } return this.each(function( el ) {//写操作 if ( el.nodeType == 1 ) { (valHooks[ getValType(el)+":set" ] || $.propHooks[ "@default:set" ])( el, "value", item , getter ); } }); } }); var cacheProp = {} function defaultProp(node, prop){ var name = node.tagName+":"+prop; if(name in cacheProp){ return cacheProp[name] } return cacheProp[name] = document.createElement(node.tagName)[prop] } $.mix({ fixDefault: $.noop, propMap:{//属性名映射 "accept-charset": "acceptCharset", "char": "ch", "charoff": "chOff", "class": "className", "for": "htmlFor", "http-equiv": "httpEquiv" }, prop: function(node, name, value){ if($["@bind"] in node){ if(node.nodeType === 1 && !$.isXML( node )){ name = $.propMap[ name.toLowerCase() ] || name; } var access = value === void 0 ? "get" : "set" return ($.propHooks[name+":"+access] || $.propHooks["@default:"+access] )(node, name, value) } }, attr: function(node, name, value){ if($["@bind"] in node){ if ( typeof node.getAttribute === "undefined" ) { return $.prop( node, name, value ); } //这里只剩下元素节点 var noxml = !$.isXML( node ), type = "@w3c", isBool if( noxml ){ name = name.toLowerCase(); var prop = $.propMap[ name ] || name if( !support.attrInnateName ){ type = "@ie" } isBool = typeof node[ prop ] == "boolean" && typeof defaultProp(node,prop) == "boolean"//判定是否为布尔属性 } //移除操作 if(noxml){ if (value === null || value === false && isBool ){ return $.removeAttr(node, name ) } }else if( value === null ) { return node.removeAttribute(name) } //读写操作 var access = value === void 0 ? "get" : "set" if( isBool ){ type = "@bool"; name = prop; } return ( noxml && $.attrHooks[ name+":"+access ] || $.attrHooks[ type +":"+access] )(node, name, value) } }, //只能用于HTML,元素节点的内建不能删除（chrome真的能删除，会引发灾难性后果），使用默认值覆盖 removeProp: function( node, name ) { if(node.nodeType === 1){ if(!support.attrInnateName){ name = $.propMap[ name.toLowerCase() ] || name; } node[name] = defaultProp(node, name) }else{ node[name] = void 0; } }, //只能用于HTML removeAttr: function( node, name ) { if(name && node.nodeType === 1){ name = name.toLowerCase(); if(!support.attrInnateName){ name = $.propMap[ name ] || name; } //小心contentEditable,会把用户编辑的内容清空 if(typeof node[ name ] != "boolean"){ node.setAttribute( name, "") } node.removeAttribute( name ); // 确保bool属性的值为bool if ( node[ name ] === true ) { node[ name ] = false; $.fixDefault(node, name, false) } } }, propHooks:{ "@default:get": function( node, name ){ return node[ name ] }, "@default:set": function(node, name, value){ node[ name ] = value; }, "tabIndex:get": function( node ) { var ret = node.tabIndex; if( ret === 0 ){//在标准浏览器下，不显式设置时，表单元素与链接默认为0，普通元素为-1 ret = rtabindex.test(node.nodeName) ? 0 : -1 } return ret; } }, attrHooks: { "@w3c:get": function( node, name ){ var ret = node.getAttribute( name ) ; return ret == null ? void 0 : ret; }, "@w3c:set": function( node, name, value ){ node.setAttribute( name, "" + value ) }, "@bool:get": function(node, name){ //布尔属性在IE6-8的标签大部字母大写，没有赋值，并且无法通过其他手段获得用户的原始设值 return node[ name ] ? name.toLowerCase() : void 0 }, "@bool:set": function(node, name){ //布尔属性在IE6-8的标签大部字母大写，没有赋值，并且无法通过其他手段获得用户的原始设值 node.setAttribute( name, name.toLowerCase() ) node[ name ] = true; $.fixDefault(node, name, true) } } }); "Attr,Prop".replace($.rword, function( method ){ $.fn[ method.toLowerCase() ] = function( name, value ) { return $.access( this, name, value, $[ method.toLowerCase() ] ); } $.fn[ "remove" + method] = function(name){ return this.each(function() { $["remove" + method]( this, name ); }); } }); //========================propHooks 的相关修正========================== var prop = "accessKey,allowTransparency,bgColor,cellPadding,cellSpacing,codeBase,codeType,colSpan,contentEditable,"+ "dateTime,defaultChecked,defaultSelected,defaultValue,frameBorder,isMap,longDesc,maxLength,marginWidth,marginHeight,"+ "noHref,noResize,noShade,readOnly,rowSpan,tabIndex,useMap,vSpace,valueType,vAlign"; prop.replace($.rword, function(name){ $.propMap[name.toLowerCase()] = name; }); //safari IE9 IE8 我们必须访问上一级元素时,才能获取这个值 if ( !support.optSelected ) { $.propHooks[ "selected:get" ] = function( node ) { for( var p = node;typeof p.selectedIndex != "number";p = p.parentNode){} return node.selected; } } //========================valHooks 的相关修正========================== var valHooks = { "option:get": function( node ) { var val = node.attributes.value; //黑莓手机4.7下val会返回undefined,但我们依然可用node.value取值 return !val || val.specified ? node.value : node.text; }, "select:get": function( node ,value, getter) { var option, options = node.options, index = node.selectedIndex, one = node.type === "select-one" || index < 0, values = one ? null : [], max = one ? index + 1 : options.length, i = index < 0 ? max : one ? index : 0; for ( ; i < max; i++ ) { option = options[ i ]; //旧式IE在reset后不会改变selected，需要改用i === index判定 //我们过滤所有disabled的option元素，但在safari5下，如果设置select为disable，那么其所有孩子都disable //因此当一个元素为disable，需要检测其是否显式设置了disable及其父节点的disable情况 if ( ( option.selected || i === index ) && (support.optDisabled ? !option.disabled : option.getAttribute("disabled") === null) && (!option.parentNode.disabled || !$.type( option.parentNode, "OPTGROUP" )) ) { value = getter( option ); if ( one ) { return value; } //收集所有selected值组成数组返回 values.push( value ); } } return values; }, "select:set": function( node, name, values, getter ) { $.slice(node.options).forEach(function( el ){ el.selected = !!~values.indexOf( getter(el) ); }); if ( !values.length ) { node.selectedIndex = -1; } } } //checkbox的value默认为on，唯有chrome 返回空字符串 if ( !support.checkOn ) { "radio,checkbox".replace( $.rword, function( name ) { valHooks[ name + ":get" ] = function( node ) { return node.getAttribute("value") === null ? "on" : node.value; } }); } //处理单选框，复选框在设值后checked的值 "radio,checkbox".replace( $.rword, function( name ) { valHooks[ name + ":set" ] = function( node, name, value) { if ( Array.isArray( value ) ) { return node.checked = !!~value.indexOf(node.value ) ; } } }); if(typeof $.fixIEAttr == "function"){ $.fixIEAttr(valHooks, $.attrHooks); } return $;}); |
attr_fix模块，里面只有一个补丁函数。
define("attr_fix", !!top.getComputedStyle, ["$node"], function($){ $.fixIEAttr = function(valHooks, attrHooks){ var rnospaces = /\S+/g, rattrs = /\s+([\w-]+)(?:=("[^"]*"|'[^']*'|[^\s>]+))?/g, rquote = /^['"]/, defaults = { checked: "defaultChecked", selected: "defaultSelected" } $.fixDefault = function(node, name, value){ var _default = defaults[name]; if(_default){ node[ _default ] = value; } } if(!("classList" in $.html)){ $.fn.addClass = function( item ){ if ( typeof item == "string") { for ( var i = 0, el; el = this[i++]; ) { if ( el.nodeType === 1 ) { if ( !el.className ) { el.className = item; } else { var a = (el.className+" "+item).match( rnospaces ); a.sort(); for (var j = a.length - 1; j > 0; --j) if (a[j] == a[j - 1]) a.splice(j, 1); el.className = a.join(" "); } } } } return this; } $.fn.removeClass = function( item ) { if ( (item && typeof item === "string") || item === void 0 ) { var classNames = ( item || "" ).match( rnospaces ), cl = classNames.length; for ( var i = 0, node; node = this[ i++ ]; ) { if ( node.nodeType === 1 && node.className ) { if ( item ) {//rnospaces = /\S+/ var set = " " + node.className.match( rnospaces ).join(" ") + " "; for ( var c = 0; c < cl; c++ ) { set = set.replace(" " + classNames[c] + " ", " "); } node.className = set.slice( 1, set.length - 1 ); } else { node.className = ""; } } } } return this; } } attrHooks[ "@ie:get"] = function( node, name ){ var str = node.outerHTML.replace(node.innerHTML, ""), obj = {}, k, v; while (k = rattrs.exec(str)) { //属性值只有双引号与无引号的情况 v = k[2] obj[ k[1].toLowerCase() ] = v ? rquote.test( v ) ? v.slice(1, -1) : v : "" } return obj[ name ]; } attrHooks["@ie:set"] = function( node, name, value ){ var attr = node.getAttributeNode( name ); if ( !attr ) {//不存在就创建一个同名的特性节点 attr = node.ownerDocument.createAttribute( name ); node.setAttributeNode( attr ); } attr.value = value + "" ; } var support = $.support if ( !support.attrInnateValue ) { //在IE6-8如果一个A标签，它里面包含@字符，并且没任何元素节点，那么它里面的文本会变成链接值 $.propHooks[ "href:set" ] = attrHooks[ "href:set" ] = function( node, name, value ) { var b if(node.tagName == "A" && node.innerText.indexOf("@") > 0 && !node.children.length){ b = node.ownerDocument.createElement('b'); b.style.display = 'none'; node.appendChild(b); } node.setAttribute(name, value+""); if (b) { node.removeChild(b); } } } //========================attrHooks 的相关修正========================== if ( !support.attrInnateHref ) { //IE的getAttribute支持第二个参数，可以为 0,1,2,4 //0 是默认；1 区分属性的大小写；2取出源代码中的原字符串值(注，IE67对动态创建的节点没效),4用于取得完整路径 //IE 在取 href 的时候默认拿出来的是绝对路径，加参数2得到我们所需要的相对路径。 "href,src,width,height,colSpan,rowSpan".replace( $.rword, function( method ) { attrHooks[ method.toLowerCase() + ":get" ] = function( node,name ) { var ret = node.getAttribute( name, 2 ); return ret == null ? void 0 : ret; } }); "width,height".replace( $.rword, function( attr ){ attrHooks[attr+":set"] = function(node, name, value){ node.setAttribute( attr, value === "" ? "auto" : value+""); } }); $.propHooks["href:get"] = function( node, name ) { return node.getAttribute( name, 4 ); }; } if(!document.createElement("form").enctype){//如果不支持enctype， 我们需要用encoding来映射 $.propMap.enctype = "encoding"; } if ( !support.attrInnateStyle ) { //IE67是没有style特性（特性的值的类型为文本），只有el.style（CSSStyleDeclaration）(bug) attrHooks[ "style:get" ] = function( node ) { return node.style.cssText.toLowerCase() || undefined ; } attrHooks[ "style:set" ] = function( node, name, value ) { node.style.cssText = value + ""; } } //========================valHooks 的相关修正========================== if(!support.attrInnateName){//IE6-7 button.value错误指向innerText valHooks["button:get"] = attrHooks["@ie:get"] valHooks["button:set"] = attrHooks["@ie:set"] } delete $.fixIEAttr; } return $;}) |
到目前为止，lang, css, event, attr模块都分割完成。它比jQuery分割为jquery1.9与jquery-compat-1.9更细腻，带来的性能提升更好。
顺便庆祝一下，此篇是mass Framework专题博文的第100篇博文！