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 ) {
                //http://www.cnblogs.com/rubylouvre/archive/2009/12/07/1618182.html
                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 ) {
            // http://gabriel.nagmay.com/2008/11/javascript-href-bug-in-ie/
            //在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 ) {
            //http://msdn.microsoft.com/en-us/library/ms536429%28VS.85%29.aspx
            //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篇博文！