顺手写了个小轮子

[size=large]周末在家里写程序，要用js将json格式的数据{name:'游戏1',url:'http://www.zaobao.com',imgUrl:'img/confirm.gif'},转化成以下html

<li>
	<a href="http://www.zaobao.com">
		<img src="img/confirm.gif">
		<span>游戏1</span>
	</a>
</li>

用dom实现

var li = document.createElement("li")
var a = document.createElement("a");
a.href = pojo.url;
var img = document.createElement("img");
img.src = pojo.imgUrl;
var span = document.createElement("span");
span.innerHTML = pojo.name;
a.appendChild(img);
a.appendChild(span);
li.appendChild(a);
return li;

尼玛啊，才4个标签，代码居然需要11行。是可忍，叔叔也不可忍。用拼凑html的方法，虽然代码简单一点，但是html复杂了，也很难维护。
想写个类简化一下。思路是搞个html dsl（面向领域的语言）出来。于是写了个tag类，刚才那段代码就变成了

var li = new Tag("li");  //构建一个li标签
var a = li.a().attr("href",pojo.url); //在li中方一个a标签 ，href是pojo的url
a.img().attr("src",pojo.imgUrl); //在a标签中放img
a.span(pojo.name); //在a标签中放span
return li.toDom(); //返回li标签的dom对象

定义一个div就可以这样写

var tag = new Tag("div");
tag.html("google");
tag.style("color","red")
document.getElementById("d1").innerHTML = tag.toHtml();

定义ul下有3个li

var ul = new Tag("ul");
ul.li('aaa');
ul.li(2).style('color','red');
ul.li(3);
document.getElementById("d2").innerHTML = ul.toHtml();

document.getElementById("d3").appendChild(ul.toDom());

定义一个5行的table变成了

var table = new Tag("table");
for(var i=1;i<5;i++){
	var tr = table.tr();
	tr._td(1+i)
		._td(2+i+"a")
		._td(3+i)
		._td(4+i)
		._td(5+i);
}
document.getElementById("d6").innerHTML = table.toHtml();
document.getElementById("d7").appendChild(table.toDom());

写完以后，自我感觉十分良好，比从头构建dom或者拼html强多了。唯一不知道的是这个小轮子前人有没有写过？
代码见附件


[/size]

评论

1 楼 习惯在马桶上思考 2012-05-14  

妙