出位的template.js 基于jquery的模板渲染插件,简单好用
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了出位的template.js 基于jquery的模板渲染插件,简单好用相关的知识,希望对你有一定的参考价值。
找了好几款基于jquery的模板渲染插件,无一感觉很难用(教程较少、绑定不统一),也可能我智商问题,比如jquery template.js 、jtemplate.js。
然后在github上找到这一款,和我在公司之前用的差不多(apicloud云端开发app,致敬【百小僧】大神封装的HUI,简化了在公司很多工作),
这款模板渲染和HUI的很相似,也比较简单 基于jquery的模板渲染插件。
附上github https://github.com/yanhaijing/template.js
特性
- 模版编译,渲染
- 支持所有主流浏览器及Node(UMD)
- javascript原生语法
- 丰富的自定义配置
- 支持数据过滤
- 异常捕获功能
- 功能专一,简单好用
兼容性
- Node 0.10+
- Safari 6+ (Mac)
- ios 5+ Safari
- Chrome 23+ (Windows, Mac, android, iOS, Linux, Chrome OS)
- Firefox 4+ (Windows, Mac, Android, Linux, Firefox OS)
- Internet Explorer 6+ (Windows, Windows Phone)
- Opera 10+ (Windows, linux, Android)
传统用法(其他用法请在github找)https://github.com/yanhaijing/template.js
1、引入 jquery文件与 template.js
<script src="template.js"></script>
2、构建模板
<script id="tpl" type="text/html"> <ul> <!--这里使用了if判断--> <%if(list.length > 0 ){%> <!--这里使用了for循环,看起来和js写法是差不多的,注意占位符--> <%for(var i = 0; i < list.length; i++) {%> <li><%:=list[i].name%></li> <%}%> <%}else{%> <li>没有数据233333~~~ <li> <%}%> <%%> </ul> </script>
3、模板渲染(模板内对象是什么,就传什么。{list:[] } 传一个对象里面有一个list数组 )
<script> //第一种方法 var tpl = document.getElementById(‘tpl‘).innerHTML; var html=template(tpl, {list: [{name: "yan"},{name: "haijing"}]}); console.log(html); //第二种方法 感觉第二种好用些 tpl = template(document.getElementById(‘tpl‘).innerHTML); html = tpl({list: []}); console.log(html); </script>
4、输出
<ul> <li>yan</li> <li>haijing</li> </ul> <ul> <li>没有数据233333~~~</li> </ul>
5、其他用法(定义变量)
<!--这里看起来和js差不多了,简单易懂。--> <%var test = ‘输出自定义变量‘;%>
以上就是这么多了,欢迎指导补充。
for循环、if判断和js差不多,用起来很舒服。
使用模板也是为了减少直接在js中拼接代码,简化开发,代码可读性很好
向这个模板js的开发者的致敬,再次放上github https://github.com/yanhaijing/template.js
以上是关于出位的template.js 基于jquery的模板渲染插件,简单好用的主要内容,如果未能解决你的问题,请参考以下文章