[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
妙