上文 探究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不能是空的
然后 判断 如果第一个字符是井号 那就 名称为井号 然后内容 取这个字符串的第二个字符到结尾
然后 如果第一个字符串是 反斜杠 这个 名称为反斜杠 然后 内容还是从第二个字符串开始取
然后 否则 就是正常取
这样 我们这个循环的部分语法就被处理出来了
当然 一个枪套的循环处理 我们后续再说 今天就到这啦