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 相关文章推荐
Ext.MessageBox工具类简介
Dec 10 Javascript
两种常用的javascript数组去重方法思路及代码
Mar 26 Javascript
JS批量操作CSS属性详细解析
Dec 16 Javascript
js中arguments,caller,callee,apply的用法小结
Jan 28 Javascript
jQuery判断checkbox是否选中的3种方法
Aug 12 Javascript
Ionic2系列之使用DeepLinker实现指定页面URL
Nov 21 Javascript
使用原生js封装的ajax实例(兼容jsonp)
Oct 12 Javascript
微信小程序仿RadioGroup改变样式的处理方案
Jul 13 Javascript
详解如何理解vue的key属性
Apr 14 Javascript
vue改变对象或数组时的刷新机制的方法总结
Apr 24 Javascript
Vue+Element实现表格编辑、删除、以及新增行的最优方法
May 28 Javascript
详解小程序中h5页面onShow实现及跨页面通信方案
May 30 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
为查询结果建立向后/向前按钮
2006/10/09 PHP
PHP 5.3 下载时 VC9、VC6、Thread Safe、Non Thread Safe的区别分析
2011/03/28 PHP
PHP简单实现遍历目录下特定文件的方法小结
2017/05/22 PHP
基于php双引号中访问数组元素报错的解决方法
2018/02/01 PHP
laravel框架中间件简单使用方法示例
2020/01/25 PHP
nodejs调用cmd命令实现复制目录
2015/05/04 NodeJs
js实现仿Windows风格选项卡和按钮效果实例
2015/05/13 Javascript
JavaScript的Backbone.js框架环境搭建及Hellow world示例
2016/05/07 Javascript
js css+html实现简单的日历
2016/07/14 Javascript
Js操作DOM元素及获取浏览器高宽的简单方法
2016/09/08 Javascript
深入理解js中的加载事件
2017/02/08 Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
2017/03/30 Javascript
JQuery 获取Dom元素的实例讲解
2017/07/08 jQuery
angular2路由切换改变页面title的示例代码
2017/08/23 Javascript
bootstrap treeview 树形菜单带复选框及级联选择功能
2018/06/08 Javascript
js实现图片上传并预览功能
2018/08/06 Javascript
[42:24]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第三场 11.27
2020/12/01 DOTA
使用Python标准库中的wave模块绘制乐谱的简单教程
2015/03/30 Python
Python递归遍历列表及输出的实现方法
2015/05/19 Python
python定时利用QQ邮件发送天气预报的实例
2017/11/17 Python
对python requests的content和text方法的区别详解
2018/10/11 Python
Python Django的安装配置教程图文详解
2019/07/17 Python
Django项目后台不挂断运行的方法
2019/08/31 Python
python将图片转base64,实现前端显示
2020/01/09 Python
python判断变量是否为int、字符串、列表、元组、字典的方法详解
2020/02/13 Python
css3绘制百度的小度熊
2018/10/29 HTML / CSS
省级四好少年事迹材料
2014/01/25 职场文书
培训自我鉴定
2014/01/31 职场文书
预备党员入党自我评价范文
2014/03/10 职场文书
学习雷锋做美德少年寄语大全
2014/04/09 职场文书
优秀德育工作者事迹材料
2014/05/07 职场文书
管理工程专业求职信
2014/08/10 职场文书
暑假社会实践证明格式
2014/10/28 职场文书
2014年采购工作总结
2014/11/20 职场文书
管理失职检讨书
2015/05/05 职场文书
MySQL详解进行JDBC编程与增删改查方法
2022/06/16 MySQL