art-template
art-template 是一个简约、超快的模板引擎。 它采用作用域预声明的技术来优化模板渲染速度，从而获得接近 JavaScript 极限的运行性能，并且同时支持 NodeJS 和浏览器。
而用了模板引擎以后，我们只需要html文件中修改html内容。还有使用了模板引擎以后DOM操作的效率也会更高一点。
语法：
art-template 同时支持两种模板语法。
标准语法可以让模板更容易读写； 原始语法具有强大的逻辑处理能力。
标准语法
{{if user}}
<h2>{{user.name}}</h2>
{{/if}}
原始语法(极似ejs)
<% if (user) { %>
<h2><%= user.name %></h2>
<% } %>
快速上手
编写模版
使用一个 type=“text/html“ 的script标签存放模版
<script id="test" type="text/html">
<h1>{{ title }}</h1>
<ul>
{{each list as value i}}
<li>索引 {{i +1}}: {{value}}</li>
{{/each}}
</ul>
</script
渲染模版
var data = {
title: '主题',
list: ['吃饭','睡觉','打豆豆']
};
var html = template('test', data);
document.getElementById('#test').innerHTML = html;
安装
安装方法:
通过npm安装: npm install art-template --save 下载安装
在浏览器中编译
因为浏览器不支持文件系统，所以 template(filename, data) 不支持传入文件路径，它内部使用 document.getElementById(filename).innerHTML 来获取模板，例如：
<!DOCTYPE html>
<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>Document</title>
<!-- 引入template-web.js -->
<script src="./node_modules/art-template/lib/template-web.js"></script>
</head>
<body>
<div id="container"></div>
<!-- 创建 script 标签创建模板,注意下面几点 -->
<!-- 1. type="text/该斜杠后可以是 html,template... 不是script即可)" -->
<!-- 2. 给 script 标签添加 id ，此 id 即为模板 id -->
<!-- 3.模板 script 标签必须在 template() 方法调用的 script 标签之前 -->
<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>
语法
1、输出
标准语法
{{value}}
{{data.key}}
{{data['key']}}
{{a ? b : c}}
{{a || b}}
{{a + b}}
原始语法
<%= value %>
<%= data.key %>
<%= data['key'] %>
<%= a ? b : c %>
<%= a || b %>
<%= a + b %>
2、原文输出
标准语法
{{@ value}}
原始语法I
<%- value %>
3、条件输出
标准语法
<!-- 单 if 判断 -->
{{if value}}
...
{{/if}}
<!-- if ... else ... 判断 -->
{{if v1}}
...
{{else if v2}}
...
{{/if}}
原始语法
<!-- 单 if 判断 -->
<% if (value) { %>
...
<% } %>
<!-- if ... else ... 判断 -->
<% if (v1) { %>
...
<% else if (v2) { %>
...
<% } %>
4、循环输出
标准语法
{{each target}}
{{$index}} {{$value}}
{{/each}}
target是一个数组，each用于对数组遍历，value是数组的值
原始语法
<% for (var i = 0; i < target.length; i++) { %>
<%= i %> <%= target[i] %>
<% } %>
注意:
target 支持 array 与object 的迭代，其默认值为 data 。 data其实就是传入模板的总数据对象(原始数据对象)
<!DOCTYPE html>
<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>Document</title>
<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}}
<!DOCTYPE html>
<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>Document</title>
<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>
