探究Vue源码:mustache模板引擎(9) 将单层无喜欢结果tokens转为dom字符串

news2025/10/31 15:28:53

好我们前面几篇文章已经编写完了将dom结构的模板字符串转为 tokens 数据结构的代码
那么现在我们就需要用tokens 结合数据去生成dom字符串

我们先来研究一下我们的模板字符串与数据结构
首先数据从这个data中去拿然后模板字符串语句中先是利用对象中的students 循环
然后里面又用每个students每个下标的list 再开启一个循环
在这里插入图片描述
这个也可以理解为模板字符串与响应式数据之前的一个互动

然后我们在src下创建一个文件叫 renderTemplate.js
这个函数的作用就是将tokens再从数组转回字符串
我们先这样写

/*
    将tokens数组转为模板字符串
*/
export default function renderTemplate(tokens,data) {
    console.log(tokens,data);
}

先将一个函数结构体暴露出去
参数上的话他接收我们处理完的 tokens数组和我们刚才看的那个数据data

然后我们打开之前 src下创建的index.js
引入并用一下这个renderTemplate
在这里插入图片描述
这里我们导入了renderTemplate
然后接收他的返回值传入的是我们前面处理完的 tokens数组和我们之前没有使用的data

然后我们运行项目
在这里插入图片描述
可以看到 renderTemplate 中的 tokens 和 data都成功输出了但因为我们renderTemplate并没有写返回值所以现在输出renderTemplate返回结果肯定是拿不到的

那么现在我们就要想办法去操作 tokens和data

但我们现在这个结构还是有点复杂我们将 www下的index.html 改成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src = "/xuni/bundle.js"></script>
    <script>
        let templateStr = `
            <div>
                我超喜欢我家的{{name}}，我家{{name}}也超喜欢我
            </div>
        `;
        let data = {
            name: "小猫猫",
        }
        GrManagData.render(templateStr,data);
    </script>
</body>
</html>

这样我们数据的整体结果就会显得简单很多
在这里插入图片描述
然后我们将 renderTemplate 代码修改如下

/*
    将tokens数组转为模板字符串
*/
export default function renderTemplate(tokens,data) {
    //创建一个字符串  保存结果
    let resultStr = "";
    //先循环遍历tokens 数组
    for(let i = 0;i < tokens.length; i++){
        //定义一个token变量  接收当前遍历的下标
        let token = tokens[i];

        //判断当前是不是text  文本类型的
        if(token[0] == "text") {
            //因为  text表示内容只是单纯文本 直接追加到结果字符串上就行了
            resultStr += token[1];
        } /* 判断到如果是name变量名称类型 */ else if(token[0] == "name") {
            //在data中找到对应的字段 然后追加在结果字符串上
            resultStr += data[token[1]];
        }
    }
    //输出最后结果字符串
    console.log(resultStr);
}