JavaScript模板引擎Template.js使用详解


Posted in Javascript onDecember 15, 2016

template.js 一款 JavaScript 模板引擎,简单,好用。提供一套模板语法,用户可以写一个模板区块,每次根据传入的数据,生成对应数据产生的HTML片段,渲染不同的效果。https://github.com/aui/artTemplate

1、特性

(1)、性能卓越,执行速度通常是 Mustache 与 tmpl 的 20 多倍(性能测试)(2)、支持运行时调试,可精确定位异常模板所在语句(演示)

(3)、对 NodeJS Express 友好支持(4)、安全,默认对输出进行转义、在沙箱中运行编译后的代码(Node版本可以安全执行用户上传的模板)

(5)、支持include语句

(6)、可在浏览器端实现按路径加载模板(详情)

(7)、支持预编译,可将模板转换成为非常精简的 js 文件

(8)、模板语句简洁,无需前缀引用数据,有简洁版本与原生语法版本可选

(9)、支持所有流行的浏览器

2、语法

(1)、使用

引用简洁语法的引擎版本,例如: <script src="dist/template.js"></script> 

(2)、表达式

{{ 与 }} 符号包裹起来的语句则为模板的逻辑表达式。

(3)、输出表达式

对内容编码输出: {{content}} 
不编码输出: {{#content}} 
编码可以防止数据中含有 HTML 字符串,避免引起 XSS 攻击。

(4)、条件表达式

{{if admin}} 
 <p>admin</p> 
{{else if code > 0}} 
 <p>master</p> 
{{else}} 
 <p>error!</p> 
{{/if}}

(5)、遍历表达式

无论数组或者对象都可以用 each 进行遍历。

{{each list as value index}} 
 <li>{{index}} - {{value.user}}</li> 
{{/each}}

亦可以被简写:

{{each list}} 
 <li>{{$index}} - {{$value.user}}</li> 
{{/each}}

(6)、模板包含表达式

用于嵌入子模板。

{{include 'template_name'}} 

子模板默认共享当前数据,亦可以指定数据:{{include 'template_name' news_list}} 

(7)、辅助方法

使用template.helper(name, callback)注册公用辅助方法:

template.helper('dateFormat', function (date, format) { 
 // .. 
 return value; 
});

模板中使用的方式: {{time | dateFormat:'yyyy-MM-dd hh:mm:ss'}} 
支持传入参数与嵌套使用: {{time | say:'cd' | ubb | link}} 

3、实例

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>basic-demo</title> 
<script src="../dist/template.js"></script> 
</head> 
<body> 
<div id="content"></div> 
<script id="test" type="text/html"> 
{{if isAdmin}} 
<h1>{{title}}</h1> 
<ul> 
 {{each list as value i}} 
  <li>索引 {{i + 1}} :{{value}}</li> 
 {{/each}} 
</ul> 
{{/if}} 
</script> 
<script> 
var data = { 
 title: '基本例子', 
 isAdmin: true, 
 list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他'] 
}; 
var html = template('test', data); 
document.getElementById('content').innerHTML = html; 
</script> 
</body> 
</html>

 JavaScript模板引擎Template.js使用详解

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>no escape-demo</title> 
<script src="../dist/template.js"></script> 
</head> 
 
<body> 
 <h1>不转义HTML</h1> 
 <div id="content"></div> 
 <script id="test" type="text/html"> 
 <p>不转义:{{#value}}</p> 
 <p>默认转义: {{value}}</p> 
 </script> 
 
 <script> 
 var data = { 
  value: '<span style="color:#F00">hello world!</span>' 
 }; 
 var html = template('test', data); 
 document.getElementById('content').innerHTML = html; 
 </script> 
</body> 
</html>

JavaScript模板引擎Template.js使用详解

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>include-demo</title> 
<script src="../dist/template.js"></script> 
</head> 
 
<body> 
<div id="content"></div> 
<script id="test" type="text/html"> 
<h1>{{title}}</h1> 
{{include 'list'}} 
</script> 
<script id="list" type="text/html"> 
<ul> 
 {{each list as value i}} 
  <li>索引 {{i + 1}} :{{value}}</li> 
 {{/each}} 
</ul> 
</script> 
 
<script> 
var data = { 
 title: '嵌入子模板', 
 list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他'] 
}; 
var html = template('test', data); 
document.getElementById('content').innerHTML = html; 
</script> 
</body> 
</html>

JavaScript模板引擎Template.js使用详解

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>helper-demo</title> 
<script src="../dist/template.js"></script> 
</head> 
 
<body> 
<h1>辅助方法</h1> 
<div id="content"></div> 
<script id="test" type="text/html"> 
{{time | dateFormat:'yyyy年 MM月 dd日 hh:mm:ss'}} 
</script> 
 
<script> 
/** 
 * 对日期进行格式化, 
 * @param date 要格式化的日期 
 * @param format 进行格式化的模式字符串 
 *  支持的模式字母有: 
 *  y:年, 
 *  M:年中的月份(1-12), 
 *  d:月份中的天(1-31), 
 *  h:小时(0-23), 
 *  m:分(0-59), 
 *  s:秒(0-59), 
 *  S:毫秒(0-999), 
 *  q:季度(1-4) 
 * @return String 
 * @author yanis.wang 
 * @see http://yaniswang.com/frontend/2013/02/16/dateformat-performance/ 
 */ 
template.helper('dateFormat', function (date, format) { 
 
 if (typeof date === "string") { 
  var mts = date.match(/(\/Date(\d+)\/)/); 
  if (mts && mts.length >= 3) { 
   date = parseInt(mts[2]); 
  } 
 } 
 date = new Date(date); 
 if (!date || date.toUTCString() == "Invalid Date") { 
  return ""; 
 } 
 
 var map = { 
  "M": date.getMonth() + 1, //月份 
  "d": date.getDate(), //日 
  "h": date.getHours(), //小时 
  "m": date.getMinutes(), //分 
  "s": date.getSeconds(), //秒 
  "q": Math.floor((date.getMonth() + 3) / 3), //季度 
  "S": date.getMilliseconds() //毫秒 
 }; 
  
 
 format = format.replace(/([yMdhmsqS])+/g, function(all, t){ 
  var v = map[t]; 
  if(v !== undefined){ 
   if(all.length > 1){ 
    v = '0' + v; 
    v = v.substr(v.length-2); 
   } 
   return v; 
  } 
  else if(t === 'y'){ 
   return (date.getFullYear() + '').substr(4 - all.length); 
  } 
  return all; 
 }); 
 return format; 
}); 
 
// -------- 
 
var data = { 
 time: 1408536771253, 
}; 
var html = template('test', data); 
document.getElementById('content').innerHTML = html; 
</script> 
</body> 
</html>

JavaScript模板引擎Template.js使用详解

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript之锁定表格栏位
Jun 29 Javascript
javaScript call 函数的用法说明
Apr 09 Javascript
jquery实现居中弹出层代码
Aug 25 Javascript
关于textarea提交的内容无法换行的解决办法
Apr 09 Javascript
深入浅出理解javaScript原型链
May 09 Javascript
bootstrap3 兼容IE8浏览器!
May 02 Javascript
Javascript表单特效之十大常用原理性样例代码大总结
Jul 12 Javascript
javascript cookie用法基础教程(概念,设置,读取及删除)
Sep 20 Javascript
使用 jQuery 实现表单验证功能
Jul 05 jQuery
利用node.js实现自动生成前端项目组件的方法详解
Jul 12 Javascript
JavaScript比较同一天的时间大小实例代码
Feb 09 Javascript
js 判断当前时间是否处于某个一个时间段内
Sep 19 Javascript
原生JS实现图片轮播切换效果
Dec 15 #Javascript
javascript中数组(Array)对象和字符串(String)对象的常用方法总结
Dec 15 #Javascript
利用vue写todolist单页应用
Dec 15 #Javascript
jquery插件bootstrapValidator表单验证详解
Dec 15 #Javascript
jQuery中的100个技巧汇总
Dec 15 #Javascript
JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)
Dec 14 #Javascript
详解jQuery中的事件
Dec 14 #Javascript
You might like
php中计算未知长度的字符串哪个字符出现的次数最多的代码
2012/08/14 PHP
神盾加密解密教程(二)PHP 神盾解密
2014/06/08 PHP
CodeIgniter中实现泛域名解析
2014/07/19 PHP
十大使用PHP框架的理由
2015/09/26 PHP
Zend Framework校验器Zend_Validate用法详解
2016/12/09 PHP
jquery实现智能感知连接外网搜索
2013/05/21 Javascript
JS.elementGetStyle(element, style)应用示例
2013/09/24 Javascript
Google 地图事件实例讲解
2016/08/06 Javascript
jQuery实现ToolTip元素定位显示功能示例
2016/11/23 Javascript
shiro授权的实现原理
2017/09/21 Javascript
深入理解requireJS-实现一个简单的模块加载器
2018/01/15 Javascript
彻底理解js面向对象之继承
2018/02/04 Javascript
jQuery实现鼠标响应式淘宝动画效果示例
2018/02/13 jQuery
Vue中$refs的用法详解
2018/06/24 Javascript
Vue如何获取数据列表展示
2019/12/11 Javascript
[46:44]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD BO3 第二场 3月7日
2021/03/11 DOTA
python算法表示概念扫盲教程
2017/04/13 Python
Pandas的read_csv函数参数分析详解
2019/07/02 Python
Python3 批量扫描端口的例子
2019/07/25 Python
Python 实现的 Google 批量翻译功能
2019/08/26 Python
pytorch中使用cuda扩展的实现示例
2020/02/12 Python
python如何支持并发方法详解
2020/07/25 Python
selenium+超级鹰实现模拟登录12306
2021/01/24 Python
HTML5仿手机微信聊天界面
2016/03/18 HTML / CSS
什么是smarty? Smarty的优点是什么?
2013/08/11 面试题
PHP解析URL是哪个函数?怎么用?
2013/05/09 面试题
毕业生机械建模求职信
2013/10/14 职场文书
人事专员岗位职责范本
2014/03/04 职场文书
大学新生军训自我鉴定
2014/09/18 职场文书
部队反四风对照检查材料
2014/09/26 职场文书
工厂采购员岗位职责
2015/04/07 职场文书
圆明园纪录片观后感
2015/06/03 职场文书
感恩教师主题班会
2015/08/12 职场文书
XX部保密工作制度范本
2019/08/27 职场文书
JVM钩子函数的使用场景详解
2021/08/23 Java/Android
分布式Redis Cluster集群搭建与Redis基本用法
2022/02/24 Redis