layui - 模板引擎

模块： layui.use('laytpl', function(){ var laytpl = layui.laytpl; }

参考： https://www.layui/doc/modules/laytpl.html

模板语法：

//   除函数外，模板以分隔符 {{# 开始，并以 }} 结束

//   {{ d.field }}   输出一个普通字段 不转义html (html仍有效)，如：
<div>{{d.content}}</div>

//   {{= d.field }}   输出一个普通字段 并转义html (html标签以字符形式输出)，如：
<div>{{= d.title}}</div>

//   {{# JS表达式 }}   JS语句，一般用于逻辑处理，注：输出函数用 {{fn()}} 非 {{#fn()}} ，如：
{{# 
  var fn = function(){
    return "2020"
  },
}}
{{# if(true){ }}
  开始日期：{{ fn() }}
{{# }else{ }}
  已截止
{{# } }}

//   {{! template !}}   对指定模板区域过滤 即不解析该区域模板，layui2.1.6新增，如：
<div>{{! 不解析此处模板 !}}</div>


//   当分隔符 {{}} 与其他模板(一般是服务器端模板)冲突时，可以重新定义分隔符：
laytpl.config{{
  open:'<%',
  close:'%>'
}}
laytpl([
  '<%# var type = "装修"; %>' //JS 表达式
  ,'<% d.name %>是一种<% type %>石料。'
].join('')).render({
  name: '大理石'
}, function(string){
  console.log(string); //大理石是一种装修石料
});

//   上述即格式：  laytpl(/*模板*/).render({/*数据*/},function(){/*渲染或其他操作*/});

简单示例：

<!--  视图  -->
<div id="laytpl-index"></div>

<script>
  layui.use(['laytpl'], function() {
    var laytpl = layui.laytpl;
    //  模板与渲染
    laytpl(
      '<div>{{= d.title}}<div>').render({
      title: '012</br>123'
      }, function(html) {
        document.getElementById('laytpl-index').innerHTML = html
      });
    })
</script>


<!--  可以将模板写在单独的script标签内，以id标识(可以供其他想要绑定模板的元素使用) 如：  -->
<table>
  <thead>
    <!-- templet参数详见layui数据表格-表头参数 -->
    <tr><th lay-data="{field:'detail', width:300, templet:'#tpl-index'}">详细</th>
</table>
<!-- script标签可以放在任意位置 -->
<script id="tpl-index" type="text/html">
  {{# var d={title: '111',name:'222'};if(true){ }}
    <div>more{{d.title}}</div>
  {{# } }}
</script>

laytpl 应用在 layui 的很多模块中，如：layim、table 等。
实际使用会与更多内容结合，将更复杂，但在传统意义的前端模板引擎已经变得不再流行的当下 laytpl 仍然可以发挥一定作用。