doT js 模板引擎【初探】要优雅不要污
js中拼接html,总是感觉不够优雅,本着要优雅不要污,决定尝试js模板引擎。
JavaScript 模板引擎
JavaScript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注。
常见模板引擎
baiduTemplate(百度)\artTemplate(腾讯)\juicer(淘宝)\doT\ tmpl\ handlebars\ easyTemplate\ underscoretemplate \ mustache \kissytemplate等
为什么选择doT:
doT.js 快速,小巧且毫无依赖,源js文件只有140行。下载地址 github。
兼容性、性能对比详情见,(各种JS模板引擎对比数据(高性能JavaScript模板引擎),我就不在多说了。
开始
1、安装
github下载doT.js,使用页面引用即可。
2、使用
这里就不写基本的使用了,直接上项目中的代码,html部分
<ul class="kucunlist" id="ulList">
<script id="j-tmpl" type="text/template">
{{ if(it.length>0){ }}
{{ for (var i = 0, l = it.length; i < l; i++) {}}
<li class="border-tb tbox" onclick="location.href='<%=basePath%>/query/stock/toQueryProductStock.action?piNo={{=it[i].pi_no}}'">
<div>
<img src="<%=imgServerPath %>{{=it[i].pi_imgpath}}">
</div> <div class="arrow-right">
<h5 class="ellipsis-t"><i>{{=it[i].pi_no}}</i>{{=it[i].pi_name}}</h5>
<p>{{=it[i].ct_name}} {{=it[i].bd_name}}</p>
<p><b>价格:¥{{=it[i].pi_retailprice}}</b> | <b>库存:{{=it[i].amount}}</b></p>
</div>
</li>
{{ } }}
{{ } else { }}
<li class="border-tb tbox">
<h2>未检索到数据</h2>
</li>
{{ } }}
</script>
</ul>
js部分,data为json数据。
var tmpl = document.getElementById('j-tmpl').innerHTML;
document.getElementById('ulList').innerHTML=doT.template(tmpl)(data);
效果
在这个网页输入你的模板、数据可以看到执行结果。
刚开始使用无法给出更多有用的建议,凡事都是双刃剑,也许后面会有坑,但是它给我带来的更好的维护性、可读性。
140行的源码,有需求满足不了或者遇到源码无法解决的问题,可以把源码消化消化,对其进行扩展。
结语:好东西还是要勇敢尝试,已经开始在项目中使用doT,后面会有更复杂的使用环境,会持续对doT在项目中的使用、问题、解决,进行记录。
分享是一种精神,学习仍需坚持,进步仍需努力。
doT js 模板引擎【初探】要优雅不要污的更多相关文章
- doT.js模板引擎及基础原理
时至今日,基于后端JavaScript(Node.js)和MVC思想也开始流行起来.模板引擎是数据和页面分离工作中最重要的一环,在各大门户网站均有利用到模板引擎. 模板引擎有很多种,但是原理了解也是非 ...
- doT.js 模板引擎的使用
dot.js是一个模板框架,在web前端使用. dot.js作为模板引擎, 主要的用途就是,在写好的模板上,放进数据,生成含有数据的html代码. 这是很简单的web前端模板框架, 简单说几个东西,你 ...
- 各种JS模板引擎对比数据(高性能JavaScript模板引擎)
最近做了JS模板引擎测试,拿各个JS模板引擎在不同浏览器上去运行同一程序,下面是模板引擎测试数据:通过测试artTemplate.juicer与doT引擎模板整体性能要有绝对优势: js模板引擎 Ja ...
- js模板引擎
js模板引擎包括如下: template 官方参考:http://aui.github.io/artTemplate BaiduTemplate 官方参考:http://baidufe.github. ...
- 调研js模板引擎
js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTe ...
- js模板引擎介绍搜集
js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTe ...
- 浅析js模板引擎
js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTe ...
- 简易js模板引擎
前面 js 模板引擎有很多很多,我以前经常用 art-template ,有时候也会拿 vue 来当模板引擎用. 直到...... 年初的时候,我还在上个项目组,那时候代码规范是未经允许不能使用 [外 ...
- baiduTemplate.js 百度JS模板引擎
baiduTemplate希望创造一个用户觉得“简单好用”的JS模板引擎 先展示两个例子,然后说说对baidutemplate.js的理解,从而将这一工具加到个人百宝箱里. <script id ...
随机推荐
- PAT甲级 1001. A+B Format (20)
题目原文: Calculate a + b and output the sum in standard format -- that is, the digits must be separated ...
- Atitit.你这些项目不都是模板吗?不是原创 集成和整合的方式大总结
Atitit.你这些项目不都是模板吗?不是原创 集成和整合的方式大总结 1.1. 乔布斯的名言:创新即整合(Creativity is just connecting things).1 1.2. ...
- 如何使用dos命令查看MySQL当前使用的数据库?
1.dos命令安装mysqld --stall.启动net start mysql.进入MySQL数据库mysql -uroot -p后,输入select database(); 如图:
- linux压力测试工具stress
最近给PASS平台添加autoscaling的功能,根据服务器的负载情况autoscaling,为了测试这项功能用到了stress这个压力测试工具,这个工具相当好用了.具体安装方式就不说了.记录下这个 ...
- 如何开发一个Jquery插件
Jquery有两种开发插件的方法: 1.jquery.fn.extend(object); 2.jquery.extend(object); 第一种方法是给Jquery对象添加方法,jquery.fn ...
- 如何用Dockerfile创建镜像
本文原创,原文地址为:http://www.cnblogs.com/fengzheng/p/5181222.html 创建镜像的目的 首先说DockerHub或其它一些镜像仓库已经提供了够多的镜像,有 ...
- APUE中fcntl.h的使用及O_SYNC在Mac与Ubuntu下的测试
此部分测试涉及到APUE V3中,第三章的图3-12到图3-14. 通过fcntl.h提供的功能,修改fd的文件属性,本处增加O_SYNC功能,并测试其效果. 本文涉及代码: tree ch3 ch3 ...
- 再次学习 java 类的编译
做JAVA开发的都知道myeclipse, 我们在myeclipse中新建一个类,然后保存, 如何正常的话,那么在项目指定的目录(也就是项目的output目录)就会生成同名的class文件, 可是,我 ...
- 前端移动App开发环境搭建
移动App开发环境安装 一.环境安装准备软件 二.node的安装 像安装普通软件一样,安装对应版本的node软件,安装好之后就可以运行npm命令行,比如npm init .npm install -g ...
- jquery判断当前浏览器的实现代码
写了一个判断当前浏览器类型及版本的方法,只在IE 8/11 .谷歌 .360 浏览器(不完全)上测试过,需要用到jquery 核心代码: ;(function($, window, document, ...