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

最新推荐文章于 2020-10-23 11:32:15 发布

小韩工作室

最新推荐文章于 2020-10-23 11:32:15 发布

阅读量1.6k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/haw_king/article/details/9904297

版权

javascript 专栏收录该内容

59 篇文章 0 订阅

订阅专栏

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

<!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...........................................

小韩工作室

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
标签自定义属性,获取和操作的方法封装以及在此基础上对标签原有属性的扩展...

按照惯例,上代码，并不断完善中. New Document <!-- //封装处理过程 var fzgcFn = function(element){ if(element.isInit) return element; var attributes = element.attributes; v
复制链接

扫一扫