自己实现一个 Mustache 模板引擎 3 ： Mustache 模板引擎的 tokens 机制前面我们有提到， Mu

前言：

从零开始自己实现一个 Mustache 模板引擎的第 3 章。

原理复盘

前面我们有提到， Mustache 模版引擎的基本工作原理，是吧我们的 template 字符串转化为 tokens 数组，那具体是怎么转化的呢，今天我就详细说道说道。

首先，回顾我们之前的栗子：

<body>
    <div id="container"></div>
    <script>
        var templateStr = `
            <h1>我买了一个{{thing}}，好{{mood}}啊</h1>
        `;

        var data = {
            thing: '华为手机',
            mood: '开心'
        };

        var domStr = Mustache.render(templateStr, data);
        
        var container = document.getElementById('container');
        container.innerHTML = domStr;
    </script>
</body>

过程解读：

在这里 template 字符串是: <h1>我买了一个{{thing}}，好{{mood}}啊</h1>

在这里， Mustache 发现 {{ 就会停止，把 <h1>我买了一个 收集为第一个 token，标记 “text”，存入 tokens 数组第 0 项，然后找到 thing 标记为 “name”，存入 tokens 数组第 1 项，然后 Mustache 发现 }} 暂停;继续遍历 template 字符串，找到 ，好标记 “text”，存入 tokens 数组第 2 项，遇到 {{暂停, 然后找到 mood 标记为 “name”，存入 tokens 数组第 3 项，然后 Mustache 发现 }} 暂停,最后存入 啊</h1> 。如图所示：

解析方式

前面的数据只是简单的变量，如果是复杂的嵌套数组、对象呢？比如我们的数据长这样：

    // 数据
    var data = {
        students: [
            {'name': '小明', 'hobbies': ['编程', '游泳']},
            {'name': '小红', 'hobbies': ['看书', '弹琴', '画画']},
            {'name': '小强', 'hobbies': ['锻炼']}
        ]
    };

零散 tokens 形成嵌套数组

将 tokens 结合数据，解析为 DOM 字符串。

最后将 DOM 字符串插入到要渲染的视图标签里就可以了。

实现过程有很多巧妙设计，可以查看源码！

最后贴上源码链接： gitee.com/chenuvi/m-m…