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

转载于:https://www.cnblogs.com/yZDn/p/7062313.html

出位的template.js 基于jquery的模板渲染插件,简单、好用相关推荐

【JS】WTool.js 基于JQuery的工具集 (写着玩的)
[JS]WTool.js 基于JQuery的工具集 (写着玩的) // console.info("加载WTool中...")/*** 威工具1.基于Jquery开发2.参考VU ...
13款基于jQuery Mobile的布局插件和示例
现在已经进入了移动互联网时代,因此将你的网站迁移到移动设备上就显得比较重要的.问题是,如何在移动设备的小屏幕中呈现你的网站中的所有内容呢? 本文介绍13款基于jQuery Mobile的布局插件和示例 ...
php星级评分,jQuery_基于jQuery的星级评分插件，首先看一下运行效果如下图所 - phpStudy...
基于jQuery的星级评分插件首先看一下运行效果如下图所示. 鼠标移到星星上该星星前面的所有星星全部变亮,鼠标单击将记录点击的星星数,前面的所有星星将变亮. 一.原理本程序的原理是这样的:一个&qu ...
源码来袭！！！基于jquery的ajax分页插件（demo+源码）
前几天打开自己的博客园主页,发现自己的园龄竟然有4年之久了,没记错的话刚接触编程就知道了博客园,也就是说我入坑4年了?时光啊~.刚学习编程的时候最喜欢的就是来园子里听大神们吹牛逼,看着他们装逼就觉得很 ...
30个基于jQuery的日期时间选择插件
今天给大家分享30个非常酷的基于jQuery的日期时间选择插件,这是在国外的一个网站看到的,于是就稍作翻译,拿出来与大家分享,英文原文地址:http://www.1stwebdesigner.com/ ...
10 个非常酷的基于jQuery的菜单效果插件
除了直观的界面效果外,炫酷的网站导航菜单或右键菜单也能为访问者带来眼前一亮的感觉.本文为你带来10个非常酷的基于jQuery的菜单效果插件. 1. 右击菜单一个创建右击菜单的插件,简洁且易用. 源 ...
基于jQuery的弹窗小插件
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" ...
jQuery相当于对 javascript二次开发，所以基于 jQuery实现的各种插件直接调用即可...
jQuery相当于对 javascript二次开发,所以基于 jQuery实现的各种插件直接调用即可转载于:https://www.cnblogs.com/npk19195global/p/4482 ...
json vue 对象转数组_vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
本文实例讲述了vue.js基于v-for实现批量渲染 json数组对象列表数据.分享给大家供大家参考,具体如下: vuejs的出现减轻了对dom的直接操作,同时它提供的 v-for 渲染列表数据也给我 ...

出位的template.js 基于jquery的模板渲染插件,简单、好用

兼容性

传统用法(其他用法请在github找)https://github.com/yanhaijing/template.js

出位的template.js 基于jquery的模板渲染插件,简单、好用相关推荐

最新文章

热门文章