laytpl是一款非常輕量的JavaScript模板引擎，性能也還可以。使用 JavaScript模板引擎 會讓我們的頁面渲染更加的高效和便捷。
來看一下，傳統的方式如何渲染頁面。我們在 Tools.php 中新建一個 方法 template
~~~
// 模板渲染接口
public function template()
{
if(request()->isAjax()){
$cards =[
['code' => 'A', 'name' => '南京'],
['code' => 'B', 'name' => '無錫'],
['code' => 'C', 'name' => '徐州'],
['code' => 'D', 'name' => '常州'],
['code' => 'E', 'name' => '蘇州'],
['code' => 'F', 'name' => '南通'],
['code' => 'G', 'name' => '連云港'],
['code' => 'H', 'name' => '淮安'],
['code' => 'J', 'name' => '鹽城'],
['code' => 'K', 'name' => '揚州'],
['code' => 'L', 'name' => '鎮江'],
['code' => 'M', 'name' => '泰州'],
['code' => 'N', 'name' => '宿遷']
];
return json(['code' => 1, 'data' => $cards, 'msg' => '江蘇各市車牌號']);
}
return $this->fetch();
}
~~~
然后我們在 view\\tools 中新建一個 template.html
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>傳統方式渲染頁面</title>
</head>
<body>
<span id="title"></span>
<ul id="content"></ul>
<script src="/static/js/jquery.min.js?v=2.1.4"></script>
<script>
$(function(){
$.getJSON("{:url('tools/template')}", function(res){
var _html = '';
$("#title").text(res.msg);
$.each(res.data, function(k, v){
`_html += '<li> 車牌： 蘇' + v.code + ', 城市： ' + v.name;`
});
$("#content").html(_html);
});
});
</script>
</body>
</html>
~~~
然后我們訪問[http://www.phper.com/index/tools/template](http://www.phper.com/index/tools/template)可見，這樣的頁面。
江蘇各市車牌號
* 車牌： 蘇A, 城市： 南京
* 車牌： 蘇B, 城市： 無錫
* 車牌： 蘇C, 城市： 徐州
* 車牌： 蘇D, 城市： 常州
* 車牌： 蘇E, 城市： 蘇州
* 車牌： 蘇F, 城市： 南通
* 車牌： 蘇G, 城市： 連云港
* 車牌： 蘇H, 城市： 淮安
* 車牌： 蘇J, 城市： 鹽城
* 車牌： 蘇K, 城市： 揚州
* 車牌： 蘇L, 城市： 鎮江
* 車牌： 蘇M, 城市： 泰州
* 車牌： 蘇N, 城市： 宿遷
相信很多人都是這么取處理 返回的 json 數據的。顯然本案例展示的結構很簡單，一個 li 標簽就可以了。實際的工作中，可能會遇到比這復雜 N倍 的dom結構。我們還是按照這樣的
~~~
_html += '<li> 車牌： 蘇' + v.code + ', 城市： ' + v.name;
~~~
拼裝方式，會隨著結構復雜度的上升，而使我們的代碼拼接難度上升，容易出錯。如果后期我們要在這個結構上添加一些標簽，比如我要在 li 標簽內添加一個 span 標簽等結構時候，由于我們拼接的是字符串，對我們的維護也造成了很大的麻煩。那么，我們來看一下，通過 laytpl 如何解決這個實際問題。
## 下載 laytpl
同樣的，進入 laytpl 官網[laytpl 官網](http://www.layui.com/laytpl/)，點擊下載。解壓出一個 laytpl 的文件夾，把他放到 static 下面。
## 如何去使用它
接口依舊是訪問 template ，因此我直接在 template.html 中添加測試代碼進行展示。
~~~
<div id="view"></div> <!-- laytpl渲染的數據展示區域 -->
<!-- 需要渲染的模板結構 -->
<script id="demo" type="text/html">
<span>{{ d.msg }}</span>
<ul>
{{# for(var i = 0, len = d.data.length; i < len; i++){ }}
<li>車牌： 蘇{{ d.data[i].code }}, 城市： {{ d.data[i].name }}</li>
{{# } }}
</ul>
</script>
<!-- 需要渲染的模板結構 -->
~~~
渲染到頁面中的數據，需要一個容器。因此，我在 頁面加了一個 div 來放這些數據。
~~~
<div id="view"></div>
~~~
然后給我們需要渲染的模板 加上一個包住模板 html
~~~
<script id="demo" type="text/html"></script>
~~~
被這個標簽包住的 html 不會被直接解析。注意這個 id 的標識，不同的 模板起一個 有意義的 id 名稱來識別。模板中的變量用
~~~
{{ }}
~~~
來標識就可以了。里面的變量的寫法，依舊是 js 的語法。讓我們來看看，如何傳入需要渲染的數據
~~~
$(function(){
$.getJSON("{:url('tools/template')}", function(res){
var _html = '';
$("#title").text(res.msg);
$.each(res.data, function(k, v){
_html += '<li> 車牌： 蘇' + v.code + ', 城市： ' + v.name;
});
$("#content").html(_html);
// 通過 laytpl 進行渲染
var gettpl = document.getElementById('demo').innerHTML;
laytpl(gettpl).render(res, function(html){
document.getElementById('view').innerHTML = html;
});
});
~~~
我們直接把 返回的數據 res 通過 laytpl 進行渲染即可。 template.html 完整代碼如下：
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>傳統方式渲染頁面</title>
</head>
<body>
<span id="title"></span>
<ul id="content"></ul>
<div id="view"></div> <!-- laytpl渲染的數據展示區域 -->
<!-- 需要渲染的模板結構 -->
<script id="demo" type="text/html">
<span>{{ d.msg }}</span>
<ul>
{{# for(var i = 0, len = d.data.length; i < len; i++){ }}
<li>車牌： 蘇{{ d.data[i].code }}, 城市： {{ d.data[i].name }}</li>
{{# } }}
</ul>
</script>
<!-- 需要渲染的模板結構 -->
<script src="/static/js/jquery.min.js?v=2.1.4"></script>
<script src="/static/laytpl/laytpl.js"></script>
<script>
$(function(){
$.getJSON("{:url('tools/template')}", function(res){
var _html = '';
$("#title").text(res.msg);
$.each(res.data, function(k, v){
_html += '<li> 車牌： 蘇' + v.code + ', 城市： ' + v.name;
});
$("#content").html(_html);
// 通過 laytpl 進行渲染
var gettpl = document.getElementById('demo').innerHTML;
laytpl(gettpl).render(res, function(html){
document.getElementById('view').innerHTML = html;
});
});
});
</script>
</body>
</html>
~~~
效果如下：
