JavaScript模板引擎实例应用
在之前的一篇名为《移动端基于HTML模板和JSON数据的JavaScript交互》的文章中,我向大家说明了为什么要使用JavaScript模板以及如何使用,文末还提到了laytpl、artTemplate、doT、baiduTemplate、kissyTemplate等模板引擎。
本文将举实例向大家讲解几个常用模板引擎的简单使用。
演示地址:
模板引擎示例
http://me.52fhy.com/demo/jstemp/
准备工作
演示数据:blog.json
结构:
{
"list": [
{
"title": "这是title",
"url": "http://www.cnblogs.com/52fhy/p/5271447.html",
"desc": "摘要"
},
{
"title": "这是title2",
"url": "http://www.cnblogs.com/52fhy/p/4823390.html",
"desc": "摘要"
}]
}
html页面:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>demo</title>
<!--weui.css仅为快速的做出页面,可删除-->
<link rel="stylesheet" href="static/weui.css"/>
<script src="static/zepto.min.js"></script>
</head>
<body>
<div class="weui_panel weui_panel_access">
<!--内容展示区:实际演示将会去掉,使用js动态生成-->
<div class="weui_panel_hd">文字组合列表</div>
<div class="weui_panel_bd">
<div class="weui_media_box weui_media_text">
<h4 class="weui_media_title">标题一</h4>
<p class="weui_media_desc">由各种物质组成的巨型球状天体,叫做星球。星球有一定的形状,有自己的运行轨道。</p>
</div>
</div>
<!--/内容展示区-->
</div>
<script type="text/javascript">
$(function(){
$.ajax({
url: 'static/blog.json',
type: 'get',
dataType: 'json',
success: function (response) {
//后文主要改动的地方之一
//这里暂时为空
},
error: function (jqXHR, textStatus, errorThrown) {
if (textStatus == 'timeout') {
alert('请求超时');
return false;
}
console.log(jqXHR.responseText);
},
});
});
</script>
</body>
下文将讲解使用ajax获取数据并显示到页面的『内容展示区』。
不使用模板
这种方式是大家见过或者使用最多的了:
模板
无需模板。
js代码
在success里面加上代码:
var htmlList = '';
var data = response.list;
$.each(data, function(i,el) {
htmlList +='<div class="weui_media_box weui_media_text">'+
'<a href="'+ el.url +'" target="_blank"><h4 class="weui_media_title">'+ el.title +'</h4></a>'+
'<p class="weui_media_desc">'+ el.desc +'</p>'+
'</div>';
});
$('.js-blog-list').empty().append(htmlList);
代码里明显看到一大堆的拼接符号,显得不是很优雅,不方便后期维护。
简单的模板引擎
这里不需要引入第三方模板引擎插件,自己写一个:
/*
* 实现简单模板渲染功能 不支持对象嵌套
* 不支持if等语句
*/
String.prototype.temp = function(obj) {
return this.replace(/\$\w+\$/gi, function(matchs) {
var returns = obj[matchs.replace(/\$/g, "")];
return (returns + "") == "undefined"? "": returns;
});
};
记得放到页面的js代码里。
模板
<!--模板-->
<textarea class="js-tmp" style="display:none;">
<div class="weui_media_box weui_media_text">
<a href="$url$" class="" target="_blank">
<h4 class="weui_media_title">$title$</h4>
</a>
<p class="weui_media_desc">$desc$</p>
</div>
</textarea>
<!--/模板-->
变量使用$$
占位。
这里的模板放在 <textarea>
中,一般情况设置其CSS样式display:none
来隐藏掉textarea。
还有一种方式是模板放在 <script>
中,设置type属性为text/template
或text/html
,用id标识:
<script id='test1' type="text/template">
<!-- 模板部分 -->
<!-- 模板结束 -->
</script>
大家喜欢哪种就使用哪种。
js代码
var htmlList = '';
var data = response.list;
var htmlTemp = $("textarea.js-tmp").val(); //读取模板内容
$.each(data, function(i,el) {
htmlList += htmlTemp.temp(el); //模板渲染并生成最终内容
});
$('.js-blog-list').empty().append(htmlList);
代码量并不多,比较简单。注意temp
方法来源于String.prototype.temp
。
laytpl
上一篇文章也介绍过这个模板引擎,这里不多介绍,大家可以去其官网看详细信息。
简介:
laytpl官网 - 精妙的JavaScript模板引擎 http://laytpl.layui.com/
支持if等语句{{# if(){ //some code ... }} {{# } }}
模版语法:
输出一个普通字段,不转义html: {{ d.field }}
输出一个普通字段,并转义html: {{= d.field }}
JavaScript脚本: {{# JavaScript statement }}
使用前需要引入laytpl.js
:
<script src="laytpl/laytpl.js"></script>
模板
<!--模板-->
<textarea class="js-tmp" style="display:none;">
<div class="weui_media_box weui_media_text">
<a href="{{d.url}}" class="" target="_blank">
<h4 class="weui_media_title">{{d.title}}</h4>
</a>
<p class="weui_media_desc">{{d.desc}}</p>
</div>
</textarea>
<!--/模板-->
laytpl模板引擎使用{{d.变量}}
表示变量。注意不要忘记了前缀d.
,任何情况都要加上。这也算是模板的一大特色。
js代码
js代码很简单,这里不全部复制过来了,仅显示与简单的模板引擎
有区别的:
$.each(data, function(i,el) {
//htmlList += htmlTemp.temp(el);
htmlList += laytpl(htmlTemp).render(el);//模板渲染并生成最终内容
});
很简单吧!注释的那一行是简单的模板引擎
所用的代码,这里进行对比。这里不多做解释。
underscore
underscore是个js工具库,其种_.underscore()
方法支持模板功能。
简介:
Underscore.js(1.8.3)
中文文档 http://www.css88.com/doc/underscore/
template_.template(templateString, [settings])
将 JavaScript 模板编译为可以用于页面呈现的函数, 对于通过JSON数据源生成复杂的HTML并呈现出来的操作非常有用。
模板函数可以使用 <%= … %>插入变量, 也可以用<% … %>执行任意的 JavaScript 代码。 如果您希望插入一个值, 并让其进行HTML转义,请使用<%- … %>。 当你要给模板函数赋值的时候,可以传递一个含有与模板对应属性的data对象 。
如果您要写一个一次性的, 您可以传对象 data 作为第二个参数给模板 template 来直接呈现, 这样页面会立即呈现而不是返回一个模板函数。
使用前需要引入underscore-min.js
。
模板
<!--模板-->
<textarea class="js-tmp" style="display:none;">
<div class="weui_media_box weui_media_text">
<a href="<%= url %>" class="" target="_blank">
<h4 class="weui_media_title"><%= title %></h4>
</a>
<p class="weui_media_desc"><%= desc %></p>
</div>
</textarea>
<!--/模板-->
underscore使用<%= 变量 %>
进行表示。
js代码
这里同样仅展示与上例不一样的地方:
$.each(data, function(i,el) {
//可以这样:
//var compiled = _.template(htmlTemp);
//htmlList += compiled(el);
/*或者*/
htmlList += _.template(htmlTemp)(el);
});
使用方法其实很相似。
artTemplate
这个还是比较有名的。
简介:
artTemplate-3.0 新一代 javascript 模板引擎
https://github.com/aui/artTemplate
template.js (简洁语法版, 2.7kb)
支持if等语句{{ if admin }} {{/if}}
template(id, data)
根据 id 渲染模板。内部会根据document.getElementById(id)查找模板。
如果没有 data 参数,那么将返回一渲染函数。
性能卓越,执行速度通常是 Mustache 与 tmpl 的 20 多倍(性能测试)
支持运行时调试,可精确定位异常模板所在语句(演示)
对 NodeJS Express 友好支持
安全,默认对输出进行转义、在沙箱中运行编译后的代码(Node版本可以安全执行用户上传的模板)
支持include语句
可在浏览器端实现按路径加载模板(详情)
支持预编译,可将模板转换成为非常精简的 js 文件
模板语句简洁,无需前缀引用数据,有简洁版本与原生语法版本可选
支持所有流行的浏览器
artTemplate区分简洁语法版
和原生语法版
。这里先演示简洁语法版
。
使用前同样先引入artTemplate.js
:
<script src="artTemplate/template.js"></script>
模板
<!--模板-->
<script id="js-tmp" type="text/html">
<div class="weui_media_box weui_media_text">
<a href="{{ url }}" class="" target="_blank">
<h4 class="weui_media_title">{{ title }}</h4>
</a>
<p class="weui_media_desc">{{ desc }}</p>
</div>
</script>
<!--/模板-->
注意这里模板与前面的示例不一样了,直接使用一个type="text/html"
的script标签存放模板。artTemplate不支持textarea
标签。
模板里变量使用{{ 变量 }}
占位。
js代码
/本例不再需要手动取模板内容
//var htmlTemp = $("textarea.js-tmp").val();
$.each(data, function(i,el) {
htmlList += template("js-tmp", el); //注意第一个参数是id
});
artTemplate使用基于document.getElementById(id)
的方式直接获取模板内容。这一点与其它模板有点不同,需要注意。
下面再看看artTemplate原生语法版
。
需要引入替换成:
<script src="artTemplate/template-native.js"></script>
模板
<!--模板-->
<script id="js-tmp" type="text/html">
<div class="weui_media_box weui_media_text">
<a href="<%= url %>" class="" target="_blank">
<h4 class="weui_media_title"><%= title %></h4>
</a>
<p class="weui_media_desc"><%= desc %></p>
</div>
</script>
<!--/模板-->
原生语法版
的artTemplate模板也不一样,使用<%= 变量 %>
的方式表示变量。
js代码
无需改动,和上面简洁语法版
是一样的。
BaiduTemplate
宣称『最简单好用的JS模板引擎,JS语法学习无成本』 。
简介:
百度JS模板引擎 baiduTemplate 1.0.6 版 http://tangram.baidu.com/BaiduTemplate/
https://github.com/wangxiao/BaiduTemplate
//方法一:直接传入data,返回编译后的HTML片段
var html0 = baidu.template(tpl,data);
//或直接传入id即可
var html0 = baidu.template('test1',data);
支持if等语句<% if(admin) %> <%}%>
使用前引入:
<script src="BaiduTemplate/baiduTemplate.js"></script>
模板
<!--模板-->
<textarea class="js-tmp" id="js-tmp" style="display:none;">
<div class="weui_media_box weui_media_text">
<a href="<%= url %>" class="" target="_blank">
<h4 class="weui_media_title"><%= title %></h4>
</a>
<p class="weui_media_desc"><%= desc %></p>
</div>
</textarea>
<!--/模板-->
使用<%= 变量 %>
的方式表示变量。
js代码
var htmlTemp = $("textarea.js-tmp").val();
$.each(data, function(i,el) {
//htmlList += baidu.template(htmlTemp,el);
//或者通过ID直接得到模板内容:
htmlList += baidu.template("js-tmp",el);
});
使用很灵活,值得一试。
doT
文档是英文的,且不是很详细。但想想用法也是差不多的。
简介:
doT.js https://github.com/olado/doT
olado/doT: The fastest + concise javascript template engine for nodejs and browsers. Partials, custom delimiters and more.
用法类似underscore的_.template
引入doT.min.js:
<script src="dot/doT.min.js"></script>
模板
<!--模板 : 需要加对象前缀it-->
<textarea class="js-tmp" style="display:none;">
<div class="weui_media_box weui_media_text">
<a href="{{= it.url }}" class="" target="_blank">
<h4 class="weui_media_title">{{= it.title }}</h4>
</a>
<p class="weui_media_desc">{{= it.desc }}</p>
</div>
</textarea>
<!--/模板-->
和laytpl一样需要追加前缀。使用{{= it.变量 }}
表示变量。
js代码
$.each(data, function(i,el) {
//htmlList += _.template(htmlTemp)(el);
htmlList += doT.template(htmlTemp)(el);
});
没什么好说的。这里加入了 _.template
的对比,大家看看。
Juicer
简介:
Juicer – 一个Javascript模板引擎的实现和优化 http://juicer.name/
PaulGuo/Juicer: A Light Javascript Templete Engine. https://github.com/PaulGuo/Juicer
当前最新版本: 0.6.14
Juicer 是一个高效、轻量的前端 (Javascript) 模板引擎,使用 Juicer 可以是你的代码实现数据和视图模型的分离(MVC)。除此之外,它还可以在 Node.js 环境中运行。
引入juicer:
<script src="juicer/juicer-min.js"></script>
模板
<!--模板-->
<textarea class="js-tmp" style="display:none;">
<div class="weui_media_box weui_media_text">
<a href="${url}" class="" target="_blank">
<h4 class="weui_media_title">${title}</h4>
</a>
<p class="weui_media_desc">${desc}</p>
</div>
</textarea>
<!--/模板-->
模板表示变量的方式感觉有点别扭,使用的${变量}
。
js代码
$.each(data, function(i,el) {
htmlList += juicer(htmlTemp,el);
});
文章到此结束,讲的比较简单。写完此文,已经晚上12点了。洗洗睡了,各位晚安。
JavaScript模板引擎实例应用的更多相关文章
- JavaScript模板引擎实例应用(转)
本文将举实例向大家讲解几个常用模板引擎的简单使用. 演示地址:模板引擎示例http://demo.52fhy.com/jstemp/ 准备工作 演示数据:blog.json结构: { "li ...
- JavaScript模板引擎
JavaScript模板引擎实例应用 在之前的一篇名为<移动端基于HTML模板和JSON数据的JavaScript交互>的文章中,我向大家说明了为什么要使用JavaScript模板以及 ...
- JavaScript 模板引擎实现原理解析
1.入门实例 首先我们来看一个简单模板: <script type="template" id="template"> <h2> < ...
- 【JavsScript】推荐五款流行的JavaScript模板引擎
摘要:Javascript模板引擎作为数据与界面分离工作中最重要一环,受到开发者广泛关注.本文通过开发实例解析五款流行模板引擎:Mustache.Underscore Templates.Embedd ...
- Juicer javascript 模板引擎
模板引擎是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎就会生成一个标准的HTML文档. js模板引擎包括如下:template官方参考:http://au ...
- JavaScript模板引擎Template.js使用详解
这篇文章主要为大家详细介绍了JavaScript模板引擎Template.js使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 template.js 一款 JavaScript 模板引 ...
- 推荐13款javascript模板引擎
javaScript 在生成各种页面内容时如果能结合一些模板技术,可以让逻辑和数据之间更加清晰,本文介绍 X 款 JavaScript 的模板引擎.(排名不分先后顺序) 1. Mustache 基于j ...
- 各种JS模板引擎对比数据(高性能JavaScript模板引擎)
最近做了JS模板引擎测试,拿各个JS模板引擎在不同浏览器上去运行同一程序,下面是模板引擎测试数据:通过测试artTemplate.juicer与doT引擎模板整体性能要有绝对优势: js模板引擎 Ja ...
- JavaScript模板引擎artTemplate.js——为什么使用模板引擎?
作为一个工作一年的菜鸟,在公司做了几个外包项目,也接触到了不同形式的web开发.其实也没多少,就是javaweb开发和HTML5移动开发,这两者在页面展示的时候的解决方案还是有所不同的. 1.vo+e ...
随机推荐
- 4580: [Usaco2016 Open]248
Description Bessie likes downloading games to play on her cell phone, even though she does find the ...
- js如何判断手机机型
<script language="javascript"> window.onload = function () { alert("1"); v ...
- HDU 4336 Card Collector (期望DP+状态压缩 或者 状态压缩+容斥)
题意:有N(1<=N<=20)张卡片,每包中含有这些卡片的概率,每包至多一张卡片,可能没有卡片.求需要买多少包才能拿到所以的N张卡片,求次数的期望. 析:期望DP,是很容易看出来的,然后由 ...
- STM32移植RT-Thread后的串口在调试助手上出现:(mq != RT_NULL) assert failed at rt_mq_recv:2085和串口只发送数据不能接收数据问题
STM32移植RT-Thread后的串口在调试助手上出现:(mq != RT_NULL) assert failed at rt_mq_recv:2085的问题讨论:http://www.rt-thr ...
- First Missing Positive && missing number
https://leetcode.com/problems/first-missing-positive/ 我原以为数组中不会有重复的数字,所以利用min.max分别记录给定数组中出现的最小正整数和最 ...
- android中布局文件中 layout_weight 的属性详解
在不同的情况下,layout_weight属性作用是不同的.主要有两种属性: 1.当布局中的控件的尺寸(宽和高)都有指定时,它所表示的该控件在父容器中的比重,及它在父容器中所占的比例,数值越大,比重越 ...
- 搭建一个SSH项目框架的步骤
1.导入jar包(38个) 2.配置文件 applicationContext,xml (beans.xml) (数据源.LocalSessionFactoryBean.事务管理器.事务通知.AOP切 ...
- test-output目录中找不到testng-fail.xml原因+Reportng+ant build.xml文件
test-output目录中找不到testng-fail.xml原因: 在没有加入Reportng 报告的相关jar包前,在test-output目录下是有testng-fail.xml,后面加入了R ...
- How to Install JAVA 8 (JDK/JRE 8u111) on Debian 8 & 7 via PPA
Oracle JAVA 8 Stable release has been released on Mar,18 2014 and available to download and install. ...
- Java中创建对象的几种方式
Java中创建对象的五种方式: 作为java开发者,我们每天创建很多对象,但是我们通常使用依赖注入的方式管理系统,比如:Spring去创建对象,然而这里有很多创建对象的方法:使用New关键字.使用Cl ...