1. 概述
layui是一款非常流行的前端UI框架，而其模板引擎是layui的重要组成部分之一。使用layui的模板引擎可以方便地将数据和模板结合起来，生成页面中需要展示的内容。
在本文中，我们将会详细讲解layui模板引擎的使用，包括模板语法、渲染方式、常用API等。同时，我们还会针对实际场景，给出实际的代码案例，帮助大家更好地理解layui模板引擎的使用方法。
2. 模板语法
layui模板引擎采用了一种类似于嵌入式JavaScript的语法，允许在HTML模板中嵌入一些特定的代码块，通过这些代码块来动态生成页面内容。在layui模板引擎中，我们可以使用以下三种语法：
2.1 简单语法
layui模板引擎中最简单的语法是使用{{ }}符号包裹一段JavaScript表达式：
{{ 表达式 }}例如，我们可以使用以下的方式在HTML模板中输出数据：
<div>
<p>姓名：{{ data.name }}</p>
<p>年龄：{{ data.age }}</p>
</div>
在这段代码中，我们使用{{ }}符号包围了JavaScript表达式data.name和data.age。这些表达式将会在页面加载时执行并动态渲染到HTML模板中
2.2 条件语句
layui模板引擎还支持使用条件语句控制页面内容的显示：
{% if 表达式 %} ... {% else %} ... {% endif %}其中，表达式应该是一个JavaScript中的布尔表达式。当表达式的值为真时，将会执行if代码块中的内容。否则，将会执行else代码块中的内容。简单的例子如下：
{% if data.age >= 18 %}
<p>已成年</p>
{% else %}
<p>未成年</p>
{% endif %}
在上面的例子中，我们使用表达式data.age >= 18来判断一个人是否已经成年。如果表达式返回true，则输出<p>已成年</p>；否则输出<p>未成年</p>。
2.3 循环语句
在layui模板引擎中也可以使用循环语句来动态生成页面内容：
{% for item in list %} ... {% endfor %}其中，item是可变变量，表示循环中当前的值。list则应该是一个JavaScript数组。在循环语句中，我们可以使用$item来访问当前值，并通过{{ }}符号将值插入到HTML模板中。例如：
{% for item in list %}
<p>{{ item }}</p>
{% endfor %}
在这个例子中，我们在模板中循环输出了数组list中的每个元素。
3. 渲染方式
layui模板引擎支持两种渲染方式：静态渲染和动态渲染。
3.1 静态渲染
静态渲染是指在页面加载时，模板引擎会将HTML模板和数据一起渲染成最终的页面。这种渲染方式可以提高页面的性能，但同时也增加了服务器的负担。
我们可以使用以下的方法来实现静态渲染：
<script id="tpl-demo" type="text/html">
<div>
<p>姓名：{{ d.name }}</p>
<p>性别：{{ d.gender }}</p>
</div>
</script>
<div id="demo"></div>
<script>
layui.use('laytpl', function(){
var laytpl = layui.laytpl;
var data = {
name: '小明',
gender: '男'
};
var tplDemo = document.getElementById('tpl-demo').innerHTML;
laytpl(tplDemo).render(data, function(html){
document.getElementById('demo').innerHTML = html;
});
});
</script>
在这个例子中，我们定义了一个id为tpl-demo的script标签，该标签包含了我们的HTML模板。我们同时设置了一个id为demo的div标签，用于动态渲染模板。在js代码中，我们首先获取了laytpl对象，然后将数据和模板传递给laytpl对象的render方法。这个方法将会返回渲染后的HTML字符串，我们将这个字符串设置为demo元素的innerHTML，即可实现静态渲染。
3.2 动态渲染
动态渲染是指在页面加载完毕后，通过JavaScript脚本动态渲染页面。这种渲染方式可以减轻服务器的负担，但同时也会增加页面的响应时间。
我们可以使用以下的方法来实现动态渲染：
<script id="tpl-demo" type="text/html">
<div>
<p>姓名：{{ d.name }}</p>
<p>性别：{{ d.gender }}</p>
</div>
</script>
<button id="demo">点我渲染</button>
<script>
layui.use('laytpl', function(){
var laytpl = layui.laytpl;
var data = {
name: '小明',
gender: '男'
};
var tplDemo = document.getElementById('tpl-demo').innerHTML;
document.getElementById('demo').onclick = function(){
laytpl(tplDemo).render(data, function(html){
layer.open({
type: 1,
content: html,
area: ['300px','200px']
});
});
};
});
</script>
在这个例子中，我们同样使用了id为tpl-demo的script标签和HTML模板。不同的是，我们设置了一个按钮，当按钮被点击时，调用laytpl对象的render方法，并将渲染后的HTML字符串放入layer.open方法中进行动态渲染。
4. 常用API
4.1 compile()
compile方法用于编译模板。该方法的返回值是一个模板函数，我们可以通过调用函数并将数据作为参数，来渲染模板。
var tplDemo = document.getElementById('tpl-demo').innerHTML;
var tplFn = layui.laytpl.compile(tplDemo);
var html = tplFn(data);
4.2 render()
render方法用于将数据和模板一起编译渲染，并将渲染后的HTML字符串返回，该方法接收两个参数：tpl和data。
var tplDemo = document.getElementById('tpl-demo').innerHTML;
var html = layui.laytpl.render(tplDemo, data);
4.3 view()
view方法用于将渲染后的HTML字符串放入指定的HTML元素中。该方法接收三个参数：id、data和callback。
var tplDemo = document.getElementById('tpl-demo').innerHTML;
var html = layui.laytpl.render(tplDemo, data);
layui.laytpl.view('demo', html);
4.4 parse()
parse方法用于解析模板字符串并返回一个包含AST节点的数组。该方法可以用于二次开发，用于直接处理模板中的AST节点。例如：
var tplDemo = document.getElementById('tpl-demo').innerHTML;
var ast = layui.laytpl.parse(tplDemo);
5. 实战案例
5.1 使用条件语句
实现一个根据用户不同身份显示不同导航的功能，代码如下：
<script id="tpl-nav" type="text/html">
{% if isAdmin %}
<a href="/admin">管理中心</a>
{% endif %}
<a href="/profile">我的档案</a>
<a href="/messages">我的消息</a>
</script>
layui.use('laytpl', function(){
var laytpl = layui.laytpl;
var isAdmin = true;
var tplNav = document.getElementById('tpl-nav').innerHTML;
laytpl(tplNav).render({isAdmin: isAdmin}, function(html){
document.getElementById('nav').innerHTML = html;
});
});
在这个例子中，我们定义了一个id为tpl-nav的script标签，该标签包含了我们的HTML模板和isAdmin变量。在JS中，我们使用laytpl和render方法将isAdmin的值传递给模板，然后将渲染后的HTML字符串放置到id为nav的元素中。
5.2 使用循环语句
实现一个列表展示的功能，代码如下：
<script id="tpl-list" type="text/html">
{% for item in list %}
<div>
<p>姓名：{{ item.name }}</p>
<p>年龄：{{ item.age }}</p>
</div>
{% endfor %}
</script>
layui.use('laytpl', function(){
var laytpl = layui.laytpl;
var data = [
{name: '小明', age: 18},
{name: '小红', age: 20},
{name: '小刚', age: 22}
];
var tplList = document.getElementById('tpl-list').innerHTML;
laytpl(tplList).render({list: data}, function(html){
document.getElementById('list').innerHTML = html;
});
});
上面的代码实现了一个列表展示功能。我们使用到了laytpl和render方法，并通过for循环在HTML模板中动态输出列表。同样地，我们也将最终渲染出的HTML字符串放入了list元素中进行渲染。
6. 总结
到这里，我们已经学完了layui模板引擎的使用。通过本文的学习，我们可以掌握layui模板引擎的基本语法和渲染方式。同时，我们也在实战案例中看到了layui模板引擎在实际应用中的灵活性和高效性。