[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]
分享到:
相关推荐
SolidWorks小轮子,标准轮子,带轴承,实心橡胶轮,用于手推车
北师大版小学数学二年级数学上册《需要几个轮子》教学反思.docx
iOS 轮播图 小轮子
很多时候,都听人家在说不要重复制造轮子,要站在巨人的肩膀上等....不过让我感到有点困惑的是,怎么样...那是不是说当我们在写一个程序的时候就不应该自己设计,而是首先到网上去找,只有找不到的情况下才自己去写呢?
需要几个轮子_《需要几个轮子》练习四.rar
需要几个轮子_《需要几个轮子》练习四.pdf
需要几个轮子_《需要几个轮子》练习五.pdf
需要几个轮子_《需要几个轮子》练习三.pdf
需要几个轮子_《需要几个轮子》练习八.pdf
需要几个轮子_《需要几个轮子》练习二.pdf
需要几个轮子_《需要几个轮子》练习七.pdf
需要几个轮子_《需要几个轮子》练习一.pdf
Python轮子 非常好用Python轮子 非常好用 Python轮子 非常好用Python轮子 非常好用Python轮子 非常好用Python轮子 非常好用Python轮子 非常好用Python轮子 非常好用
Python 3.9 中下载Dlib包的轮子
需要几个轮子_《需要几个轮子》典型例题二.pdf
需要几个轮子_《需要几个轮子》典型例题一.pdf
自己实现轮子优秀实践
检验学习效果的最好方法就是自己造轮子。最近在学习Vue源码,写了一个迷你版vue,实现数据响应式。从step1到step3.2,是开发步骤和实现思路,每一步都可以独立运行。
香喷喷的轮子.ppt
二年级上册数学练习题-5.4 需要几个轮子|北师大版(2014秋)(无答案).doc