mass Framework attr模块
属性在这里只是一个统称，它对应两个术语attribute与property。attribute是指用户通过setAttribute设置的自定义属性，其值只能是字符串，如果没有显式定义，用getAttribute取值为undefined。property是指元素固有属性，像title, className，tabIndex, src, checked等等。这些属性的值可以是五花八门，如className总是字符串，tabIndex总是数字（它只限表单元素与个别能获取焦点的元素），表单元素的form属性总是指向其外围的表单对象（当然如果它没有放在form标签之内是不存在的）, checked, disabled , defer等属性，如果此元素支持它，总总是返回布尔值。这些固有属性，如果没有显示定义，基本上是返回null（如果className, value则是字符串）。
document.body.className = function(){}
alert(typeof document.body.className )//无法重写，返回"string"
如何处理这些庞杂的属性就是本模块要做的事情。它拥有如下四类方法。
val用于设置获取表单元素的value值，如果是普通元素则内部转交prop方法去处理。
hasClass, addClass, removeClass, toggleClass, replaceClass用于判定，添加， 移除， 切换与替换元素节点的className属性。className是一个特别的属性，它对应由多个类名组成的字符串，因此从prop独立出来区别对待。
attr，removeAttr用于处理元素节点的自定义属性，如果发现对象是window，则转交prop方法处理。
prop，removeProp用于固有属性。在下面给出的JS代码中，给出两份清单，一份是用于属性名映射，如著名的class变成className，for变成htmlFor，rowspan变成rowSpan....另一个是布尔属性，如async，autofocus，checked....它们比jquery源码那份更齐全了。
val, attr, prop 都支配着复数个适配器，确保能取得正确的值。
;
(function(global,DOC){
var dom = global[DOC.URL.replace(/(#.+|\W)/g,'')];
dom.define("attr","node", function(){
var rclass = /(^|\s)(\S+)(?=\s(?:\S+\s)*\2(?:\s|$))/g,
rfocusable = /^(?:button|input|object|select|textarea)$/i,
rclickable = /^a(?:rea)?$/i,
rspaces = /\s+/,
support = dom.support,
nodeAdapter,
valOne = {
"SELECT":"select",
"OPTION":"option",
"BUTTON":"button"
},
getValType = function(node){
return "form" in node && (valOne[node.tagName] || node.type)
}
//Breast Expansion - Kate beim Arzt
dom.implement({
/**
* 为所有匹配的元素节点添加className，添加多个className要用空白隔开
* 如dom("body").addClass("aaa");dom("body").addClass("aaa bbb");
* <a href="http://www.cnblogs.com/rubylouvre/archive/2011/01/27/1946397.html">相关链接</a>
*/
addClass:function(value){
if ( typeof value == "string") {
for ( var i = 0, el; el = this[i++]; ) {
if ( el.nodeType === 1 ) {
if ( !el.className ) {
el.className = value;
} else {
el.className = (el.className +" "+value).replace(rclass,"")
}
}
}
}
return this;
},
//如果第二个参数为true，则只判定第一个是否存在此类名，否则对所有元素进行操作；
hasClass: function( value, every ) {
var method = every === true ? "every" : "some"
var rclass = new RegExp('(\\s|^)'+value+'(\\s|$)');//判定多个元素，正则比indexOf快点
return dom.slice(this)[method](function(el){
return "classList" in el ? el.classList.contains(value):
(el.className || "").match(rclass);
});
},
//如果不传入类名,则去掉所有类名,允许传入多个类名
removeClass: function( value ) {
if ( (value && typeof value === "string") || value === undefined ) {
var classNames = (value || "").split( rspaces );
for ( var i = 0, node; node = this[i++]; ) {
if ( node.nodeType === 1 && node.className ) {
if ( value ) {
var className = (" " + node.className + " ").replace(rspaces, " ");
for ( var c = 0, cl = classNames.length; c < cl; c++ ) {
className = className.replace(" " + classNames[c] + " ", " ");
}
node.className = className.trim();
} else {
node.className = "";
}
}
}
}
return this;
},
//如果存在（不存在）就删除（添加）一个类。对所有匹配元素进行操作。
toggleClass:function(value){
var classNames = value.split(rspaces ), i, className;
var type = typeof value
return this.each(function(el) {
i = 0;
if(el.nodeType === 1){
var self = dom(el);
if(type == "string" ){
while ( (className = classNames[ i++ ]) ) {
self[ self.hasClass( className ) ? "removeClass" : "addClass" ]( className );
}
} else if ( type === "undefined" || type === "boolean" ) {
if ( el.className ) {
self._data( "__className__", el.className );
}
el.className = el.className || value === false ? "" : self.data( "__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.split(rspaces), arr2 = [];
for (var j = 0; j<arr.length; j++) {
arr2.push(arr[j] != old ? arr[j] : neo);
}
node.className = arr2.join(" ");
}
}
return this;
},
val: function( value ) {
var node = this[0], adapter = dom.valAdapter;
if ( !arguments.length ) {//读操作
if ( node && node.nodeType == 1 ) {
//处理select-multiple, select-one,option,button
var ret = (adapter[ getValType(node)+":get" ] || dom.propAdapter[ "_default:get" ])(node, "value");
return ret || ""
}
return undefined;
}
//强制将null/undefined转换为"", number变为字符串
if(Array.isArray(value)){
value = value.map(function (value) {
return value == null ? "" : value + "";
});
}else if(isFinite(value)){
value += "";
}else{
value = value || "";//强制转换为数组
}
return this.each(function(node) {//写操作
if ( node.nodeType == 1 ) {
(adapter[ getValType(node)+":set" ] || dom.propAdapter[ "_default:set" ])(node, "value",value);
}
});
},
removeAttr: function( name ) {
name = dom.attrMap[ name ] || name;
var isBool = boolOne[name];
return this.each(function(node) {
if(node.nodeType === 1){
dom["@remove_attr"]( node, name, isBool );
}
});
},
removeProp: function( name ) {
name = dom.propMap[ name ] || name;
return this.each(function() {
// try/catch handles cases where IE balks (such as removing a property on window)
try {
this[ name ] = undefined;
delete this[ name ];
} catch( e ) {}
});
}
});
dom.extend({
attrMap:{
tabindex: "tabIndex"
},
propMap:{
"accept-charset": "acceptCharset",
"char": "ch",
charoff: "chOff",
"class": "className",
"for": "htmlFor",
"http-equiv": "httpEquiv"
},
//内部函数，原则上拒绝用户的调用
"@remove_attr": function( node, name, isBool ) {
var propName;
name = dom.attrMap[ name ] || name;
//如果支持removeAttribute，则使用removeAttribute
dom.attr( node, name, "" );
node.removeAttribute( name );
// 确保bool属性的值为bool
if ( isBool && (propName = dom.propMap[ name ] || name) in node ) {
node[ propName ] = false;
}
},
attrAdapter: {//最基本的适配器
"_default:get":function(node,name){
var ret = node.getAttribute( name ) ;
return ret === null ? undefined : ret;
},
"_default:set":function(node, name, value){
//注意,属性名不能为数字,在FF下会报错String contains an invalid character" code: "5
node.setAttribute( name, "" + value )
},
"tabIndex:get":function( node ) {
// http://fluidproject.org/blog/2008/01/09/getting-setting-and-removing-tabindex-values-with-javascript/
var attributeNode = node.getAttributeNode( "tabIndex" );
return attributeNode && attributeNode.specified ?
parseInt( attributeNode.value, 10 ) :
rfocusable.test(node.nodeName) || rclickable.test(node.nodeName) && node.href ? 0 : undefined;
}
},
propAdapter:{
"_default:get":function(node,name){
return node[ name ]
},
"_default:set":function(node, name, value){
node[ name ] = value;
},
"value:set":function(node, name, value){
return dom.fn.val.call([node],value) ;
},
"value:get":function(node){
return dom.fn.val.call([node])
}
},
valAdapter: {
"option:get": function( elem ) {
var val = elem.attributes.value;
return !val || val.specified ? elem.value : elem.text;
},
"select:get": function( node ) {
var index = node.selectedIndex, values = [],options = node.options, value;
var one = !node.multiple
if ( index < 0 ) {
return null;
}
for ( var i = one ? index : 0, max = one ? index + 1 : options.length; i < max; i++ ) {
var option = options[ i ];
if ( option.selected ) {
value = option.value || option.text;
if ( one ) {
return value;
}
values.push( value );
}
}
if(one && !value.length && node.length){
return dom(options[index]).val();
}
return values;
},
"select:set": function( node, name,values ) {
dom.lang(node.options).forEach(function(el){
el.selected = values.indexOf(el.value || el.text) >= 0;
});
if ( !values.length ) {
node.selectedIndex = -1;
}
return values;
}
}
});
//attr方法只能用于元素节点，只能写入字符串，只能取得字符串或undefined
//prop方法只能用于原生的事件发送器，能写入除flase,undefined之外的各种数据，如果是bool属性必返回bool值
//attr是用于模拟set/getAttribute操作，用于设置或取得对象的自定义属性
//prop是用于模拟obj[name]操作，用于设置或取得对象的固有属性
"attr,prop".replace(dom.rword,function(method){
dom[method] = function( node, name, value ) {
if(node && (dom["@emitter"] in node || method == "prop")){
if ( !("getAttribute" in node) ) {
method = "prop";
}
var notxml = !node.nodeType || !dom.isXML(node);
//对于HTML元素节点，我们需要对一些属性名进行映射
name = notxml && dom[method+"Map"][ name ] || name;
var adapter = dom[method+"Adapter"];
if(method === "attr" && node.tagName){
//比如input的readonly的取值可以为true false readonly
if(boolOne[name] && (typeof value === "boolean" || value === undefined || value.toLowerCase() === name.toLowerCase())) {
name = dom.propMap[name] || name;
adapter = boolAdapter;
}else if(nodeAdapter ){
adapter = nodeAdapter;
}
}
if ( value !== void 0 ){
if( method === "attr" && value === null){ //移除属性
return dom["@remove_"+method]( node, name );
}else{ //设置属性
return (notxml && adapter[name+":set"] || adapter["_default:set"])( node, name, value );
}
} //获取属性
return (notxml && adapter[name+":get"] || adapter["_default:get"])( node, name );
}
};
dom.fn[method] = function( name, value ) {
return dom.access( this, name, value, dom[method], dom[method]);
}
});
//========================propAdapter 的相关补充==========================
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(dom.rword, function(name){
dom.propMap[name.toLowerCase()] = name;
});
//safari IE9 IE8 我们必须访问上一级元素时,才能获取这个值
if ( !support.attrSelected ) {
dom.propAdapter[ "selected:get" ] = function( parent ) {
var node = parent
for(var i= -3;i++; parent.selectedIndex, parent = parent.parentNode){};
return node.selected;
}
}
//========================attrAdapter 的相关补充==========================
if ( !support.attrHref ) {
//IE的getAttribute支持第二个参数，可以为 0,1,2,4
//0 是默认；1 区分属性的大小写；2取出源代码中的原字符串值(注，IE67对动态创建的节点没效)。
//IE 在取 href 的时候默认拿出来的是绝对路径，加参数2得到我们所需要的相对路径。
"href,src,width,height,colSpan,rowSpan".replace(dom.rword,function(method ) {
dom.attrAdapter[ method + ":get" ] = function( node,name ) {
var ret = node.getAttribute( name, 2);
return ret === null ? undefined : ret;
}
});
}
//IE67是没有style特性（特性的值的类型为文本），只有el.style（CSSStyleDeclaration）(bug)
if ( !support.attrStyle ) {
dom.attrAdapter[ "style:get" ] = function( node ) {
return node.style.cssText.toLowerCase();
}
dom.attrAdapter[ "style:set" ] = function( node, value ) {
return (node.style.cssText = "" + value);
}
}
//=========================valAdapter 的相关补充==========================
//checkbox的value默认为on，唯有Chrome 返回空字符串
if ( !support.checkOn ) {
"radio,checkbox".replace(dom.rword,function(name) {
dom.valAdapter[ name + ":get" ] = function( node ) {
return node.getAttribute("value") === null ? "on" : node.value;
}
});
}
//处理单选框，复选框在设值后checked的值
"radio,checkbox".replace(dom.rword,function(name) {
dom.valAdapter[ name + ":set" ] = function( node, name, value) {
if ( Array.isArray( value ) ) {
return node.checked = !!~value.indexOf(node.value ) ;
}
}
});
//=========================nodeAdapter 的相关补充=========================
//如果我们不能通过el.getAttribute("class")取得className,必须使用el.getAttribute("className")
if(!support.attrProp){
dom.attrMap = dom.propMap;
var fixSpecified = dom.oneObject("name,id")
//注意formElement[name] 相等于formElement.elements[name]，会返回其辖下的表单元素
nodeAdapter = dom.mix({
"_default:get": function( node, name ) {
var ret = node.getAttributeNode( name );
return ret && (fixSpecified[ name ] ? ret.nodeValue !== "" : ret.specified) ? ret.nodeValue : undefined;
},
"_default:set": function( node, name, value ) {
var ret = node.getAttributeNode( name );
if ( !ret ) {
ret = node.ownerDocument.createAttribute( name );
node.setAttributeNode( ret );
}
return (ret.nodeValue = value + "");
}
},dom.attrAdapter,false);
"width,height".replace(dom.rword,function(attr){
nodeAdapter[attr+":set"] = function(node, name, value){
node.setAttribute( attr, value === "" ? "auto" : value+"");
}
});
dom.valAdapter["button:get"] = nodeAdapter["_default:get"];
dom.valAdapter["button:set"] = nodeAdapter["_default:set"];
}
//=========================boolAdapter 的相关补充=========================
var boolAdapter = dom.mix({},dom.attrAdapter,false);
var bools = "async,autofocus,checked,declare,disabled,defer,defaultChecked,contentEditable,ismap,loop,multiple,noshade,noresize,readOnly,selected"
var boolOne = dom.oneObject( support.attrProp ? bools.toLowerCase() : bools );
bools.replace(dom.rword,function(method) {
//bool属性在attr方法中只会返回与属性同名的值或undefined
boolAdapter[method+":get"] = function(node,name){
var attrNode;
return dom.prop( node, name ) === true || ( attrNode = node.getAttributeNode( name ) ) && attrNode.nodeValue !== false ?
name.toLowerCase() :
undefined;
}
boolAdapter[method+":set"] = function(node,name,value){
if ( value === false ) {//如果设置为false,直接移除,如设置input的readOnly为false时,相当于没有只读限制
dom["@remove_attr"]( node, name, true );
} else {
if ( name in node ) {
node[ name ] = true;
}
node.setAttribute( name, name.toLowerCase() );
}
return name;
}
});
});
})(this, this.document);
/*
2011.8.2
将prop从attr分离出来
添加replaceClass方法
2011.8.5
重构val方法
2011.8.12
重构replaceClass方法
2011.10.11
重构attr prop方法
**/