layui模板的核心是 laytpl
layui 自带的模板引擎叫 laytpl，体积小、语法接近原生 JavaScript。它不依赖 DOM 操作，而是把模板字符串编译成函数，再传入数据执行，最终返回 HTML 字符串。理解这一点，就能明白为什么它比直接拼接字符串更安全、更易维护。
基础语法只有三种
输出变量用 {{ d.name }}，条件判断用 {{# if(d.age > 18){ }}，循环用 {{# layui.each(d.list, function(index, item){ }}。注意 {{# }} 里写的是 JS 语句，不输出内容；{{ }} 才输出值。两者混用时，括号要成对闭合，否则模板会报错。
动态表格与弹层中的模板实践
layui 的 table 组件支持 templet 属性，可以直接写函数或模板选择器。例如给状态字段做颜色区分：templet: function(d){ return d.status === 1 ? '启用' : '禁用'; }。如果模板较长，建议用 script 标签存放，再通过 laytpl 编译，避免字符串拼接混乱。
弹层内容同样可以套模板。先 laytpl(tplHtml).render(data, function(html){ layer.open({ content: html }); })，这样弹层里的列表、表单都能动态生成，比手动 createElement 简洁得多。
避开三个常见坑
第一，模板缓存。同一个模板重复编译会浪费性能，建议把编译后的函数存起来复用。第二，XSS 风险。laytpl 默认不转义 HTML，如果数据来自用户输入，输出时要用 layui.util.escape() 处理。第三，调试困难。模板报错往往只提示“模板解析错误”，可以先把模板里的 JS 语句单独拿到控制台跑一遍，定位问题更快。
性能与可维护性建议
模板不要写得太长。超过 50 行的模板建议拆成多个子模板，用 {{# include }} 或直接调函数引入。数据量大的列表，避免在模板里做复杂计算，提前在 JS 里处理好再传入。另外，layui 模板对空格和换行不敏感，但为了可读性，还是保持缩进一致。
如果项目已经用了 Vue 或 React，不必强行上 laytpl。它更适合传统多页应用、后台管理面板这类轻量场景。选对工具，比硬套模板更重要。
