出位的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

posted @ 2017-06-21 23:51  十一一十三  阅读(7346)  评论(2编辑  收藏  举报