artTemplate:
template.js 一款 JavaScript 模板引擎,简单,好用。提供一套模板语法,用户可以写一个模板区块,每次根据传入的数据,生成对应数据产生的HTML片段,渲染不同的效果。
1、特性
(1)、性能卓越,拥有接近 JavaScript 渲染极限的的性能, 执行速度通常是 Mustache 的 20 多倍(性能测试)
(2)、调试友好:语法、运行时错误日志精确到模板所在行;支持在模板文件上打断点(Webpack Loader)
(3)、对 NodeJS Express 、Koa、Webpack友好支持
(4)、支持模板继承与子模板
(5)、支持include语句
(6)、可在浏览器端实现按路径加载模板(详情)
(7)、支持预编译,可将模板转换成为非常精简的 js 文件
(8)、模板语句简洁,无需前缀引用数据,有简洁版本与原生语法版本可选
(9)、支持所有流行的浏览器
2、语法
原生语法: ①引入插件文件:
② 逻辑表达式:<% %> 输出表达式:<%= content %>---输出是字符串 里面可以写js代码、变量、判断...
简洁语法:
(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}}
3、使用:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/template.js" ></script>
</head>
<body>
<div id="container"></div>
// 模版
<script type="text/html" id="div">
<h1>{{name}}</h1>
<ul>
{{each lang}}
<li>语言:{{$value.title}} 定义:{{$value.add}}</li>
{{/each}}
</ul>
</script>
// 数据
<script type="text/javascript">
var data = {
name:"前端语言",
lang:[{
title:"html",
add:"超文本标记语言"
},{
title:"css",
add:"层叠样式表"
},{
title:"javaScript",
add:"添加动态特效"
}]
}
var html = template('div',data);
document.getElementById("container").innerHTML = html;
</script>
</body>
</html>
注意:在模板中,只能使用json对象,而不能使用json数组,因为art-template里只能获取json对象里的属性。