前端javaScript模板引擎之ArtTemplate
阿新 • • 發佈：2018-12-14
一、簡介
ArtTemplate是騰訊開發的一款使用方便、效能卓越javascript模板引擎,其渲染效率極其快。ArtTemplate的庫分為兩種,一個是template.js,這個是簡單的語法版本。另一個是template-native.js，是原生的語法版本;,兩個庫的語法不可混用,否則會出錯。本文主要講解簡單的語法版本。
二、原理
三、特性
1.效能卓越,執行速度通常是Mustache與tmpl的20多倍(效能測試)
2.支援執行時除錯,可精確定位異常模板所在語句(演示)
3.對NodeJS Express友好支援
4.安全,預設對輸出進行轉義,在沙箱中執行編譯後的程式碼(Node版本可以安全執行使用者上傳的模板)
5.支援include語句,可匯入定義的其它模組
6.可在瀏覽器端實現按路徑載入模板(詳情)
7.支援預編譯,可將模板轉換成為非常精簡的js檔案
8.模板語句簡潔,無需字首引用資料,有簡潔版本與原生語法版本可選
9.支援所有流行的瀏覽器
10.豐富的自定義配置
11.支援資料過濾
12.異常捕獲功能
四、使用方法（簡介版語法）
1.if--else語法
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>if -- else</title> <meta charset="UTF-8"> <script type="text/javascript" src="../../static/template.js"></script> </head> <body> <div id="app"></div> <script type="text/html" id="test"> {{if isAdmin}} 姓名：<span>{{admin.name}}</span><br> 性別：<span>{{admin.sex}}</span><br> 職務：<span>{{admin.position}}</span> {{else}} 姓名：<span>{{staff.name}}</span><br> 性別：<span>{{staff.sex}}</span><br> 職務：<span>{{staff.position}}</span> {{/if}} </script> <script type="text/javascript"> data = { isAdmin: true, admin: {name: '張三', sex: '男', position: "部門經理"}, staff: {name: '李四', sex: '男', position: "普通員工"} } var html = template('test',data); document.getElementById("app").innerHTML = html; </script> </body> </html>
2.each
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>each</title> <meta charset="UTF-8"> <script type="text/javascript" src="../../static/template.js"></script> </head> <body> <div id="app"></div> <script type="text/html" id="test"> {{if isAdmin}} <h1>{{title}}</h1> {{each list as value index}} <ul> <li>{{index + 1}} : {{value}}</li> </ul> {{/each}} {{/if}} </script> <script type="text/javascript"> var data = { isAdmin:true, title:'球類運動', list:['足球','籃球','排球','棒球','網球','羽毛球','乒乓球'] } var html = template('test',data); document.getElementById('app').innerHTML = html; </script> </body> </html>
3.轉義
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="UTF-8">
<title>轉義</title>
<script type="text/javascript" src="../static/template.js"></script>
</head>
<body>
<h1>不轉義HTML</h1>
<div id="content"></div>
<script type="text/html" id="test">
<p>不轉義：{{#value}}</p>
<p>預設轉義：{{value}}</p>
</script>
<script type="text/javascript">
var data = {
value:'<span style="color: green">hello world</span>'
};
var html = template('test',data);
document.getElementById('content').innerHTML = html;
</script>
</body>
</html>4.巢狀
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>include</title>
<meta charset="UTF-8">
<script type="text/javascript" src="../../static/template.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/html" id="topicPart">
<h1>題目：{{topic}}</h1>
<ul>
{{each optionList as value index}}
<li>{{value.ind}} . {{value.val}}</li>
{{/each}}
</ul>
{{include 'anserPart'}}
</script>
<script type="text/html" id = "anserPart">
<span>參考答案：{{anser}}</span>
</script>
<script type="text/javascript">
var data = {
topic:'1+1=?',
optionList:[
{ind:'A',val:2},
{ind:'B',val:1},
{ind:'C',val:3},
{ind:'D',val:4},
],
anser:"A"
}
var html = template("topicPart",data);
document.getElementById("app").innerHTML = html;
</script>
</body>
</html><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="UTF-8">
<title>test template</title>
<script type="text/javascript" src="../static/template.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/html" id="main">
<ul>
{{each list}}
<li>{{$value}}</li>
{{/each}}
</ul>
</script>
<script type="text/html" id="test">
<div>
<ul>
{{each person}}
<li>{{$value.name}}</li>
{{/each}}
</ul>
{{include 'main' a}}
</div>
</script>
<script type="text/javascript">
var data = {
person:[
{name:"jack",age:18,sex:1},
{name:"tom",age:19,sex:0},
{name:"jerry",age:20,sex:0},
{name:"kid",age:21,sex:1},
{name:"jade",age:22,sex:0},
{name:"lrving",age:23,sex:1},
],
a:{
list:['足球','籃球','排球','棒球','網球','羽毛球','乒乓球']
}
};
var html = template('test',data);
document.getElementById('app').innerHTML = html;
</script>
</body>
</html>5.自定義函式
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>自定義函式</title>
<meta charset="UTF-8">
<script type="text/javascript" src="../../static/template.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/html" id="test">
{{if isAdmin}}
姓名：<span>{{admin.name}}</span><br>
性別：<span>{{getSex(admin.sex)}}</span><br>
職務：<span>{{admin.position}}</span>
{{else}}
姓名：<span>{{staff.name}}</span><br>
性別：<span>{{getSex(staff.sex)}}</span><br>
職務：<span>{{staff.position}}</span>
{{/if}}
</script>
<script type="text/javascript">
template.helper('getSex',function (sex) {
if(1 == sex){
return '男';
}else if(0 == sex){
return '女';
}
})
data = {
isAdmin: true,
admin: {name: '張三', sex: '1', position: "部門經理"},
staff: {name: '李四', sex: '0', position: "普通員工"}
}
var html = template('test',data);
document.getElementById("app").innerHTML = html;
</script>
</body>
</html>五、總結
這裡只是簡單的介紹了ArtTemplate的基本用法，更深入的用法，希望各位在使用的過程中，進行深入的學習，下一篇文章，會介紹阿里開發的javaScript引擎模板Velocity。