Web模板引擎—Mustache
Web模板引擎——Mustache
Web 模板引擎是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,通常是标准的 HTML 文档。当然不同的开发语言有不同模板引擎,如 Javascript 下的 Hogan 、ASP 下的 aspTemplate、以及 PHP 下的 Smarty,这里主要介绍基于 Javascript 语言的模板引擎,目前流行有 Mustache、Hogan、doT.js、JsRender、Kendo UI Templates等,jsperf.com 上可以看到它们的性能对比,首先先介绍下 Mustache。
一、简介:
Mustache 是一个 logic-less (轻逻辑)模板解析引擎,它的优势在于可以应用在 Javascript、PHP、Python、Perl 等多种编程语言中。
二、语法:
Mustache 的模板语法很简单,就那么几个:
- {{keyName}}
- {{#keyName}} {{/keyName}}
- {{^keyName}} {{/keyName}}
- {{.}}
- {{<partials}}
- {{{keyName}}}
- {{!comments}}
这里将以 javascript 应用为例进行介绍,先来看个 Demo:
... <script type="text/javascript" src="mustache.js"></script> <script type="text/javascript"> var data = {"company": "Apple","address": {"street": "1 Infinite Loop Cupertino</br>","city": "California ","state": "CA ","zip": "95014 ","note":{"a":"a","b":"b"},"product": ["Macbook ","iPhone ","iPod ","iPad "] }var tpl = '<h1>Hello {{company}}</h1>'; var html = Mustache.render(tpl, data);console.log( html ) </script> ...
//运行后 Console 输出:<h1>Hello Apple</h1>
在 Demo 中可以看到 data 是数据,tpl 是定义的模板,Mustache.render(tpl, data)
方法是用于渲染输出最终的 HTML 代码。
借助 Demo 来对语法做简单的介绍:
{{keyName}}
{{}}
就是 Mustache 的标示符,花括号里的 keyName 表示键名,这句的作用是直接输出与键名匹配的键值,例如:
var tpl = '{{company}}'; var html = Mustache.render(tpl, data); //输出: Apple
{{#keyName}} {{/keyName}}
以#
开始、以/
结束表示区块,它会根据当前上下文中的键值来对区块进行一次或多次渲染,例如改写下 Demo 中的 tpl:
var tpl = '{{#address}} <p>{{street}},{{city}},{{state}}</p> {{/address}}'; var html = Mustache.render(tpl, data);//输出: <p>1 Infinite Loop Cupertino</br>,California,CA</p>
注意:如果{{#keyName}} {{/keyName}}
中的 keyName 值为 null, undefined, false;则不渲染输出任何内容。
补充:
1.获得"address"中的"note"中的"a",采用层层级进的方式:
{{#address}}{{#note}}{{a}}{{/note}}{{/address};
2.如果某个属性是多个对象的数组,就属于多次渲染。
例:
var data={
"type":[{对象1},{对象2}....]
}
Mustache.render(i,data);
{{^keyName}} {{/keyName}}
该语法与{{#keyName}} {{/keyName}}
类似,不同在于它是当 keyName 值为 null, undefined, false 时才渲染输出该区块内容。
var tpl = {{^nothing}}没找到 nothing 键名就会渲染这段{{/nothing}}; var html = Mustache.render(tpl, data); //输出: 没找到 nothing 键名就会渲染这段
{{.}}
{{.}}
表示枚举,可以循环输出整个数组,例如:
var tpl = '{{#product}} <p>{{.}}</p> {{/product}}'; var html = Mustache.render(tpl, data); //输出: <p>Macbook </p> <p>iPhone </p> <p>iPod </p> <p>iPad </p>
{{>partials}}
以>
开始表示子模块,如{{> address}};当结构比较复杂时,我们可以使用该语法将复杂的结构拆分成几个小的子模块,例如:
var tpl = "<h1>{{company}}</h1> <ul>{{>address}}</ul>" var partials = {address: "{{#address}}<li>{{street}}</li><li>{{city}}</li><li>{{state}}</li><li>{{zip}}</li>{{/address}}"} var html = Mustache.render(tpl, data, partials); //输出: <h1>Apple</h1> <ul><li>1 Infinite Loop Cupertino</br></li><li>California</li><li>CA</li><li>95014</li></ul>
{{{keyName}}}
{{keyName}}
输出会将等特殊字符转译,如果想保持内容原样输出可以使用{{{}}}
,例如:
var tpl = '{{#address}} <p>{{{street}}}</p> {{/address}}' //输出: <p>1 Infinite Loop Cupertino</br></p>
{{!comments}}
!
表示注释,注释后不会渲染输出任何内容。
{{!这里是注释}} //输出:
参考文章:
http://coenraets.org/blog/2011/12/tutorial-html-templates-with-mustache-js/
http://mustache.github.com/mustache.5.html
http://ued.xinyou.com/2012/07/mustache_5_document.html
转载于:https://www.cnblogs.com/tinaluo/p/7288823.html
Web模板引擎—Mustache相关推荐
- [vue] 你知道vue的模板语法用的是哪个web模板引擎的吗?说说你对这模板引擎的理解
[vue] 你知道vue的模板语法用的是哪个web模板引擎的吗?说说你对这模板引擎的理解 模板引擎: 负责组装数据,以另外一种形式或外观展现数据. 优点: 可维护性(后期改起来方便): 可扩展性(想要 ...
- VUE源码:模板引擎mustache
文章目录 模板引擎的定义 mustache的基本使用 手写原理代码(简化版) 模板引擎的定义 模板引擎就是将数据变为视图最优雅的解决方案 例如:VUE的v-for.mustache 历史上数据变为视图 ...
- 作为一名前端开发工程师,你必须掌握的WEB模板引擎:Handlebars
为什么需要使用模板引擎? 关于为什么要使用模板引擎,按照我常说的一句话就是:不用重复造轮子了. 简单来说,模板最本质的作用是"变静为动",一切利于这方面的都是优势,不利于的都是劣势 ...
- Javascript模板引擎mustache.js详解
进阶之路在于日积月累, 每天进步一点点-加油~ mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后只有9KB,非常值得在项目中使用. ...
- mustache.js html模板,js模板引擎Mustache将h5模板页面转化为小程序页面
研究目的 怎么让小程序页面可以通过后台h5模板进行管理 Mustache 简单语法示例 1.{{keyName}} var data = { "name": "zhang ...
- 学习Vue的mustache语法-mustache模板引擎
学习地址 : https://www.bilibili.com/video/BV1EV411h79m?vd_source=a81826692f4afea80764f4048dc1ae0a 代码地址 : ...
- Vue源码之mustache模板引擎(一)
Vue源码之mustache模板引擎(一) 个人练习结果仓库(持续更新):Vue源码解析 抽空把之前学的东西写成笔记. 学习视频链接:[尚硅谷]Vue源码解析之mustache模板引擎 模板引擎是什么 ...
- if laytpl 非_laytpl : 一款非常轻量的JavaScript模板引擎
//假设你得到了这么一段数据 var data = { title: '前端圈', intro: '一群码js的骚年,幻想改变世界,却被世界改变.', list: [{name: '贤心', city ...
- Jade —— 源于 Node.js 的 HTML 模板引擎
2013-12-11 发布 Jade -- 源于 Node.js 的 HTML 模板引擎 开源项目介绍 web 模板引擎 node.js jade 207.8k 次阅读 · 读完需要 69 分钟 ...
最新文章
- 棋盘游戏的人工智能(二)------剪支
- EXPLAIN 命令详解
- iframe跨域自适应高度
- java httpclient教程_HttpClient4.5.2 HTTP协议的请求和执行
- 机器学习笔试面试超详细总结(四)
- oracle数据库日期格式的运算,Oracle时间类型date,timestamp时间差计算
- 5个数中取三个数组合 不重复 php,PHP产生不重复随机数的5个方法总结
- [SCOI2012]喵星球上的点名(树状数组+后缀数组)
- 什么叫共轭先验或者共轭分布?
- c#遍历匹配串口(向每个串口发数据,根据返回数据确定是否为所需串口)
- 嵌入式系统开发-麦子学院(9)——arm基础知识
- 在Ubuntu20.04(Linux Mint)中同步通达信软件的自选股和画线数据
- 图书馆图书借阅登记微信小程序管理软件系统开发制作
- matlab 呼吸灯,一种控制呼吸灯呼吸效果的方法与流程
- 计算机玩游戏黑屏的原因,为什么电脑玩一会游戏就黑屏,这是为什么??????...
- 数据库中平凡函数和非平凡函数,完全函数依赖和部分函数
- 多文件自平衡云传输 (六)番外篇 —————— 开开开山怪
- linux mailxdingding机器人报警
- Mysql之DQL,各种查查查
- Non-negative Matrix Factorization 非负矩阵分解