mustache语法

男娘i 2023-05-22 06:55 18阅读 0赞

今天在自学vue时，看到mastache插值，并不是很明白，于是上网搜了一下，了解到是一款前端模板引擎。

古人学问无遗力，少壮工夫老始成。纸上得来终觉浅，绝知此事要躬行。

mustache 模板，用于构造html页面内容。在实际工作中，当同一个模板中想要调用不同的函数来渲染画面，在已经自定义好了的前提下，可以在渲染页面时对传入的参数进行手动判断。【在不好判断的情况下，我们可以通过改变传入参数来进行判断】

Mustache 的模板语法

1.  `{ {data}}`
2.  `{ {#data}} { {/data}}`
3.  `{ {^data}} { {/data}}`
4.  `{ {.}}`
5.  `{ {<partials}}`
6.  `{ { {data}}}`
7.  `{ {!comments}}`

借助 Demo 来对语法做简单的介绍：

1.  `...`
2.  `<script type="text/javascript" src="mustache.js"></script>`
3.  `<script type="text/javascript">`
4.  `var data = {`
5.  `"name": " xiaohua ",`
6.  `"msg": {`
7.  `"sex": " female ",`
8.  `"age": " 22 ",`
9.  `"hobit": " reading "`
10. `},`
11. `"subject": ["Ch","En","Math","physics"]`
12. `}`
13.  
14. `var tpl = '<p> { {name}}</p>';`
15. `var html = Mustache.render(tpl, data);`
16.  
17. `　alert ( html );`
18. `</script>`
19. `...`

### \{ \{data\}\} ###

`{ {}}`就是 Mustache 的标示符，花括号里的 data 表示键名，这句的作用是直接输出与键名匹配的键值，例如：

1.  `1 var tpl = '{ {name}}';`
2.  `2 var html = Mustache.render(tpl, data);`
3.  `3 //输出：`
4.  `4 xiaohua`

### \{ \{\#data\}\} \{ \{/data\}\} ###

以`#`开始、以`/`结束表示区块，它会根据当前上下文中的键值来对区块进行一次或多次渲染，例如改写下 Demo 中的 tpl：

1.  `1 var tpl = '{ {#msg}} <p>{ {sex}},{ {age}},{ {hobit}}</p> { {/msg}}';`
2.  `2 var html = Mustache.render(tpl, data);`
3.  `3`
4.  `4 //输出：`
5.  `5 <p> female, 22, reading</p>`

注意：如果`{ {#data}} { {/data}}`中的 data 值为 null, undefined, false；则不渲染输出任何内容。

### \{ \{^data\}\} \{ \{/data\}\} ###

该语法与`{ {#data}} { {/data}}`类似，不同在于它是当 data值为 null, undefined, false 时才渲染输出该区块内容。

1.  `1 var tpl = { {^nothing}}没找到 nothing 键名就会渲染这段{ {/nothing}};`
2.  `2 var html = Mustache.render(tpl, data);`
3.  `3 //输出：`
4.  `4 没找到 nothing 键名就会渲染这段`

### \{ \{.\}\} ###

`{ {.}}`表示枚举，可以循环输出整个数组，例如：

1.  `1 var tpl = '{ {#subject}} <p>{ {.}}</p> { {/subject}}';`
2.  `2 var html = Mustache.render(tpl, data);`
3.  `3 //输出：`
4.  `4 <p>Ch</p> <p>En</p> <p>Math</p> <p>physics</p>`

### \{ \{>partials\}\} ###

以`>`开始表示子模块，如\{ \{> msg\}\}；当结构比较复杂时，我们可以使用该语法将复杂的结构拆分成几个小的子模块，例如：

1.  `var tpl = "<h1>{ {namme}}</h1> <ul>{ {>msg}}</ul>"`
2.  `var partials = {msg: "{ {#msg}}<li>{ {sex}}</li><li>{ {age}}</li><li>{ {hobit}}</li>{ {/msg}`
3.  `var html = Mustache.render(tpl, data, partials);`
4.  `//输出：`
5.  `<h1>xiaohua</h1>`
6.  `<ul>`
7.  `<li>female</li>`
8.  `<li>22</li>`
9.  `<li>reading</li>`
10. `</ul>`

### \{ \{ \{data\}\}\} ###

`{ {data}}`输出会将等特殊字符转译，如果想保持内容原样输出可以使用`{ { {}}}`，例如：

1.  `1 var tpl = '{ {#msg}} <p>{ { {age}}}</p> { {/msg}}'`
2.  `2 //输出：`
3.  `3 <p>22</p>`

### \{ \{!comments\}\} ###

`!`表示注释，注释后不会渲染输出任何内容。

1.  `1 { {!这里是注释}}`
2.  `2 //输出：`

在工作中，如果页面上的内容是从后台获取数据并渲染到页面上时，我们就可以使用mustache模板了，值得注意的是，render的数据一定要与键名相符合。