本人有些时候就是有强迫症,最近编写一个纯html的前端,使用 doT.js 模版框架,发现可以自定义模版标签,于是自己修改了一下标签格式,终于不用忍受双大括号 {{}} 了,自定义标签直接使用 {} 单双括号,当前项目是纯静态单页,没有和其他语言混淆,不怕冲突,就满足自己一下下吧!
自定义配置:
evaluate: /\{\{([\s\S]+?(\}?)+)\}\}/g,
interpolate: /\{\$([\s\S]+?)\}/g,
encode: /\{!([\s\S]+?)\}/g,
use: /\{#([\s\S]+?)\}/g,
useParams: /(^|[^\w$])def(?:\.|\[[\'\"])([\w$\.]+)(?:[\'\"]\])?\s*\:\s*([\w$\.]+|\"[^\"]+\"|\'[^\']+\'|\{[^\}]+\})/g,
define: /\{##\s*([\w\.$]+)\s*(\:|=)([\s\S]+?)#\}/g,
defineParams: /^\s*([\w$]+):([\s\S]+)/,
conditional: /\{\/?(if|el)(seif|se)?\s*([\s\S]*?)\s*\}/g,
iterate: /\{\/?each\s*(?:\}|([\s\S]+?)\s*(?:\:\s*([\w$]+))?\s*(?:\:\s*([\w$]+))?\s*\})/g,
varname: "data",
strip: true,
append: true,
selfcontained: false,
doNotSkipEncoded: false
1、对象值输出
<span>{$v.name}</span>
2、判断语句
{if data.gender=='m'}
先生
{elseif data.gender=='w'}
女士
{else}
保密
{/if}
3、循环
{each data.users}
<span>{$v.name}</span>
{/each}
指定 value 和 key 变量值
{each data.users:value:key}
<span>{$key}:{$value.name}</span>
{/each}
4、模版嵌套
{##def.showGender:
{if v.gender=='m'}
先生
{elseif v.gender=='w'}
女士
{else}
保密
{/if}
#}
<form class="userlist">
<ul>
{each it.users}
<li>
{$v.name} / {#def.showGender}
</li>
{/each}
</ul>
</form>
这样写是不是清爽多了!