Mustache 语法：那些双大括号的故事

发表于

Mustache 语法：那些双大括号的故事

你肯定见过 Vue 和微信小程序里的这种写法：{{name}}。这玩意儿叫 Mustache 语法，也有人叫它”胡子语法”。为啥叫胡子？因为 {{ }} 看起来像胡子呗 😄

这东西是从哪来的？

起源故事

其实这个语法并不是 Vue 或者小程序发明的，它早就存在了。最早来自一个叫 Mustache 的模板引擎，这货的设计理念特别简单粗暴：模板就是模板，别掺和业务逻辑。

你想想，以前我们写模板的时候，经常会在里面塞各种 if、for，结果模板越写越复杂，后来维护起来要人命。Mustache 就说：不行，你们这样搞不对，模板就应该纯粹一点，只管展示数据就行了。

设计思路很朴素

Mustache 的几个核心想法：

  • 简单到没朋友：看到 {{variable}} 你就知道这是个变量，小学生都能看懂
  • 哪种语言都能用：不管你用 JavaScript、Python 还是 Ruby，都有对应的实现
  • 强制分离关注点：复杂逻辑你放到别的地方去处理，模板就负责把数据展示出来

说白了，就是让你写代码的时候不要什么都往一个地方塞。

Mustache 到底有啥特点？

真的没有逻辑

你在 Mustache 模板里找不到任何 if、else、for 这种东西。所有的判断、循环、计算，统统在模板外面搞定，然后把最终结果扔给模板去渲染。

刚开始可能觉得这样很蛋疼，但用久了你就会发现，这样做让代码清爽了很多。

双大括号就是招牌

{{ }} 就是 Mustache 的标志性语法，简单直接。你要展示个变量？{{name}}。要访问对象的属性？{{user.age}}。就是这么朴实无华。

支持嵌套访问

虽然简单，但该有的功能还是有的。比如你可以这样访问深层嵌套的数据：{{user.profile.contact.email}}，一路点下去就完事了。

来个实际例子

假设你有这样的数据：

1
2
3
4
5
6
{
  "name": "张三",
  "age": 25,
  "city": "北京",
  "job": "前端开发"
}

模板长这样：

1
2
嗨，我是 {{name}}，今年 {{age}} 岁。
目前在 {{city}} 做 {{job}}，欢迎一起聊技术！

最后渲染出来就是：

1
2
嗨，我是 张三，今年 25 岁。
目前在 北京 做 前端开发，欢迎一起聊技术！

是不是很直观？

稍微复杂点的例子

如果数据结构复杂一些：

1
2
3
4
5
6
7
8
9
10
11
12
{
  "developer": {
    "info": {
      "name": "李四",
      "level": "高级"
    },
    "skills": {
      "frontend": "Vue.js",
      "backend": "Node.js"
    }
  }
}

模板可以这么写：

1
2
开发者：{{developer.info.name}}（{{developer.info.level}}）
技术栈：前端用 {{developer.skills.frontend}}，后端用 {{developer.skills.backend}}

为什么 Vue 和小程序都用它？

  1. 一看就懂：{{data}} 这种写法，不管是新手还是老鸟，一眼就能看出来这里要放数据

  2. 学习成本低：不需要记什么复杂的语法，会打字就会用

  3. 强制你写好代码：因为模板里不能写逻辑，你就被逼着把数据处理的逻辑写到该写的地方去

  4. 架构很清爽：视图是视图，逻辑是逻辑，各管各的，这样代码维护起来不会让人想哭