mustache模板引擎的部分理解

---

前言

简单开头

在vue里，我们经常会写出这样的 "HTML"

<template>
	<div class="wrapper">
		<h2>今天天气真{{ str }}!</h2>
	</div>
</template>

它最终会变为这样:

	<div class="wrapper">
		<h2>今天天气真不错!</h2>
	</div>

双花括号里的str，转变成了不错，这看起来确实不错，我们可以使用 变量 决定这里边的内容

一、mustache模板引擎

Mustache是一种数据渲染模板引擎，提供了一种简单的标记语言，用于将数据与HTML或其他文本格式进行解耦。使用Mustache，数据和视图是分开的，这使得开发人员更容易管理和维护其应用程序。

在Mustache中，模板是由标记和占位符组成的。标记描述了如何渲染文本，而占位符用于引用要插入模板的数据对象。以下是Mustache中的一些基本概念：

1. {{variable}}：变量占位符，用于插入数据对象中的值。


2. {{#section}}...{{/section}}：section块，允许您对模板进行分组，以便可以按条件渲染或重复使用。


3. {{^section}}...{{/section}}：反向section块，与普通section块相反，它只有在数据对象中不存在值时才会渲染。


4. {{! comment }}：注释，用于向模板添加注释或文档。


5. {{>partial}}：包含部分，允许您在模板中插入另一个模板或部分。

二、前情提要

现在，有这样的几个方法,能让DOM结合数据生成
利用正则表达式
参考链接: String.prototype.replace()

  <script>
    const tem = '<h4>一曲新词酒一杯，{{one}}。夕阳西下几时回？<br>无可奈何花落去，{{two}}。小园香径独徘徊。</h4><p style="float:right;">——宋代·晏殊<p><h6 style="float:left;">《浣溪沙·一曲新词酒一杯》</h6>'
    const prose = {
      one: '去年天气旧亭台',
      two: '似曾相识燕归来'
    }
    function fn(template, data) {
      return template.replace(/\{\{(\w+)\}\}/g, function (fstr, $1) {
        return data[$1]
      })
    }
    document.body.innerHTML = fn(tem, prose)
  </script>

使用数组的join方法
参考链接: Array.prototype.join()

  <script>
    let arr = [
      { str: '逗号，' },
      { str: '句号。' },
      { str: '“双引号”' },
    ]
    for (let i = 0; i <= arr.length; i++) {
      document.body.innerHTML += [
        '<div>',
        '<p>' + arr[i].str + '</p>',
        '</div>',
      ].join('')
    }
  </script>

看完上面两个例子，我们就可以过渡到正题了

三、模仿mustache模板引擎实现简单案例

		_不得不说，mustache模板引擎很厉害_

先来看下面这片段：

<script type="text/template">
  <div>
      天街小雨润如酥，{{one}}。
      最是一年春好处，{{two}}。
                      ——唐代·韩愈
      《早春呈水部张十八员外》
  </div>
</script>
// 将上面的内容转成下面这样的数组
<script>
 let arr = [
 	['text', '<div>天街小雨润如酥，'],
 	['name', 'one'],
 	['text', '。最是一年春好处，'],
 	['name', 'two'],
 	['text', '。——唐代·韩愈《早春呈水部张十八员外》</div>'],
]
</script>

可以看到，DOM结合数据的写法，转变成数组了

每个子数组的第一项，总是代表了一段内容的类别。
仔细看还会发现：数组里找不出这样式的{{ 双花括号 }}