1 介紹：
art-template 是一個簡約厢破、超快的模板引擎掸哑。
它采用作用域預(yù)聲明的技術(shù)來優(yōu)化模板渲染速度，從而獲得接近 JavaScript 極限的運行性能兰英，并且同時支持 NodeJS 和瀏覽器玷坠。
1.1 模板語法：
art-template 同時支持兩種模板語法蜗搔。標(biāo)準(zhǔn)語法可以讓模板更容易讀寫；原始語法具有強大的邏輯處理能力八堡。
標(biāo)準(zhǔn)語法
{{if user}}
<h2>{{user.name}}</h2>
{{/if}}
原始語法
<% if (user) { %>
<h2><%= user.name %></h2>
<% } %>
1.2 核心方法：
// 基于模板名渲染模板
template(filename, data);
// 將模板源代碼編譯成函數(shù)
template.compile(source, options);
// 將模板源代碼編譯成函數(shù)并立即執(zhí)行
template.render(source, data, options);
2 安裝
2.1 安裝方法:
- 通過npm安裝:
npm install art-template --save - 下載安裝
2.2 在瀏覽器中編譯
因為瀏覽器不支持文件系統(tǒng)樟凄，所以 template(filename, data) 不支持傳入文件路徑，它內(nèi)部使用 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>
<!-- 創(chuàng)建 script 標(biāo)簽創(chuàng)建模板,注意下面幾點 -->
<!-- 1. type="text/該斜杠后可以是 html,template... 不是script即可)" -->
<!-- 2. 給 script 標(biāo)簽添加 id 缝龄，此 id 即為模板 id -->
<!-- 3.模板 script 標(biāo)簽必須在 template() 方法調(diào)用的 script 標(biāo)簽之前 -->
<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>
瀏覽器打開看到的結(jié)果如下：
通過瀏覽器渲染模板.png
3 語法
art-template 支持標(biāo)準(zhǔn)語法與原始語法。標(biāo)準(zhǔn)語法可以讓模板易讀寫，而原始語法擁有強大的邏輯表達能力二拐。
標(biāo)準(zhǔn)語法支持基本模板語法以及基本 JavaScript 表達式；原始語法支持任意 JavaScript 語句凳兵，這和 EJS 一樣百新。
3.1 輸出
標(biāo)準(zhǔn)語法
{{value}}
{{data.key}}
{{data['key']}}
{{a ? b : c}}
{{a || b}}
{{a + b}}
原始語法
<%= value %>
<%= data.key %>
<%= data['key'] %>
<%= a ? b : c %>
<%= a || b %>
<%= a + b %>
3.2 原文輸出
標(biāo)準(zhǔn)語法
{{@ value}}
原始語法
<%- value %>
3.3 條件輸出
標(biāo)準(zhǔn)語法
<!-- 單 if 判斷 -->
{{if value}}
...
{{/if}}
<!-- if ... else ... 判斷 -->
{{if v1}}
...
{{else if v2}}
...
{{/if}}
原始語法
<!-- 單 if 判斷 -->
<% if (value) { %>
...
<% } %>
<!-- if ... else ... 判斷 -->
<% if (v1) { %>
...
<% else if (v2) { %>
...
<% } %>
3.4 循環(huán)輸出
標(biāo)準(zhǔn)語法
{{each target}}
{{$index}} {{$value}}
{{/each}}
target是一個數(shù)組，each用于對數(shù)組遍歷庐扫，$index是數(shù)組的下標(biāo)饭望，$value是數(shù)組的值
原始語法
<% for (var i = 0; i < target.length; i++) { %>
<%= i %> <%= target[i] %>
<% } %>
注意:
-
target支持array與object的迭代，其默認(rèn)值為$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>
看輸出結(jié)果：
each遍歷對象target(默認(rèn)為$data).png
圖中可以看出$data其實就是傳入模板的總數(shù)據(jù)對象(原始數(shù)據(jù)對象)
-
$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 遍歷數(shù)組，采用默認(rèn)的索引 $index 和默認(rèn)的值 $value</h4>
<ul>
<!-- each 遍歷數(shù)組萨醒，采用默認(rèn)的索引 $index 和默認(rèn)的值 $value -->
{{each user.arr}}
<li>
{{$index}} ---- {{$value}}
</li>
{{/each}}
</ul>
<h4>each 遍歷數(shù)組, 采用自定義的索引 b 和默認(rèn)的值 a</h4>
<ul>
<!-- each 遍歷數(shù)組, 采用自定義的索引 b 和默認(rèn)的值 a -->
{{each user.arr b a}}
<li>
{{a}} ---- {斟珊}
</li>
{{/each}}
</ul>
<h4>each 遍歷對象， 采用默認(rèn)的鍵 $index 和默認(rèn)的值 $value</h4>
<ul>
<!-- each 遍歷對象富纸， 采用默認(rèn)的鍵 $index 和默認(rèn)的值 $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>
看輸出結(jié)果：
each遍歷數(shù)組和對象以及自定義$data和$index.png
3.5 定義變量
標(biāo)準(zhǔn)語法
{{set temp = data.sub.content}}
原始語法
<% var temp = data.sub.content %>
3.6 模板繼承
標(biāo)準(zhǔn)語法
{{extend './layout.html'}}
{{block 'head'}}
...
{{/block}}
原始語法
<% extend ('./layout.html') %>
<% block('head', function () { %>
...
<% }) %>
模板繼承允許你構(gòu)建一個包含站點共同元素的基本“模板骨架”,實例：
<!--layout.art-->
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>{{block 'title'}}My Site{{/block}}</title>
{{block 'head'}}
<link rel="stylesheet" href="main.css">
{{/block}}
</head>
<body>
{{block 'content'}}{{/block}}
</body>
</html>
<!--index.art-->
{{extend './layout.art'}}
{{block 'title'}}{{title}}{{/block}}
{{block 'head'}}
<link rel="stylesheet" href="custom.css">
{{/block}}
{{block 'content'}}
<p>This is just an awesome page.</p>
{{/block}}
渲染 index.art 后晓褪，將自動應(yīng)用布局骨架堵漱。
3.7 子模板
標(biāo)準(zhǔn)語法
{{include './header.art'}}
{{include './header.art' data}}
原始語法
<% include('./header.art') %>
<% include('./header.art', 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>art-template-filter</title>
<!-- 引入 template-web.js -->
<script src="./node_modules/art-template/lib/template-web.js"></script>
</head>
<body>
<div class="container"></div>
<script type="text/html" id="filterTpl">
<h3>{{date | format 'YYYy-mM-dd' | addQuotationMarks}}</h3>
<h3><%= $imports.addQuotationMarks($imports.format(date)) %></h3>
</script>
<script>
var data = {
date: Date.now(),
}
// 定義日期格式化過濾器 format 方法：
template.defaults.imports.format = function (date, format) {
if (!format || format.toLowerCase() === 'yyyy-mm-dd') {
var dt = new Date(date);
var y = dt.getFullYear();
var m = (dt.getMonth() + 1).toString().padStart(2, '0');
var d = dt.getDate().toString().padStart(2, '0');
return `${y}/${m}/$hf11bzr`;
} else {
return 'invalid date';
}
}
// 定義給字符串加引號過濾器 addQuotationMarks 方法:
template.defaults.imports.addQuotationMarks = function (str) {
return `"${str}"`;
}
// 調(diào)用 template 方法，渲染模板和數(shù)據(jù)
var html = template('filterTpl', data);
document.querySelector('.container').innerHTML = html;
</script>
</body>
</html>
注意：
-
{{date | format 'YYYy-mM-dd' | addQuotationMarks}}
date默認(rèn)為 format 過濾器(方法)的第一個參數(shù)涣仿， 'YYYy-mM-dd' 才是format 過濾器的第二個參數(shù),date經(jīng)過format過濾器過濾后勤庐，得到的結(jié)果，又作為
addQuotationMarks過濾器的默認(rèn)參數(shù)好港，如果有更多的過濾器愉镰，那么就把前一層過濾器過濾的結(jié)果，作為下一個過濾器的參數(shù)一層層過濾下去
4 調(diào)試
template.defaults.debug
art-template 內(nèi)建調(diào)試器媚狰，能夠捕獲到語法與運行錯誤岛杀，并且支持自定義的語法。在 NodeJS 中調(diào)試模式會根據(jù)環(huán)境變量自動開啟：process.env.NODE_ENV !== 'production'
設(shè)置 template.defaults.debug=true 后崭孤，等同于：
{
"cache": false,
"minimize": false,
"compileDebug": true
}
5 模板變量
template.defaults.imports
模板通過 $imports 可以訪問到模板外部的全局變量和導(dǎo)入的變量类嗤。
5.1 導(dǎo)入變量
template.defaults.imports.log = console.log;
<% $imports.log('Hello, template.defaults.imports.log') %>
看下面例子：
<!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>template.defaults.imports</title>
<script src="./node_modules/art-template/lib/template-web.js"></script>
</head>
<body>
<div class="container">
</div>
<script type="text/html" id="importsTpl">
<% $imports.log('Hello, template.defaults.imports.log') %>
<%= $imports.date %>
</script>
<script>
var data = {};
template.defaults.imports.log = console.log;
template.defaults.imports.date = new Date();
template.defaults.debug = true;
var html = template('importsTpl', data);
document.querySelector('.container').innerHTML = html;
</script>
</body>
</html>
注意：
這些語法必須寫在模板中，在模板中才會起作用辨宠；
5.2 內(nèi)置變量清單
-
$data?????傳入模板的數(shù)據(jù); -
$imports外部導(dǎo)入的變量以及全局變量遗锣； -
print????字符串輸出函數(shù); -
include?子模板載入函數(shù) -
extend???模板繼承模板導(dǎo)入函數(shù) -
block????模板塊生命函數(shù)
