標籤自定義屬性,獲取和操作的方法封裝以及在此基礎上對標籤原有屬性的擴充套件...
<!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...........................................