art-template使用
1 介绍：
art-template 是一个简约、超快的模板引擎。
它采用作用域预声明的技术来优化模板渲染速度，从而获得接近 JavaScript 极限的运行性能，并且同时支持 NodeJS 和浏览器。
2 模板语法：
art-template 同时支持两种模板语法。
- 标准语法可以让模板更容易读写；
- 原始语法具有强大的逻辑处理能力。
标准语法
{{if user}}
<h2>{{user.name}}</h2>
{{/if}}
原始语法(极似ejs)
<% if (user) { %>
<h2><%= user.name %></h2>
<% } %>
3 安装
安装方法:
- 通过npm安装:
npm install art-template --save - 下载安装
在浏览器中编译
因为浏览器不支持文件系统，所以 template(filename, data) 不支持传入文件路径，它内部使用 document.getElementById(filename).innerHTML 来获取模板，例如：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
<script src="./node_modules/art-template/lib/template-web.js">script>
head>
<body>
<div id="container">div>
<script type="text/html" id="tpl">
{{if user}}
<h2>{{user.name}}</h2>
{{/if}}
script>
<script>
var user = {
name: 'Template username'
}
var html = template('tpl', {user: user})
var container = document.querySelector('#container');
container.innerHTML = html;
script>
body>
html>
4 语法
- 输出
标准语法
{{value}}
{{data.key}}
{{data['key']}}
{{a ? b : c}}
{{a || b}}
{{a + b}}
原始语法
<%= value %>
<%= data.key %>
<%= data['key'] %>
<%= a ? b : c %>
<%= a || b %>
<%= a + b %>
- 原文输出
标准语法
{{@ value}}
原始语法
<%- value %>
- 条件输出
标准语法
<!-- 单 if 判断 -->
{{if value}}
...
{{/if}}
<!-- if ... else ... 判断 -->
{{if v1}}
...
{{else if v2}}
...
{{/if}}
原始语法
<!-- 单 if 判断 -->
<% if (value) { %>
...
<% } %>
<!-- if ... else ... 判断 -->
<% if (v1) { %>
...
<% else if (v2) { %>
...
<% } %>
- 循环输出
标准语法
{{each target}}
{{$index}} {{$value}}
{{/each}}
target是一个数组，each用于对数组遍历，$index 是数组的下标， $value是数组的值
原始语法
<% for (var i = 0; i < target.length; i++) { %>
<%= i %> <%= target[i] %>
<% } %>
注意:
target 支持 array 与object 的迭代，其默认值为 d a t a 。 data。 data。data其实就是传入模板的总数据对象(原始数据对象)
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
<script src="./node_modules/art-template/lib/template-web.js">script>
head>
<body>
<div id="container">div>
<script type="text/html" id="tpl">
<ul>
{{each user.arr}}
<li>
{{$index + 1}} ---- {{$value.type}} ---- {{$value.price}}
{{$data}}
</li>
{{/each}}
</ul>
script>
<script>
var user = {
obj: {
name: 'Bruce Lee',
age: 32,
gender: 'male'
},
arr: [
{type: 1, price: 10},
{type: 2, price: 12},
{type: 3, price: 18}
]
}
var html = template('tpl', {user: user})
var container = document.querySelector('#container');
container.innerHTML = html;
script>
body>
html>
$value 与 $index 可以自定义：{{each target val key}}。
具
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
<script src="./node_modules/art-template/lib/template-web.js">script>
head>
<body>
<div id="container">div>
<script type="text/html" id="tpl">
<h4>each 遍历数组，采用默认的索引 $index 和默认的值 $value</h4>
<ul>
<!-- each 遍历数组，采用默认的索引 $index 和默认的值 $value -->
{{each user.arr}}
<li>
{{$index}} ---- {{$value}}
</li>
{{/each}}
</ul>
<h4>each 遍历数组, 采用自定义的索引 b 和默认的值 a</h4>
<ul>
<!-- each 遍历数组, 采用自定义的索引 b 和默认的值 a -->
{{each user.arr b a}}
<li>
{{a}} ---- {{b}}
</li>
{{/each}}
</ul>
<h4>each 遍历对象， 采用默认的键 $index 和默认的值 $value</h4>
<ul>
<!-- each 遍历对象， 采用默认的键 $index 和默认的值 $value -->
{{each user.obj}}
<li>
{{$index}} ---- {{$value}}
</li>
{{/each}}
</ul>
<h4>each 遍历对象，采用自定义的键 key 和自定义的值 val</h4>
<ul>
<!-- each 遍历对象，采用自定义的键 key 和自定义的值 val -->
{{each user.obj val key}}
<li>
{{key}} ---- {{val}}
</li>
{{/each}}
</ul>
script>
<script>
var user = {
obj: {
name: 'Bruce Lee',
age: 32,
gender: 'male'
},
arr: [
{ type: 1, price: 10 },
{ type: 2, price: 12 },
{ type: 3, price: 18 }
]
}
var html = template('tpl', { user: user })
var container = document.querySelector('#container');
container.innerHTML = html;
script>
body>
html>