Javascript模版引擎mustache.js简介

更新日期: 2018-12-28阅读: 2.3k标签: 引擎

背景

最近使用ELK的sentinl进行告警配置,sentinl的邮件通知支持mustache,借此机会学习了mustache相关知识,记录在此。


mustache的思想

mustache的核心是标签和logic-less.

标签: 定义模板的时候,使用了{{name}}、{{#systems}}{{/systems}}标记. 这就是mustache的标签,只不过用{{}}替代了<>,以免和html标签的<>混淆.

Logic-less:轻逻辑,因为在定义模板的时候不会使用if-else,不会有循环式编码,一切都用标签来解决.

标签包含:

  • {{prop}}: 将数据源对象上prop属性对应的值,转换成字符串输出.
  • {{{prop}}} ——不进行特殊字符转义,保持内容原样输出
  • {{#prod}}{{/prop}}
  • {{^prop}}{{/prop}}
  • {{.}} ——表示枚举,可以循环输出整个数组
  • {{>partials}} ——以>开始表示子模块
  • {{!comments}} ——注释

{{prop}}标签

mustache渲染{{prop}}标签的逻辑:

1)如果prop引用的值上null或者undefined,则渲染成空串;

2)如果prop引用的是一个函数,则在渲染的时候自动执行这个函数,并把函数返回值作为渲染结果.

3)其他场景,直接把prop引用的值转换成字符串作为渲染结果.

默认情况下,mustache在渲染prop时,都是对prop的原始值进行url编码或者html编码之后再输出,所以会把"\"转成html实体符.

console.log(Mustache.render(tpl1, {
     prop: function () {
         return 'it\'s a fun'
     }
}));//-it&#39;s a fun-

如果要阻止这种编码行为,只要把标签改成{{{prop}}}就可以.


{{#prop}}{{/prop}}标签

这对标签作用非常大,可以同时完成if-else和for-each以及动态渲染的模版功能. 在这对标签之间,可以定义其他模板内容,嵌套所有标签.

1)if-else渲染

只有prop属性在数据源对象上存在,并且不为falsy值(javascript6个falsy值:null, undefined, NaN, 0, false, 空字符串), 并且不为空数组的情况下, 标签之间的内容才会被渲染,否则都不会被渲染.

prop属性引用的是一个函数的时候,{{#prop}}会自动调用这个函数,并把函数的返回值作为if-else渲染逻辑的判断依据,也就是如果函数返回的是falsy值或者是空数组的时候,这对标签之间的内容还是不会显示.

2)for-each渲染

当prop属性引用的是一个非空数组时,这对标签之间的内容将会根据数据大小进行迭代,并且当数组元素为对象时,还会把该对象作为每一次迭代的上下文,以便迭代时的标签可以直接引用数组元素上的属性.

3)动态渲染

当prop属性所引用的是一个函数, 并且这个函数的返回值还是一个函数的话, mustache会再次调用这个返回的函数,并给它传递2个参数:text表示原来的目标内容,render表示mustache内部的执行渲染的对象, 以便在这个函数内容可以通过render对象结合原来的模版内容,自定义渲染的逻辑,并且把函数的返回值作为渲染结果(这个返回值渲染的逻辑根{{prop}}标签完全一样).


{{^prop}}{{/prop}}标签

这对标签,与{{#prop}}{{/prop}}的if-else渲染执行相反逻辑,即只有在prop属性不存在或者引用的是一个falsy值,或者是空数组才会显示标签之间的内容.

详情参考
作者:AmyZYX 
出处:http://www.cnblogs.com/amyzhu/ 


链接: https://fly63.com/article/detial/1713

V8引擎是如何工作?

V8是google开发的JavaScript引擎, 它是 开源的 ,而且是用C++编写的。它用于客户端(Google Chrome)和服务器端(node.js)JavaScript应用程序。V8最初旨在提高Web浏览器中JavaScript执行的性能。为了提升速度,V8将JavaScript代码转换为更高效的机器代码,而不是使用解释器。

JavaScript 引擎

编写Web代码有时会让开发人员编写一系列字符并像魔术那样神奇,这些字符会在浏览器中变成具体的图像,文字和动作。了解该技术可以帮助开发人员更好地调整他们作为程序员的技能

JavaScript物理引擎之Matter.js与Box2d性能对比

在挑选JavaScript 2D物理引擎的时候,不外乎两种主流的选择:第一种是老牌的Box2D,最开始的版本是C++实现的,后来有了很多种实现,比如flash版本和js版本,第二种是新潮的matter-js,matter-js比较轻量,API和文档都比较有友好。

JS 引擎 V8 发布 v7.4,性能又大幅提高了

JavaScript 引擎 V8 发布了 7.4 版本,目前处于 beta 阶段,正式版将于几个星期后与 Chrome 74 Stable 一起发布。此版本带来了一些新特性,并极大提升了性能。

精读《V8 引擎 Lazy Parsing》

本周精读的文章是 V8 引擎 Lazy Parsing,看看 V8 引擎为了优化性能,做了怎样的尝试吧!这篇文章介绍的优化技术叫 preparser,是通过跳过不必要函数编译的方式优化性能。

JavaScript引擎是如何工作的?从调用栈到Promise你需要知道的一切

你有没有想过浏览器是如何读取和运行 JavaScript 代码的吗?这看起来很神奇,但你可以学到一些发生在幕后的事情。让我们通过介绍 JavaScript 引擎的精彩世界在这种语言中尽情畅游。

从Google V8引擎剖析Promise实现

本文阅读的源码为Google V8 Engine v3.29.45,此版本的promise实现为js版本,在后续版本Google继续对其实现进行了处理。引入了es6语法等,在7.X版本迭代后,逐渐迭代成了C版本实现。

V8引擎-枚举+位运算实现参数配置

基本上从初始化引擎,到Isolate、handleScope、Context一直到编译其实都有记录,但是实在是无从下手。虽说我的博客也没有什么教学意义,但是至少也需要有一个中心和结论。

Node js 视图引擎

Node js 视图引擎就像 Laravel 中的 Blade。其最基本的定义是,视图引擎是帮助我们用比通常更短、更简单的方式编写 HTML 代码并重用的工具。此外,它还可以从服务器端导入数据并渲染最终的 HTML

规则引擎解决方案浅析

用于页面,流程,扩展点实现的选择;输出结果:实现的位置;编排无数的条件积木和行为积木,达到业务逻辑计算,券库存消减的目的;输出结果:商品重计算后的价格;通过订单,售后单,会员等信息编排和判断

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!