Javascript 通過json自動產生Dom的代碼

json轉html 三重奏
原料:json 複製代碼 代碼如下:var json={
'div':{id:'flower',className:"a1",sub:[
{
'ul':{id:'flower1',className:["a2","a3"],sub:[
{'li':{num:3,con:"內容內容內容",fn:{'click':function(){alert('我是LiLi')}}}}
]}
},
{
'ul':{id:'flower4',className:["a2","a3"],sub:[
{'li':{num:3,con:"第2輪了",fn:{'click':function(){alert('我是LiLi')}}}}
]}
},
{
'span':{id:'q',con:"我是span"}
}
]}
}

id=id
className=class
num=迴圈次數
fn=綁定函數
con=元素內容
sub =代表有子節點
主菜:method 複製代碼 代碼如下:JsonToHtml={
init:function(data,parent){//jsonDB,父元素
for(var attr in data){
if(data[attr]["id"]){var num=1}else{var num=data[attr]["num"]||1}//如果存在id,則迴圈預設為1,因為id不可重複
for(var j=0;j<num;j++){
var obj= document.createElement(attr);
parent ? parent.appendChild(obj) : document.body.appendChild(obj);//遞迴時傳入父元素,沒有則預設從body輸出
for(var attr2 in data[attr]){
var _tempAttr=data[attr][attr2];
switch(attr2){
case "id":
obj.id=_tempAttr;
break;
case "className": //支援多個class傳入~簡了點~
if(_tempAttr.length && _tempAttr.pop){
for(var k=0;k<_tempAttr.length;++k){
obj.className= obj.className+" "+_tempAttr[k] ;
}
}else{ obj.className =_tempAttr;}
break;
case "sub": //如果有子節點則開始遞迴
for(var i=0;i<_tempAttr.length;i++){
_tempAttr[i].sub ? this.init(_tempAttr[i]) : this.init(_tempAttr[i],obj)
}
break;
case "con"://設定內容,可以產生新的子項目
obj.innerHTML=_tempAttr;
break;
case "num":
break;
case "fn"://Binder 方法
for(var fns in _tempAttr){
if (window.addEventListener) {
obj.addEventListener(fns, _tempAttr[fns], false);
} else {
if (window.attachEvent) {
obj.attachEvent("on" + fns, _tempAttr[fns]);
}
}
}
break;
default : //設定屬性
obj.setAttribute(attr2,_tempAttr);break;
}
}
}
}
return this;
}
}

JsonToHtml.init(json); //初始化
上菜 複製代碼 代碼如下:<div id="flower" class="a1">
<ul id="flower1" class="a2 a3">
<li>內容內容內容</li>
<li>內容內容內容</li>
<li>內容內容內容</li>
</ul>
　　<ul id="flower4" class="a2 a3">
<li>第2輪了</li>
<li>第2輪了</li>
<li>第2輪了</li>
</ul>
　　<span id="q">我是span</span>
<div>

主要還是通過遞迴和迭代來遍曆json成員產生html元素 ,比較好的是num能制定迴圈次數可以少寫很多代碼.具體應用看情境了
這隻是個小例子，期待後續!