前端模板引擎artTemplate---高效能JavaScript模板引擎
阿新 • • 發佈：2019-01-30
關於artTemplate模板引擎的詳細原理請移步高效能JavaScript模板引擎原理解析，本文只探討如何使用。初學前端的人一般對於繫結資料都是使用原生js或者jquery來拼接字串，此為hardcode，而且拼接的過程很頭疼，什麼單引號雙引號，符號嵌入多了就頭暈眼花容易出錯，如果會除錯的話可以看到渲染模板的效率也很低下。本文將介紹一種新的利用模板引擎來渲染資料的方法。
（1）artTemplate基礎使用方法
一：簡潔語法版
<!DOCTYPE html>
<html>
<head>
<title>demo1</title 二：原生語法版
原生語法就是定義模板的js格式不一樣，有點像jsp的語法，不過我個人建議使用簡潔版，以為沒有這麼多的符號，方便哈。
<script id="test" type="text/html">
<%if(isAdmin){%>
<% for(var i=0; i<list.length; i++){%>
<div><%=i%>:<%=list[i]%></div>
<%}%>
<%}else{%>
<div>沒有結果！</div>
<%}%>
</script>（2）artTemplate模板定義方式
一：javascript定義html模板
這種方法如上<script id="test" type="text/html"> 這裡的type必須為”text/html”, 必須定義id。
二：用變數的形式儲存模板
<!DOCTYPE html>
<html>
<head>
<title>demo2</title>
<script type="text/javascript" src="js/template-web.js"></script>
</head>
<body>
<div id="content"></div>
<script>
var source = '<ul>'
+ '{{each list value i}}'
+ '<li>索引 {{i + 1}} ：{{value}}</li>'
+ '{{/each}}'
+ '</ul>';
var render = template.compile(source);
var html = render({
list: ['攝影', '電影', '民謠', '旅行', '吉他']
});
document.getElementById('content').innerHTML = html;
</script>
</body>
</html>這裡又出現了討厭的字串拼接，所以我又不喜歡了，還是建議用第一種方式。
（3）ajax結合artTemplate模板
假設可以通過/test.php 獲取json資料，資料如下：
{
result:[
{
id:1,
name: 'zhangsan'
},
{
id:2,
name: 'lisi'
},
],
error_code:"200"
}需要資料繫結到html頁面:
<div id="content"><div>javascript定義模板：
<script id="search" type="text/html">
<ul>
{{each result value i}}
<li>name{{i+1}}：{{value.name}}</li>
{{/each}}
</ul>
</script>ajax請求資料的方式為：
$.ajax({
type: 'post',
url:'/test.php',
success: function(res){
var result = res.result;
var $html = template("search",result);
$("#content").html($html);
}
});以下為基礎語法：
變數
標準語法{{set temp = data.sub.content}}
原生語法<% var temp = data.sub.content; %>
自定義過濾器filter
註冊過濾器
template.defaults.imports.dateFormat = function(date, format){/*[code..]*/};
template.defaults.imports.timestamp = function(value){return value * 1000};標準語法：
{{date | timestamp | dateFormat 'yyyy-MM-dd hh:mm:ss'}}原生語法：
<%= $imports.dateFormat($imports.timestamp(date), 'yyyy-MM-dd hh:mm:ss') %>子模板
標準語法：
{{include './header.art'}}{{include './header.art' data}}原生語法：
<% include('./header.art') %>
<% include('./header.art', data) %>模板繼承
標準語法：
{{extend './layout.art'}}
{{block 'head'}} ... {{/block}}原生語法：
<% extend('./layout.art') %>
<% block('head', function(){ %> ... <% }) %>模板繼承允許你構建一個包含你站點共同元素的基本模板“骨架”。範例：
<!--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 後，將自動應用佈局骨架。