淺談模板引擎之artTemplate
阿新 • • 發佈：2019-02-07
對於前端開發者來說，有一個綁資料的模板是多麼的幸福，不用我多說大家也知道，終於不用在js中一個個字串拼接一大推元素資料啥的，可以省下我們很多時間。來給大家推薦一款模板引擎artTemplate，會推薦這款模板引擎最主要還是他輕量級，程式碼簡潔，好用，一個template.js大概也才幾kb左右。
each迴圈
<script id="test1" type="text/html">
<h3>{{title}}</h3>
<!--each迴圈例1-->
<ul>
{{each list as value **解析：**each迴圈有兩種方法，一種是例1中的{{each list as value i}}，其中list表示要迴圈遍歷的陣列，value表示陣列中的某個元素，i表示當前的索引；另一種是例2中的 {{each list}}寫一個要遍歷的陣列就夠了，而{{index}}表示當前索引，{{ value}}表示當前迴圈的某個元素，這兩個變數是固定的名稱
if條件判斷
<script id="test2" type="text/html">{{each list}}{{if ($index + 1)%2 == 1}}
<div>奇數列{{$index + 1}}: {{$value}}</div>
{{else}}
<div>偶數列{{$index + 1}}: {{$value}}</div>
{{/if}}{{/each}}</script>**解析：**if判斷跟平時普通的判斷一樣，但是要注意在這裡面要有始有終，有{{if}}就得有對應的{{/if}}，有{{each}}就得有對應的{{/each}}
這些模板都是建立在script元素中，但是此時script的type要是type=”text/html”，然後在js指令碼中弄資料，程式碼如下：
<script>
var data = {
title: '六大明星熱度排行',
list: ['趙麗穎', '林更新', '劉詩詩', '鄭爽', '楊冪', '鹿晗']
};
// 綁資料到test1模板中
var html = template('test1', data);
// 在html中顯示模板test1
document.getElementById('content1').innerHTML = html;
// 綁資料到test2模板中
var html = template('test2', data);
// 在html中顯示模板test2
document.getElementById('content2').innerHTML = html;
</script>模板跟js中資料都繫結好了，一定要記得在html中新增元素來繫結模板，全部程式碼如下：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>templateJS模板引擎</title>
<script src="js/template.js"></script>
</head>
<body>
<div id="content1"></div>
<div id="content2"></div>
<script id="test1" type="text/html">
<h3>{{title}}</h3>
<!--each迴圈例1-->
<ul>
{{each list as value i}}
<li>{{i + 1}} ：{{value}}{{/each}}
</ul>
<!--each迴圈例2-->
{{each list}}
<div>{{$index + 1}}: {{$value}}</div>
{{/each}}</script>
<script id="test2" type="text/html">{{each list}}{{if ($index + 1)%2 == 1}}
<div>奇數列{{$index + 1}}: {{$value}}</div>
{{else}}
<div>偶數列{{$index + 1}}: {{$value}}</div>
{{/if}}{{/each}}</script>
<script>
var data = {
title: '六大明星熱度排行',
list: ['趙麗穎', '林更新', '劉詩詩', '鄭爽', '楊冪', '鹿晗']
};
// 綁資料到test1模板中
var html = template('test1', data);
// 在html中顯示模板test1
document.getElementById('content1').innerHTML = html;
// 綁資料到test2模板中
var html = template('test2', data);
// 在html中顯示模板test2
document.getElementById('content2').innerHTML = html;
</script>
</div>
</body>
<html>