探究Vue源码:mustache模板引擎(7) 手写模板字符串转换tokens数组过程

上文 探究Vue源码:mustache模板引擎(6) 编写Scanner扫描类处理字符串按格式分割我们针对模板引擎将字符串转tokens 展开了 代码编写
我们用Scanner 已经可用根据大括号分割内容 那么 现在 我们就继续研究tokens转换

我们打开我们之前创建的项目
在src目录下创建一个文件 叫 formConversToken.js

我们就在这个文件夹中门来做这种格式转换的处理
然后 这个文件我们先这样 默认给他导出一个函数

export default function formConversToken() {
    
}

然后 我们到src下的index.js来引入这个文件

然后 我们将index.js改成这样

import formConversToken from "./formConversToken";
window.GrManagData = {
    render(templateStr,data) {
        let tokens = formConversToken(templateStr);
        console.log(tokens);
    }
}

上文中再render中写的内容 我们不要了 因为那个只是为了写这个Scanner类做测试用的

然后 我们给src下的formConversToken.js引入一下Scanner 它有用

然后 我们直接 formConversToken 函数 代码编写如下

export default function formConversToken(templateStr) {
    let tokens = [];
    let scanner = new Scanner(templateStr);
    while(scanner.pos != templateStr.length) {
        let text = scanner.scanUtil("{{");
        tokens.push(["text",text]);
        scanner.scan("{{");
        let name = scanner.scanUtil("}}");
        tokens.push(["name",name]);
        scanner.scan("}}");
    }
    return tokens;
}

这里 我们定义了一个叫 tokens 的数组
然后 将上文 我们过滤的循环条件又加上去
如果这个templateStr模板字符串没有被处理完 就一直走
然后 先过滤出 从开头到 {{ 中的内容 这个内容是 text文本类型
然后 从 {{开始 到 }} 过滤出来 叫name
因为花括号中的都是采用的data中的字段
我们要将这个内容取出来
一次一次循环 直到整个模板字符串的内容都被处理完
循环结束之后 将我们存储的tokens 数组返回回来
然后 运行结果如下

我们这里的tokens就被处理出来了

看着很神奇 但其实功能很弱小
现在我们这个这能抗住一维数组
如果来个二维的就废了
我们将 index.html中的templateStr内容改成这样

let templateStr = `
    <div>
       {{#students}}
           <ul>
               <li>{{ item.name }}</li>
           </ul>
       {{/students}}
   </div>
`;

我们再次运行

其实 看着也还行 不过还是多少有点乱
而且这个我们还是弄的一个一维数组

按正常 我们循环结构要存在内部嵌套 例如 我们这里 一个循环结构就是二维数组
数组嵌套 我们下一篇在继续讲
这次 我们就先将这个 # 和 / 解决一下

这里 我们找到 src下的 formConversToken.js
然后 看到 tokens.push([“name”,name]);这个位置
我们改成

if(name) {
    if(name[0] == "#") {
        tokens.push(["#",name.substring(1)]);
    }else if(name[0] == "/") {
        tokens.push(["/",name.substring(1)]);
    }else{
        tokens.push(["name",name]);
    }
}

首先if(name)判断 首先 name不能是空的
然后 判断 如果第一个字符是井号 那就 名称为井号 然后内容 取这个字符串的第二个字符到结尾
然后 如果第一个字符串是 反斜杠 这个 名称为反斜杠 然后 内容还是从第二个字符串开始取
然后 否则 就是正常取

这样 我们这个循环的部分语法就被处理出来了
当然 一个枪套的循环处理 我们后续再说 今天就到这啦