找了好几款基于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的模板渲染插件的更多相关文章

  1. 移动端下拉刷新、加载更多插件dropload.js(基于jQuery/Zepto)

    移动端下拉刷新.加载更多插件dropload.js(基于jQuery/Zepto) 原文:http://www.grycheng.com/?p=1869 废话不多说,先让大家看一下案例效果: DEMO ...

  2. 源码来袭!!!基于jquery的ajax分页插件(demo+源码)

    前几天打开自己的博客园主页,无意间发现自己的园龄竟然有4年之久了.可是看自己的博客列表却是空空如也,其实之前也有写过,但是一直没发布(然而好像并没有什么卵用).刚开始学习编程时就接触到博客园,且在博客 ...

  3. 一款基于jQuery的QQ表情插件

    我们在QQ聊天或者发表评论.微博时,会有一个允许加入表情的功能,点击表情按钮,会弹出一系列表情小图片,选中某个表情图片即可发表的丰富的含表情的内容.今天和大家分享一款基于jQuery的QQ表情插件,您 ...

  4. 10 个基于 jQuery 的 Web 交互插件推荐

    英文原文:10 jQuery for Web Interaction Plugins “用户交互”在现代的 Web 设计中占据了很大比例,这是互联网产品不可或缺的关键,对 Web 设计师也提出了更高的 ...

  5. 基于jQuery的数字键盘插件

    有时,我们需要在网页上使用软键盘.今天,就给大家带来一个基于jQuery的数字键盘插件,除了jQuery,不需要依赖任何文件资源.纯数字键盘,有退格,有清除,不支持输入小数(需要的可以自己改一下,主要 ...

  6. 基于jquery的城市选择插件

    城市选择插件的难度不是很大,主要是对dom节点的操作.而我写的这个插件相对功能比较简答,没有加入省市联动. 上代码好了,参照代码的注释应该比较好理解. /* *基于jquery的城市选择插件 *aut ...

  7. 基于jQuery全屏相册插件zoomVisualizer

    基于jQuery全屏相册插件zoomVisualizer.这是一款基于jquery ui实现的相册插件,支持隐藏显示相册缩略图,支持左右箭头切换图片,支持放大缩及缩小图片.效果图如下: 在线预览    ...

  8. 基于jQuery开发的手风琴插件 jquery.accordion.js

     1.插件代码 少说多做,基于jQuery的手风琴插件jquery.accordion.js的代码:  /* * 手风琴插件说明: * 1.treeTrunk对应树干 * 2.treeLeaf对应树叶 ...

  9. Dropdown.js基于jQuery开发的轻量级下拉框插件

    Dropdown.js 前言 在SPA(Single Page Application)盛行的时代,jQuery插件的轮子正在减少,由于我厂有需求而开发了这个插件.如果觉得本文对您有帮助,请给个赞,以 ...

随机推荐

  1. Windows上Ruby开发环境的配置

    最近公司项目上有需要,需要开发一个puppet的自动化工具,这个工具需要操作存储设备上的各种资源,而鉴于puppet不是善于完成这个任务的首选语言,于是我们选择了puppet的“爹”,Ruby. 熟悉 ...

  2. javascript 函数和作用域(闭包、作用域)(七)

    一.闭包 JavaScript中允许嵌套函数,允许函数用作数据(可以把函数赋值给变量,存储在对象属性中,存储在数组元素中),并且使用词法作用域,这些因素相互交互,创造了惊人的,强大的闭包效果.[upd ...

  3. SVN常见问题总结一

    注意 转载须保留原文链接(http://www.cnblogs.com/wzhiq896/p/6828776.html  ) 作者:wangwen896 SVN是Subversion的简称,是一个开放 ...

  4. C# Redis学习系列三:Redis配置主从

    Redis配置主从 主IP :端口      192.168.0.103 6666 从IP:端口       192.168.0.108 3333 配置从库 (1)安装服务: redis-server ...

  5. jQuery库冲突解决办法

    一次面试中面试官问到jQuery解决怎么冲突?虽然以前看过,但是我已经不记得了. 我的思路就是如果让我来设计,那我就用一个默认值$,不传参数,那就用$,最后就挂载在window.$上,传参数就用传入名 ...

  6. 简单的记录,VMware Tools的安装

    VMware Tools是VMware虚拟机中自带的一种增强工具,只有在VMware虚拟机中安装好了VMware Tools,才能实现主机与虚拟机之间的文件共享,同时可支持自由“拖拽”的功能来对传文件 ...

  7. 关于XML(可扩展标记语言)的基础知识与写法------2017-05-18

    XML(Extensible Markup Language) HTML:超文本标记语言,主要用来展示   XML:可扩展标记语言,用来做数据传输XML特点: 1.树状结构,有且只有一个根 2.标签名 ...

  8. JDFS:一款分布式文件管理实用程序第一篇(线程池、epoll、上传、下载)

    一 前言 截止目前,笔者在博客园上面已经发表了3篇关于网络下载的文章,这三篇博客实现了基于socket的http多线程远程断点下载实用程序.笔者打算在此基础上开发出一款分布式文件管理实用程序,截止目前 ...

  9. HttpGet和HttpPost

    package net.blogjava.mobile; import java.net.HttpURLConnection; import java.util.ArrayList; import j ...

  10. java虚拟机学习-JVM调优总结-分代垃圾回收详述(9)

    为什么要分代 分代的垃圾回收策略,是基于这样一个事实:不同的对象的生命周期是不一样的.因此,不同生命周期的对象可以采取不同的收集方式,以便提高回收效率. 在Java程序运行的过程中,会产生大量的对象, ...