您的位置：首页 > 其它

标签自定义属性,获取和操作的方法封装以及在此基础上对标签原有属性的扩展...

2013-08-11 20:45 786 查看

按照惯例,上代码，并不断完善中.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<script type="text/javascript">
<!--
//封装处理过程
var fzgcFn = function(element){
if(element.isInit) return element;
var attributes = element.attributes;
var map = {};
for(var i=0,len=attributes.length;i<len;i++){
map[attributes[i]['nodeName']] = attributes[i]['nodeValue'];
//闭包处理
(function(element,attribute){
var nodeName = attribute['nodeName'];
var nodeName_ = nodeName.substring(0,1).toUpperCase()+nodeName.substring(1,nodeName.length);
var nodeValue = attribute['nodeValue'];
//set方法---更改两个地方
element['set'+nodeName_] = function(){
nodeValue = arguments[0];
attribute['nodeValue'] = nodeValue;
this[nodeName] = nodeValue;
//return this;//想实现链式~
};
//get方法
element['get'+nodeName_] = function(){
return this[nodeName];
};

})(element,attributes[i]);
}
element['getAttributes'] = function(key){
return map[key];
};
element.isInit = true;
return element;
}
var bindDomAddlistner = function(id,fn,scope){
var obj = document.getElementById(id);
obj.onclick = function(e){
var element = e.target;
element = fzgcFn(element);
var name = element.getAttributes("name");
fn.call(scope||this,e,element,name);
};
return obj;
}

window.onload = function(){
var i = 0;
bindDomAddlistner('myDiv',function(event,element,name){
//console.log(element);
//console.log(element.getAttributes("name"));
//console.log(element.setName('ssss').getName());
//console.log(element.setName('ssss'));
//console.log(element.getName());
if(name=='zyld'){
console.log(element);
console.log(element.checked);
console.log(element.getChecked());
if(i>2){
if(element.getChecked()){element.setChecked(false);};
}
i++;
/* element.setChecked(false);
console.log(element.getChecked());
console.log(element);*/
}

if(name=='link'){
element.setValue(Math.random());
}
if(name=='plfp'){

element.setType("text");
element.onblur = function(e){
var value = element.getValue();
element.setType("button");
element.setValue(value);
}
//disabled
//element.setDisabled(true);
/*this.setTimeOut4Sys(function(interVal,time){
if(time==0){
//element.setDisabled(false);
clearInterval(interVal);
}
},10);*/
}

//innerHTML 这种的大小写的不可...
},this);
}
//-->
</script>
<body>
<div id="myDiv" name="ok" >
<input name="zyld" checked=true type="checkbox" /> <label name="link" innerHTML="">Link~~something</label>
<input name="plfp" type="button" value="Handler my Code." />
disabled="false"
</div>
</body>
</html>

如上，我们可以在获取和操作html原有标签的属性。同时如果该标签属性可以自定义，此时该属性的作用可以是标识的作用。在纯html操作中有一定的作用。

在代码：<input name="plfp" type="button" value="Handler my Code." /> 这块，我们绑定了其在点击和失去焦点时的两个动作，即完成了有时我们对html的控制。其中对element的操作沿用了get/set的编码习惯，使整体操作符合后端程序代码的习惯。

getAttributes方法是将初始时element标签里的现有属性和对应的值维护成一个map，使操作者在获取其属性,特别是自定义属性时更加方便。

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

以上代码中存在一些列的bug，如针对innerHTML这种大小写的属性，在原生attributes中会被自动转换为小写,因此根据处理程序处理的set/get方法分别是：setInnerhtml/getInerhtml,其方法内部的属性则为this.innerhtml 此时调用set方法也无法使其完成与element.innerHtml='Another code'的功能。

（-------------------------周五之前发现的bug.未及时找到解决办法）

今日郑州漂泊大雨+冰雹...

--以下是刚刚淋雨时想到的,嘎嘎.....

我尚未查看其他一些JS框架是如何对dom进行这类封装的。我现在仅仅是猜测：

维护所有dom标签,以及对应的属性(这些东东都是标准,因此绝对可以这么做的)，根据获取的标签类型来初始其相应的get/set方法。理论上这种是可行的，在以上核心处理代码中进行相应的处理优化是可以达到这种效果的~~我就不再亲自试验了，这明显是可行的。针对大小写的属性，专门维护一个对应关系也可以将我先前说的这类bug消除的。

当然即使这么做了也仅仅是雏形，JS框架的搭建结构还是比较重要的，不然ExtJS和Jquery就不会有各自特点了。thinking...........................................

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航