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>
~~~
效果如下：
