[size=large]周末在家里写程序,要用js将json格式的数据{name:'游戏1',url:'http://www.zaobao.com',imgUrl:'img/confirm.gif'},转化成以下html
用dom实现
尼玛啊,才4个标签,代码居然需要11行。是可忍,叔叔也不可忍。用拼凑html的方法,虽然代码简单一点,但是html复杂了,也很难维护。
想写个类简化一下。思路是搞个html dsl(面向领域的语言)出来。于是写了个tag类,刚才那段代码就变成了
定义一个div就可以这样写
定义ul下有3个li
定义一个5行的table变成了
写完以后,自我感觉十分良好,比从头构建dom或者拼html强多了。唯一不知道的是这个小轮子前人有没有写过?
代码见附件
[/size]
<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]