Dom Builder - 基于jquery
1 //语法：$.makeDom( json)
2 //参数：JSON格式的对象
3 //返回：jquery格式的dom对象
4 // 2011-02-25 XZH
5
6 $.makeDom = function (d){
7 var parent;
8 var s= function s(d,parent){
9 var c = $( '<'+d.tag+'>' );
10 if(d.cls){c.addClass(d.cls);}
11 if(d.txt){c.text(d.txt);}
12 if(d.nvs){c.attr(d.nvs);}
13 if(!parent){var parent=c;}
14 else{var parent=c.appendTo(parent);}
15 if(d.children){for(var i=0;d.children[i];i++){s(d.children[i],parent);}}
16 return parent;
17 };
18 return s(d);
19 }
参数约定：
{ tag:'标签',cls:'快速样式',txt:'文本内容', nvs:{名:值,名:值} ,children:[ {...} ] }
示例：
1 talkbox = {
2 tag:'div',cls:'talkbox',
3 children:[
4 {
5 tag:'div',cls:'titlebar',
6 children:[
7 {tag:'div',cls:'avatar'},
8 {tag:'div',cls:'ctrlbtns'},
9 {tag:'div',cls:'talktitle'}
10 ]
11 },
12 {tag:'div',cls:'viewmsgarea'},
13 {tag:'div',cls:'toolsbar'},
14 {tag:'textarea',cls:'inputmsgarea',txt:'在此输入消息'},
15 {tag:'input',cls:'sendmsgbutton',namevalue:{type:'button',value:'发送消息'} }
16 ]
17 }
18
19
20 $.makeDom( talkbox )
返回：
[<div class="talkbox">
<div class="titlebar">…</div>
<div class="viewmsgarea"></div>
<div class="toolsbar"></div>
<textarea class="inputmsgarea">在此输入消息</textarea>
<input class="sendmsgbutton">
</div>]
搜索了下，貌似只有prototype的dom builder ；貌似项目的IM用的是JQ的，所以为JQ写了个DOM BIULDER。
效率上考虑，如果要更快的话可以替换掉 操作DOM对象的函数
1.对象创建 $('<'+tpl.tag+'>'),返回一个 jq 格式的dom对象，换成 document.createElement 就行
2.对象添加 $(obj).appendTo(parent) 将obj添加至parent，同时返回obj，这个可能不能直接用原生的 appendChild 方法，得自己去做一个
3.文本创建 $(obj).text( string ) 替换 createTextNode
4.样式添加 $(obj).addClass( string )
5.属性添加 $(obj).attr( json )
