JavaScript は json_json を通じて Dom コードを自動的に生成します

json to HTML trio
原材料: json

コードをコピー コードは次のとおりです:

var json ={
'div':{id:'flower',className:"a1",sub:[
{
'ul':{id:'flower1',className:[ "a2", "a3"],sub:[
{'li':{num:3,con:"コンテンツ コンテンツ content",fn:{'click':function(){alert('私は LiLi ')}} }}
]}
},
{
'ul':{id:'flower4',className:["a2","a3"],sub:[
{' li':{num:3,con:"第 2 ラウンド",fn:{'click':function(){alert('I am LiLi')}}}}
]}
},
{
'span':{id:'q',con:"私はスパンです"}
}
]}
}

id= id
className=class
num=ループ数
fn=binding function
con=要素の内容
sub = 子ノードを表します
メインディッシュ:メソッド

コードをコピー コードは次のとおりです:

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 が存在する場合、id を繰り返すことができないため、ループのデフォルトは 1 になります。
for(var j=0;jvar obj= document.createElement(attr);
parent ?parent.appendChild(obj) : document.body.appendChild(obj);//再帰する場合は、親要素を渡します。そうでない場合は、本文から出力されます。デフォルト
for(var attr2 in data[attr]){
var _tempAttr=data[attr][attr2];
switch(attr2){
case "id":
obj。 id=_tempAttr;
break;
case "className ": // 複数のクラスを渡すことをサポートします~
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"://binding method
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 ;
}
}
}
}
これを返します;


JsonToHtml.init(json);

サービス中

コードをコピー コードは次のとおりです:

• コンテンツコンテンツ
コンテンツ コンテンツ コンテンツ

• コンテンツ コンテンツ コンテンツ
  

🎜>

第 2 ラウンド

第 2 ラウンド
🎜>


主に再帰と反復を通じてJSONメンバーを走査してHTML要素を生成しますより良い点は、num でループの数を指定でき、記述量が少なくなることです。具体的なアプリケーションはシナリオによって異なります。
これは単なる例です。続報を楽しみにしています。