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