探究Vue源码:mustache模板引擎(3) 通过编写简单正则了解mustache转换思路

news2024/12/29 9:14:43

我们会基本使用显然不够啊
我们要去了解mustache的原理乃至自己去写一个mustache

首先 mustache 不是不能用简单的正则表达式来实现
但是这里为了让大家理解为什么不能我们还是用简单正则写一下

我们创建一个 html文件
然后编写代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id = "list"></div>
    
    <script>
        var templateStr = `<h1>我是一只{{name}}，今年{{age}}岁啦</h1>`;
        var data = {
            name: "小猫猫",
            age: 2
        }
    </script>
</body>
</html>

这里我们定义了一个模板字符串 templateStr 写的是一个 h1的页面模板字符串
在下面定义了一个 data的对象模板字符串里面用了data中的两个字段

那么我们现在就需要写一个函数将他们写入到dom树中

我们在下面编写这样一段代码

console.log(templateStr.replace(/\{\{(\w+)\}\}/g, function(a, b, c){
  console.log(a, b, c);
    return "*";
}));

在这里插入图片描述
相信replace函数大家都不会陌生字符串替换
这里我们写的是捕获 {{ }} 一对花括号里面带有字母的内容
{{ 代表捕获 {{ 同理 }} 捕获 }} 一对小括号代表捕获里面 \w代码字母后面一个加号代表一个或者多个都会被捕获

所以我们捕获到了所有的 {{ 字母组合 }} 并在函数中 a代表原本的内容 b代表括号内被捕获的字母内容 c参数代表这个符号在字符串的下标位置简单说就是第几个字符
我们运行结果如下

在这里插入图片描述
可以看到我们两次输出分别捕获到了templateStr中的 name 和 age的使用
并再最后将他们也都替换成了 *

而我们 abc三个参数的输出也是没有任何问题
而且我们还有一个d参数
我们将代码改成

console.log(templateStr.replace(/\{\{(\w+)\}\}/g, function(a, b, c, d){
 console.log(a, b, c, d);
    return "*";
}));

在这里插入图片描述
我们这两次输出的d参数都是字符串在没有被替换时的内容

当然你也不一定要一直用 abc这三个名字这个行参本来名字你就可以顺便取

其实目前来讲有用的直属前两个参数
下面我们就需要将他这里用到的字段位置替换成 data中字段的值
意思就是例如 {{ name }} 我们就要想办法替换成 data.name 的值

我们可以将代码改成这样

 console.log(templateStr.replace(/\{\{(\w+)\}\}/g, function(pattern, name){
   return data[name];
}));

在这里插入图片描述
因为我们之前说过第二个参数拿到的是捕获到的花括号中的内容那么比如 {{ name }} 进来
第二个参数捕获到的内容就是字符串的 “name” 那么我们就可以通过 data[“name”] 拿到data中的这个字段 age也是一样的

运行结果如下
在这里插入图片描述
这里我们就很顺利的将这个内容替换成了 data中的值

这就是一个非常简单的模板引擎基理但 mustache的源码不是这样写的
因为这个有点太基础了之后什么循环啊甚至说循环嵌套的这个肯定是搞不定的
但是大体思路差不多写这个只是让大家对这个变量解析有个概念

好啦既然逻辑已经写好了我们也可以写个弱功能版的 render函数啦
我们可以这样写

function render(template, data) {
    return template.replace(/\{\{(\w+)\}\}/g, function(pattern, name){
        return data[name];
    });
}

接受两个参数第一个template 一个页面模板的字符串 data 操作数据的对象和我们mustache.js中的 render 接的参数写的是一样的

好那我们试着用自己写的这个弱化版的render
将内容写到页面上

我们编写页面代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id = "list"></div>
    
    <script>
        var templateStr = `<h1>我是一只{{name}}，今年{{age}}岁啦</h1>`;
        var data = {
            name: "小猫猫",
            age: 2
        }

        function render(template, data) {
            return template.replace(/\{\{(\w+)\}\}/g, function(pattern, name){
                return data[name];
            });
        }
        document.getElementById('list').innerHTML = render(templateStr, data);
    </script>
</body>
</html>