Graent.Hu 的博客

新浪微薄腾讯微薄

最新碎语:最近感觉有些迷茫,怎么办~

您的位置:Graent.Hu 的博客 >素材下载> 一个javascript模板渲染组件,laytpl

一个javascript模板渲染组件,laytpl

    laytpl是一款颠覆性的JavaScript模板引擎,巧妙的实现方式,自身的体积变得小巧玲珑,不仅性能接近极致,并且还具备传统js引擎的几乎所有功能。而值得一提的是他的大小不到2KB,轻巧好用:

    当然据官方说,laytpl已经并入layui前端框架,后期是否继续单独的维护还未可知,不过个人觉得这个不影响具体的使用,现在仍然可以下载下来使用(文字结束的地方有附件可以下载)。


    对于使用方法,就很简单了,下面做一个简单的介绍:

1,引入资源

<script type="text/javascript" src="layer.js"></script>


2,创建渲染模板

<script id="qs-tpl" type="text/html">
<h3>{{ d.title }}</h3>
<p class="intro">{{ d.intro }}</p>
<ul>
{{# for(var i = 0, len = d.list.length; i < len; i++){ }}
  <li>
    <span>{{ d.list[i].name }}</span>
    <span>所在城市:{{ d.list[i].city }}</span>
  </li>
{{# } }}
{{# if(d.list.length === 0) }}
    暂无数据
{{# } }}
</ul>
</script>


3,获取数据并渲染

//假设你得到了这么一段数据
var data = {
  title: '前端圈',
  intro: '一群码js的骚年,幻想改变世界,却被世界改变。',
  list: [{name: '贤心', city: '杭州'},  {name: '谢亮', city: '北京'}, {name: '浅浅', city: '杭州'}, {name: 'Dem', city: '北京'}]
};

var tpl = document.getElementById('tpl').innerHTML; //读取模版
//方式一:异步渲染(推荐)
laytpl(tpl).render(data, function(render){
  document.getElementById('view').innerHTML = render;
});

//方式二:同步渲染:
var render = laytpl(tpl).render(data);
document.getElementById('view').innerHTML = render;


完成上面的处理就可以完成了,是不是很简单?需要一说的是,因为笔者测试使用的时候是在tp里面用的,使用3.2的ajaxreturn返回数据,model获取数据库的数据,如果没有数据的时候,需要做一下判断是否为null因为当没有数据的时候model会返回null这样laytpl处理的时候会出现错误,所以这里可以在返回null的时候加一个判断如果返回的是null那么ajaxReturn的时候返回一个空的数组,例如:


if($rs){
    $this->ajaxReturn($rs);
}else{
    $this->ajaxReturn([]);
}



对于性能方面官方做了一些对比测试,下面是一部分的截图,大家可以做一下参考:

QQ截图20161020090937.png
QQ图片20161020090814.png

总体看来性能确实很不错的奥,哈哈 下载来用一下看看吧

下载laytpl模板渲染组件:laytpl-v1.1.zip(点击下载)

我的微信:graent_hu

欢迎扫码加我和微信好友,有什么问题我们可以一起探讨,有什么需要也随时欢迎发消息给我~

转载请注明出处:

本文标题:一个javascript模板渲染组件,laytpl

本文链接:https://www.wlyc.cn/post-52.html

发表评论

路人甲 表情
看不清楚?点图切换

网友评论(10)

技术类博客,确实是干货啊。
28兼职网 3年前 (2016-10-27) 回复
@28兼职网:感谢来访,相互学习~
9ra3nt 3年前 (2016-10-27) 回复
性能表现很强啊,应该接近极限了
西狂 3年前 (2016-10-26) 回复
@西狂:是的,用的时候确实也觉得很好用
9ra3nt 3年前 (2016-10-26) 回复
很好,不错
商商博客 3年前 (2016-10-26) 回复
@商商博客:我也觉得不错
9ra3nt 3年前 (2016-10-26) 回复
来看看
网赚助手 3年前 (2016-10-24) 回复
@网赚助手:欢迎欢迎~
9ra3nt 3年前 (2016-10-25) 回复
学习了,整理的不错!
SEO网站优化 3年前 (2016-10-21) 回复
@SEO网站优化:感谢来访~
9ra3nt 3年前 (2016-10-21) 回复