wet-template簡(jiǎn)易服務(wù)器端 WEB 模板引擎
wet 名稱來(lái)縮寫(xiě)于 WEb Template。
wet 是一個(gè)基于 ES6 的簡(jiǎn)易服務(wù)器端 WEB 模板引擎，完全沒(méi)有第三方依賴。
安裝
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 語(yǔ)法，模板語(yǔ)言也與常用的 js 寫(xiě)法一致。
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})
通過(guò)調(diào)用 wet.render(template, context, options?) 執(zhí)行模板的渲染，此函數(shù)會(huì)返回渲染后的HTML字符串。
-
template模板文件，可以是相對(duì)路徑或絕對(duì)路徑 -
context模板的上下文，為模板渲染提供數(shù)據(jù)。必須是對(duì)象，不能是數(shù)組 -
options可選的選項(xiàng)，目前只有一個(gè)字段cache，用于指示是否緩存模板文件。注：此緩存指緩存模板文件的DOM結(jié)構(gòu)，并不是渲染結(jié)果
t-for
此標(biāo)簽用于遍歷數(shù)據(jù)集。
for..of 遍歷數(shù)組
<t-for on="item of array" step="1"> <span>{{item}}</span> </t-for>
step 是步長(zhǎng)，默認(rèn)為 1
也可以寫(xiě)作
<t-for on="item, index of array"> <span>{{index}}: {{item}}</span> </t-for>
index 為數(shù)組的索引，從 0 開(kāi)始
另外， for...of 也可以直接根據(jù)指定數(shù)值進(jìn)行循環(huán)
<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，當(dāng)起始位置為 0 時(shí) 0-10 ，可以省略為：10。 - 兩側(cè)不能有空白。僅支持整數(shù)。
范圍始終包含邊界值，如：
-
1-10: 1, 2, ..., 9, 10 -
0-10: 0, 1, ..., 9, 10 -
10: 0, 1, ..., 9, 10 -
9: 0, 1, ..., 9
array暫不支持?jǐn)?shù)組字面量
for..in 遍歷集合
<t-for on="item in object"> <span>{{item.key}}: {{item.value}}</span> </t-for>
也可以寫(xiě)作
<t-for on="value, key in object"> <span>{{item.key}}: {{item.value}}</span> </t-for>
object暫不支持對(duì)象字面量
t-if
條件分支: <t-if on="condition">，condition 應(yīng)該是一個(gè)條件表達(dá)式
t-elif
條件分支 <t-elif on="condition">，condition 應(yīng)該是一個(gè)條件表達(dá)式
t-else
其它條件分支: <t-else>
t-with
設(shè)置作用域。
<t-with varName="a.b.c"> {{varName}} </t-with>
在此范圍內(nèi)，varName 等于 a.b.c 的值，varName 應(yīng)該是一個(gè)合法的標(biāo)識(shí)符。
此標(biāo)簽一般用于簡(jiǎn)寫(xiě)層次比較深的對(duì)象引用。
t-tree / t-children
渲染樹(shù)結(jié)構(gòu)
<t-tree on="tree as item"> <div>{{item.title}}</div> <div>{{item.description}}</div> <div> <t-children /> </div> </t-tree>
-
tree是上下文中的樹(shù)結(jié)構(gòu)變量，其應(yīng)該是一個(gè)數(shù)組(array, 以支持多個(gè)根結(jié)點(diǎn)) -
item是每個(gè)節(jié)點(diǎn)在此作用域內(nèi)的變量名稱
另外還有一個(gè)配合使用的標(biāo)簽 <t-children field="children" />，此標(biāo)簽標(biāo)記子節(jié)點(diǎn)應(yīng)該渲染的位置
其 field 屬性指定了子元素的字段名稱，默認(rèn)值為 children，即當(dāng)字段名稱為 children 時(shí)，屬性 field 可省略。 t-children 的子元素會(huì)被直接丟棄。
t-html
提供直接渲染HTML的方法，當(dāng)不使用此標(biāo)簽時(shí)，表達(dá)式的輸出會(huì)被轉(zhuǎn)義。
例：
<t-html>{{'<p></p>'}}</t-html>，輸出 <p></p>。
而在不使用 t-html 時(shí): {{'<p></p>'}}，輸出 <p></p>
t-include
包含功能支持 <t-include file="./another.html" />
其屬性 file 是一個(gè)相對(duì)文件路徑，相對(duì)于當(dāng)前文件的目錄。
在 t-include 下，只允許出現(xiàn) t-fill 作為其子項(xiàng)。
組合使用 t-include/t-fill/t-hole 可以實(shí)現(xiàn)布局模板的功能。
t-hole/t-fill
t-hole 在模板文件中預(yù)留 hole，以在模板文件被 include 時(shí)進(jìn)行填充。
a.html
<div> <t-hole name="title"> <div>默認(rèn)內(nèi)容</div> </t-hole> <t-hole></t-hole> </div>
在上面的模板文件中，定義了兩個(gè) hole。一個(gè)具名的 title: <t-hole name="title">，另一個(gè)是匿名的: <t-hole>
不論是具名還是匿名，相同名稱只能聲明一次。
b.html
<t-include file="a.html"> <t-fill>填充匿名 hole</t-fill> <t-fill name="title">填充具名 hole: title</t-fill> </t-include>
不論是具名還是匿名，相同名稱只能填充一次。
{{}}
表達(dá)式支持: {{var}}, {{obj.prop.value}}, `{{a - b}}
如果想要原樣輸出{{/}}符號(hào)，那么寫(xiě)作 {!{/}!}，此時(shí)不會(huì)被解析，: {{/}}。