俗话说,分久必合,合久必分
什么东西都阻挡不了大势,俗话说,大势所趋就是这个道理
在多终端的环境下,以前让服务端比如php那些煞笔在页面上直接输出数据的年代早就过去啦,
什么?你们还这样做?
那就有人要问了,那现在流行什么呢?请容我细细道来
那就是数据和前端绝对的分开,服务器只负责提供 一串json数据,至于数据怎么展示,就交给前端啦,所以一个接口可以满足web,ios,android,等各种需求
哎呦,需求很强烈呀!
对于网页前端的我们,以前的那些遍历数据的操作就全部到我们手里了
所以各种
$("#xxx").val()
$("#xxx").html()
$("#xxx").attr()
就出现了,一个一个写,好烦啊
甚至还有数组,我们要这样
for(var i=0;i<len;i++) {
$("<p>"+xx+"eee"+""+"</p>").apendTo(xxxx)
}
怎么办呢?能不能我只要写好一些属性,你就我自动给生成呢?
比如
<span data-name></span>
自动把json的里的name给塞进去,多舒服
下面楼主就给大家写一个插件
啥叫插件?就是插进去的一件东西。。。
有朋友说了?噢。。。那我也有。。。
jrender
一个基于jQuery的json数据快速展示系统
用法
html代码
<div class="info">
<span render-html="weather"></span>
<ul render-loop="seven_days">
<li render-html="seven_days.weather"></li>
</ul>
</div>
html代码
var data = {
weather:'晴',
seven_days:[
{
weather:'阴'
},
{
weather:'雾霾'
},
{
weather:'小雨'
}
]
};
$(".info").renderValues(data);
说明
1.所有的数据展示都是在某一个标签内 比如
<span render-html="username"></span>
循环类型的只循环,子元素的第一个元素,所以尽量套一个div进去
<div render-loop="seven_days">
<div>
<span render-html="seven_days.temperature"></span>
<span render-html="seven_days.weather"></span>
</div>
</div>
错误的写法
<div render-loop="seven_days">
<span render-html="seven_days.temperature"></span>
<span render-html="seven_days.weather"></span>
</div>
2.可以render的类型有如下一个
render-html, render-src, render-value, render-href, render-loop, render-attr(这个类型自定义属性例子:render-attr="userid=uid")
代码地址当然要在github上拉
https://github.com/suxianbaozi/jrender
ok就到这里,大家去试试吧