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 相关文章推荐
基于JQuery的6个Tab选项卡插件
Sep 03 Javascript
对 jQuery 中 data 方法的误解分析
Jun 18 Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
Aug 21 Javascript
jQuery on()绑定动态元素出现的问题小结
Feb 19 Javascript
Bootstrap模态框(modal)垂直居中的实例代码
Aug 18 Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
Aug 31 Javascript
JS实现导出Excel的五种方法详解【附源码下载】
Mar 15 Javascript
jQuery实现获取动态添加的标签对象示例
Jun 28 jQuery
GOJS+VUE实现流程图效果
Dec 01 Javascript
Element ui 下拉多选时新增一个选择所有的选项
Aug 21 Javascript
JS开发自己的类库实例分析
Aug 28 Javascript
js实现简单图片拖拽效果
Feb 22 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中获得视频时间总长度的另一种方法
2011/09/15 PHP
推荐一款MAC OS X 下php集成开发环境mamp
2014/11/08 PHP
php设计模式之策略模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
Hutia 的 JS 代码集
2006/10/24 Javascript
jquery 表格分页等操作实现代码(pagedown,pageup)
2010/04/11 Javascript
Javascript Function对象扩展之延时执行函数
2010/07/06 Javascript
Javascript 是你的高阶函数(高级应用)
2015/06/15 Javascript
javascript制作幻灯片(360度全景图片)
2015/07/28 Javascript
NodeJs测试框架Mocha的安装与使用
2017/03/28 NodeJs
用js将long型数据转换成date型或datetime型的实例
2017/07/03 Javascript
JavaScript享元模式原理与用法实例详解
2020/03/09 Javascript
JS变量提升原理与用法实例浅析
2020/05/22 Javascript
[02:39]DOTA2英雄基础教程 天怒法师
2013/11/29 DOTA
[08:29]DOTA2每周TOP10 精彩击杀集锦vol.7
2014/06/25 DOTA
深入讲解Java编程中类的生命周期
2016/02/05 Python
Python使用tablib生成excel文件的简单实现方法
2016/03/16 Python
python使用super()出现错误解决办法
2017/08/14 Python
python 内置函数汇总详解
2019/09/16 Python
Python箱型图处理离群点的例子
2019/12/09 Python
pytorch 中pad函数toch.nn.functional.pad()的用法
2020/01/08 Python
HTML5是否真的可以取代Flash
2010/02/10 HTML / CSS
DNA测试:Orig3n
2019/03/01 全球购物
自荐信如何“自荐”
2013/10/24 职场文书
大专毕业生自我鉴定
2013/11/21 职场文书
幼儿园消防安全制度
2014/01/26 职场文书
小学毕业感言300字
2014/02/19 职场文书
院领导写的就业推荐信
2014/03/09 职场文书
乔布斯斯坦福大学演讲稿
2014/05/23 职场文书
2014年文艺部工作总结
2014/11/17 职场文书
2014年涉外离婚协议书范本
2014/11/20 职场文书
网络营销计划
2015/01/17 职场文书
幼儿园小班教师个人工作总结
2015/02/06 职场文书
杭州黄龙洞导游词
2015/02/10 职场文书
公司前台接待岗位职责
2015/04/03 职场文书
师德师风心得体会(2016精选篇)
2016/01/12 职场文书
Spring JPA 增加字段执行异常问题及解决
2022/06/10 Java/Android