wet-template简易服务器端 WEB 模板引擎
wet 名称来缩写于 WEb Template。
wet 是一个基于 ES6 的简易服务器端 WEB 模板引擎，完全没有第三方依赖。
安装
Github: https://github.com/hyjiacan/wet
Gitee: https://gitee.com/hyjiacan/wet
npm: https://www.npmjs.com/package/@hyjiacan/wet
npm i @hyjiacan/wet
模板用法
wet 模板基于 html 语法，模板语言也与常用的 js 写法一致。
demo.html
<div> <ul> <t-for on="item of list"> <li>{{item}}</li> </t-for> <t-for on="item in set"> <li> {{item.key}}: {{item.value}} <t-with xx="item.value.x.y"> <span>{{xx.z}}</span> </t-with> </li> </t-for> </ul> <t-if on="visible"> condition is true </t-if> <t-else> condition is false </t-else> <t-tree on="treeData as item"> <div> {{item.data}} <div> <t-children /> </div> </div> </t-tree> <t-include file="../common/footer.html" /> </div>
const context = {
list: [1, 2, 3],
set: {
a: 1,
b: {
x: {
y: {z: 5}
}
},
c: 3
},
visible: false
}
wet.render('/path/to/demo.html', context, {cache: true})
通过调用 wet.render(template, context, options?) 执行模板的渲染，此函数会返回渲染后的HTML字符串。
-
template模板文件，可以是相对路径或绝对路径 -
context模板的上下文，为模板渲染提供数据。必须是对象，不能是数组 -
options可选的选项，目前只有一个字段cache，用于指示是否缓存模板文件。注：此缓存指缓存模板文件的DOM结构，并不是渲染结果
t-for
此标签用于遍历数据集。
for..of 遍历数组
<t-for on="item of array" step="1"> <span>{{item}}</span> </t-for>
step 是步长，默认为 1
也可以写作
<t-for on="item, index of array"> <span>{{index}}: {{item}}</span> </t-for>
index 为数组的索引，从 0 开始
另外， for...of 也可以直接根据指定数值进行循环
<t-for on="item of 10"> <span>{{item}}</span> </t-for>
或
<t-for on="item of 1-10"> <span>{{item}}</span> </t-for>
1-10 表示从 1 到 10，当起始位置为 0 时 0-10 ，可以省略为：10。 - 两侧不能有空白。仅支持整数。
范围始终包含边界值，如：
-
1-10: 1, 2, ..., 9, 10 -
0-10: 0, 1, ..., 9, 10 -
10: 0, 1, ..., 9, 10 -
9: 0, 1, ..., 9
array暂不支持数组字面量
for..in 遍历集合
<t-for on="item in object"> <span>{{item.key}}: {{item.value}}</span> </t-for>
也可以写作
<t-for on="value, key in object"> <span>{{item.key}}: {{item.value}}</span> </t-for>
object暂不支持对象字面量
t-if
条件分支: <t-if on="condition">，condition 应该是一个条件表达式
t-elif
条件分支 <t-elif on="condition">，condition 应该是一个条件表达式
t-else
其它条件分支: <t-else>
t-with
设置作用域。
<t-with varName="a.b.c"> {{varName}} </t-with>
在此范围内，varName 等于 a.b.c 的值，varName 应该是一个合法的标识符。
此标签一般用于简写层次比较深的对象引用。
t-tree / t-children
渲染树结构
<t-tree on="tree as item"> <div>{{item.title}}</div> <div>{{item.description}}</div> <div> <t-children /> </div> </t-tree>
-
tree是上下文中的树结构变量，其应该是一个数组(array, 以支持多个根结点) -
item是每个节点在此作用域内的变量名称
另外还有一个配合使用的标签 <t-children field="children" />，此标签标记子节点应该渲染的位置
其 field 属性指定了子元素的字段名称，默认值为 children，即当字段名称为 children 时，属性 field 可省略。 t-children 的子元素会被直接丢弃。
t-html
提供直接渲染HTML的方法，当不使用此标签时，表达式的输出会被转义。
例：
<t-html>{{'<p></p>'}}</t-html>，输出 <p></p>。
而在不使用 t-html 时: {{'<p></p>'}}，输出 <p></p>
t-include
包含功能支持 <t-include file="./another.html" />
其属性 file 是一个相对文件路径，相对于当前文件的目录。
在 t-include 下，只允许出现 t-fill 作为其子项。
组合使用 t-include/t-fill/t-hole 可以实现布局模板的功能。
t-hole/t-fill
t-hole 在模板文件中预留 hole，以在模板文件被 include 时进行填充。
a.html
<div> <t-hole name="title"> <div>默认内容</div> </t-hole> <t-hole></t-hole> </div>
在上面的模板文件中，定义了两个 hole。一个具名的 title: <t-hole name="title">，另一个是匿名的: <t-hole>
不论是具名还是匿名，相同名称只能声明一次。
b.html
<t-include file="a.html"> <t-fill>填充匿名 hole</t-fill> <t-fill name="title">填充具名 hole: title</t-fill> </t-include>
不论是具名还是匿名，相同名称只能填充一次。
{{}}
表达式支持: {{var}}, {{obj.prop.value}}, `{{a - b}}
如果想要原样输出{{/}}符号，那么写作 {!{/}!}，此时不会被解析，: {{/}}。