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

~~~

传统方式渲染页面

$(function(){

$.getJSON("{:url('tools/template')}", function(res){

var _html = '';

$("#title").text(res.msg);

$.each(res.data, function(k, v){

`_html += '

车牌： 苏' + v.code + ', 城市： ' + v.name;`

});

$("#content").html(_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 += '

车牌： 苏' + v.code + ', 城市： ' + v.name;

~~~

拼装方式，会随着结构复杂度的上升，而使我们的代码拼接难度上升，容易出错。如果后期我们要在这个结构上添加一些标签，比如我要在 li 标签内添加一个 span 标签等结构时候，由于我们拼接的是字符串，对我们的维护也造成了很大的麻烦。那么，我们来看一下，通过 laytpl 如何解决这个实际问题。

## 下载 laytpl

同样的，进入 laytpl 官网[laytpl 官网](http://www.layui.com/laytpl/)，点击下载。解压出一个 laytpl 的文件夹，把他放到 static 下面。


## 如何去使用它

接口依旧是访问 template ，因此我直接在 template.html 中添加测试代码进行展示。

~~~

{{ d.msg }}

{{# for(var i = 0, len = d.data.length; i < len; i++){ }}

车牌： 苏{{ d.data[i].code }}, 城市： {{ d.data[i].name }}

{{# } }}

~~~

渲染到页面中的数据，需要一个容器。因此，我在 页面加了一个 div 来放这些数据。

~~~

~~~

然后给我们需要渲染的模板 加上一个包住模板 html

~~~

~~~

被这个标签包住的 html 不会被直接解析。注意这个 id 的标识，不同的 模板起一个 有意义的 id 名称来识别。模板中的变量用

~~~

{{ }}

~~~

来标识就可以了。里面的变量的写法，依旧是 js 的语法。让我们来看看，如何传入需要渲染的数据

~~~

$(function(){

$.getJSON("{:url('tools/template')}", function(res){

var _html = '';

$("#title").text(res.msg);

$.each(res.data, function(k, v){

_html += '

车牌： 苏' + 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 完整代码如下：

~~~

传统方式渲染页面

{{ d.msg }}

{{# for(var i = 0, len = d.data.length; i < len; i++){ }}

车牌： 苏{{ d.data[i].code }}, 城市： {{ d.data[i].name }}

{{# } }}

$(function(){

$.getJSON("{:url('tools/template')}", function(res){

var _html = '';

$("#title").text(res.msg);

$.each(res.data, function(k, v){

_html += '

车牌： 苏' + 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;

});

});

});

~~~

效果如下：