Mustache 是一款经典的前端模板引擎,在前后端分离的技术架构下面,前端模板引擎是一种可以被考虑的技术选型,随着重型框架(AngularJS、ReactJS、Vue)的流行,前端的模板技术已经成为了某种形式上的标配,Mustache 的价值在于其稳定和经典:
主页:https://github.com/janl/mustache.js/
文档:https://mustache.github.io/mustache.5.html

Mustache 在使用的时候,会在页面上出现 {{person}} 这样的标签,载入的时候会显示出来,然后立即被替换掉,这个对于页面的呈现是不够友好的,这是我在使用的过程中遇到的一个痛点。

Mustache 功能非常经典,这里就能全部罗列出来:

变量

{{person}}

带有HTML的变量

{{{person}}}

循环

{{#persons}}
......
{{/persons}}

数组循环的时候可以用.作为下标

{ "musketeers": ["Athos", "Aramis", "Porthos", "D'Artagnan"] }
{{#musketeers}}
{{.}}
{{/musketeers}}

对象

正常使用:
{ "name": { "first": "Michael", "last": "Jackson" }, "age": "RIP" }
{{name.first}} {{name.last}}
{{age}}

循环使用:
{ "stooges": [ { "name": "Moe" }, { "name": "Larry" }, { "name": "Curly" } ] }
{{#stooges}}
{{name}}
{{/stooges}}

if else

{{#person}}
......
{{/person}}
{{^person}}
......
{{/person}}

布尔判断

和前面循环的语法是一样的,取决于变量是否是一个数组
{{#person}}
......
{{/person}}

数组的布尔判断

当一个数组没有任何值的时候,可能会希望不做任何的显示,所以需要这个判断
{{#persons.length}}
......
{{/persons.length}}

Lambdas

遇到和前面的循环和布尔表达式一样,取决于参数的类型
{{#person}}
{{name}} is awesome.
{{/person}}

{ "name": "Willy", "person": function() { return function(text, render) { return "<b>" + render(text) + "</b>" } } }

输出
<b>Willy is awesome.</b>

注释

这玩意儿有啥用呢?
{{! ignore me }}

Trick

在做<tr></tr>的循环输出的时候,需要使用类似这样的形式(感觉这就是BUG啊,或者是HTML标准的问题?):
``
<tr> <td>{{name}}</td> <td>{{age}}</td> </tr>

两个核心方法

Mustache.parse(template);
Mustache.render(template, obj);

因为动态载入到 HTML 上的事件或者元素会丢失,所以我封装了一个对模板的缓存:

$(templateKey).each(function(i){
templateExist = false;
$(templateArray).each(function(index){
if (templateArray[index][0] == templateKey+i)
{
templateExist = true;
template = templateArray[index][1];
}
}) if (templateExist != true)
{
template = $(this).html();
templateArray.push([templateKey+i, template]);
} Mustache.parse(template);
$(this).html(Mustache.render(template, item.data)).show();
if (callbackFunction)
{
callbackFunction(item.data);
};
})

顺便简单学习了一下 Handlebars,这款也非常的知名,并且是基于 Mustache 的模板引擎:
Handlebars:http://handlebarsjs.com/

如果你希望像传统模板引擎一样可以有函数和参数处理等等的功能,那么 Mustache 就不是好的选择,但是再复杂了往上走的话,就不如选用 Vue 了

链接:https://www.jianshu.com/p/7f1cecdc27e1

学习笔记《Mustache》模板的更多相关文章

  1. OpenCV 学习笔记(模板匹配)

    OpenCV 学习笔记(模板匹配) 模板匹配是在一幅图像中寻找一个特定目标的方法之一.这种方法的原理非常简单,遍历图像中的每一个可能的位置,比较各处与模板是否"相似",当相似度足够 ...

  2. Python Flask学习笔记之模板

    Python Flask学习笔记之模板 Jinja2模板引擎 默认情况下,Flask在程序文件夹中的templates子文件夹中寻找模板.Flask提供的render_template函数把Jinja ...

  3. Angular 5.x 学习笔记(1) - 模板语法

    Angular 5.x Template Syntax Learn Note Angular 5.x 模板语法学习笔记 标签(空格分隔): Angular Note on github.com 上手 ...

  4. tornado 学习笔记8 模板以及UI

          Tornado 包含一个简单.快速而且灵活的模板语言.       Tornado同样可以使用任何其他的python模板语言,虽然没有集成这些模板语言进RequestHandler.ren ...

  5. C++学习笔记30:模板与型式参数化

    转型操作 接受目标型式作为模板参数 Programmer *p = dynamic_cast<Programmer*>(e) 模板工作原理 使用template<typename T ...

  6. play framework学习笔记之 模板引擎

    模板语法 ${client.name} ${client?.name} 不能确定client是否存在的时候? #{extends /} #{doLayout /}#{get} #{set} 比如 #{ ...

  7. C++学习笔记之模板(1)——从函数重载到函数模板

    一.函数重载 因为函数重载比较容易理解,并且非常有助于我们理解函数模板的意义,所以这里我们先来用一个经典的例子展示为什么要使用函数重载,这比读文字定义有效的多. 现在我们编写一个交换两个int变量值得 ...

  8. C++ Primer 学习笔记_76_模板与泛型编程 --模板定义[续]

    模板与泛型编程 --模板定义[续] 四.模板类型形參 类型形參由keywordclass或 typename后接说明符构成.在模板形參表中,这两个keyword具有同样的含义,都指出后面所接的名字表示 ...

  9. C++学习笔记7——模板

    函数模板: #include <iostream> using namespace std; template <typename T> T max(const T & ...

  10. 高放的c++学习笔记之模板与泛型编程

    函数模板 作用 有很多时候参数的类型以及返回值的类型是可变的,我们通过定义模板来让函数能更灵活的运用. 我们设计一个比较函数,如果能比较的两个参数是int型的,两个参数也可能都是string型的,单独 ...

随机推荐

  1. Spring Boot 路由

    多路由指向同一个方法 @GetMapping(value = {"/login","/index"}) 访问http://127.0.0.1/index 和 h ...

  2. LeetCode专题-Python实现之第14题:Longest Common Prefix

    导航页-LeetCode专题-Python实现 相关代码已经上传到github:https://github.com/exploitht/leetcode-python 文中代码为了不动官网提供的初始 ...

  3. JDK源码分析(三)—— LinkedList

    参考文档 JDK源码分析(4)之 LinkedList 相关

  4. 第17章 社区快速入门和模板 - Identity Server 4 中文文档(v1.0.0)

    IdentityServer组织不维护这些示例.IdentityServer组织愉快地链接到社区模板,但不能对模板做出任何保证.请直接与作者联系. 17.1 各种ASP.NET核心安全样本 https ...

  5. C# 批量删除Word超链接

    对于Word文档中包含较多的超链接,如果一个个来删除很花费时间和精力,本篇文章将提供一种可用于批量删除Word中的超链接的方法.这里的超链接可以是页眉页脚处的超链接.正文中的超链接.表格中的超链接.文 ...

  6. MySql 双主多从配置指导

    MySql 双主多从配置指导 一.背景 互联网项目为了数据的可靠性和架构的可拓展性经常会用到双主多从的数据库,来实现数据的备份.负载均衡和突发状况时数据库切换. 二.思路 配置两台数据库A.B互为主从 ...

  7. input框限制只能输入正整数、字母、小数、

    这篇博文大部分来自于网上,为了方便自己查阅,以及帮助他人.   1,只能输入正整数 <input onkeyup="if(this.value.length==1){this.valu ...

  8. apply,call和bind的用法区别

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 细说addEventListener与事件捕获

    细说addEventListener与事件捕获.事件冒泡(一)addEventListener的基本用法 在复杂的项目开发中,javascript和html的解耦变得至关重要,我们被推荐使用事件动态绑 ...

  10. js 数组插入和删除处理

    function insertArray(arr, val, compare, maxLen) { //返回位置 const index = arr.findIndex(compare) if (in ...