JavaScript模板引擎实例应用(转)
2016-06-02 17:30
459 查看
本文将举实例向大家讲解几个常用模板引擎的简单使用。
演示地址:
模板引擎示例
http://demo.52fhy.com/jstemp/
结构:
html页面:
下文将讲解使用ajax获取数据并显示到页面的『内容展示区』。
模板
无需模板。
js代码
在success里面加上代码:
代码里明显看到一大堆的拼接符号,显得不是很优雅,不方便后期维护。
记得放到页面的js代码里。
模板
变量使用
这里的模板放在
还有一种方式是模板放在
大家喜欢哪种就使用哪种。
js代码
代码量并不多,比较简单。注意
简介:
使用前需要引入
模板
laytpl模板引擎使用
js代码
js代码很简单,这里不全部复制过来了,仅显示与
很简单吧!注释的那一行是
简介:
使用前需要引入
模板
underscore使用
js代码
这里同样仅展示与上例不一样的地方:
使用方法其实很相似。
简介:
artTemplate区分
使用前同样先引入
模板
注意这里模板与前面的示例不一样了,直接使用一个
模板里变量使用
js代码
artTemplate使用基于
下面再看看artTemplate
需要引入替换成:
模板
js代码
无需改动,和上面
简介:
使用前引入:
模板
使用
js代码
使用很灵活,值得一试。
简介:
引入doT.min.js:
模板
和laytpl一样需要追加前缀。使用
js代码
没什么好说的。这里加入了
引入juicer:
模板
模板表示变量的方式感觉有点别扭,使用的
js代码
文章到此结束,讲的比较简单。写完此文,已经晚上12点了。洗洗睡了,各位晚安。
演示地址:
模板引擎示例
http://demo.52fhy.com/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实现汉诺塔动画效果
- ExtJs6 form回显combo下拉框的值方法
- javascript各种模式解析
- <Js>节点
- js用 window.location.href跳转IE和chrome中路径url不一致问题
- JS文件中获取contextPath的方法
- 原生JS实现hasClass,addClass,removeClass
- html 移动互联网终端的javascript touch事件,touchstart, touchend, touchmove
- 粗浅看 JSP工作原理
- form.submit(回调函数)——引用jq-form.js
- JavaScript join() 方法
- JS对输入判断变化屏蔽中文输入法输入时连续触发事件的方法
- js正则验证,以及验证码的实现
- 使用Gson解析json
- jsp中c标签的使用
- uaredirect.js使PC版网页跳转到手机版
- 字符串转化为json方法
- javascript中,typeof和instanceof
- jsp页面中jstl标签详解
- JavaScript:闭包