vue源码之mustache模板

1
// 扫描类
2
class Scanner {
3
  constructor(templateStr) {
4
    this.templateStr = templateStr;
5
    // 指针
6
    this.pos = 0;
7

8
    this.tail = "";
9
  }
10
  // 让指针走过指定的内容
11
  scan(str) {
12
    this.pos += str.length;
13
    this.tail = this.templateStr.substring(this.pos);
14
  }
15
  // 让指针走到指定标记的位置,并返回走过的字符串
16
  scanUtil(endFlag) {
17
    const index = this.pos;
18
    while (!this.eos() && !this.tail.startsWith(endFlag)) {
19
      this.pos++;
20
      this.tail = this.templateStr.substring(this.pos);
21
    }
22
    const result = this.templateStr.substring(index, this.pos);
23
    this.scan(endFlag);
24
    return result;
25
  }
26
  // 负责终点检查
27
  eos() {
28
    return this.pos >= this.templateStr.length;
29
  }
30
}
31

32
// 将模板字符窜转换为tokens数组
33
const parseTemplateToTokens = (templateString) => {
34
  const tokens = [];
35
  const sc = new Scanner(templateString);
36
  let words;
37
  while (!sc.eos()) {
38
    // 寻找开始标记之前的文字
39
    words = sc.scanUtil("{{");
40
    tokens.push(["text", words]);
41
    // 寻找开始标记与结束标记之间的文字
42
    words = sc.scanUtil("}}");
43
    if (words !== "") {
44
      //  解析嵌套情况
45
      if (words[0] === "#") {
46
        //嵌套开始标记
47
        tokens.push(["#", words.substring(1)]);
48
      } else if (words[0] === "/") {
49
        //嵌套结束标记
50
        tokens.push(["/", words.substring(1)]);
51
      } else {
52
        // 非嵌套
53
        tokens.push(["name", words]);
54
      }
55
    }
56
  }
57
  // 到这里tokens是打平的一维数组,我们需要将其折叠为多维数组来满足嵌套关系
58
  return nestTokens(tokens);
59
};
60

61
// 折叠嵌套的tokens
62
const nestTokens = (tokens) => {
63
  const nestedTokens = [];
64
  // 收集器,用来指向我们正在操作的元素的折叠项
65
  let collector = nestedTokens;
66
  // 维护一个栈的数据结构,保证栈顶永远是我们正在操作的元素
67
  const stack = [];
68
  for (let i = 0; i < tokens.length; i++) {
69
    const token = tokens[i];
70
    switch (token[0]) {
71
      case "#":
72
        collector.push(token);
73
        stack.push(token);
74
        // 给token添加第三项数组项,并让收集器指向它
75
        collector = token[2] = [];
76
        break;
77
      case "/":
78
        stack.pop();
79
        if (!stack.at(-1)) {
80
          collector = nestedTokens;
81
          break;
82
        }
83
        collector = stack.at(-1)[2];
84
        break;
85
      default:
86
        collector.push(token);
87
        break;
88
    }
89
  }
90
  return nestedTokens;
91
};
92

93
// tokens render 单层级
94
const tokensRender = (tokens, data) => {
95
  let result = "";
96
  tokens.forEach((t, i) => {
97
    const type = t[0];
98
    console.log(t);
99
    if (type === "text") {
100
      // 普通文本
101
      result += t[1];
102
    } else if (type === "name") {
103
      // key value
104
      const key = t[1];
105
      if (key === ".") {
106
        result += data;
107
      } else {
108
        // 解决连续键
109
        const paths = key.split(".");
110
        // 指针
111
        let point = data;
112
        paths.forEach((path) => {
113
          point = point[path];
114
        });
115

116
        result += point;
117
      }
118
    } else {
119
      const key = t[1];
120
      const nestTokens = t[2];
121
      const nestData = data[key];
122
      const str = parseArrayTokens(nestTokens, nestData);
123
      result += str;
124
    }
125
  });
126
  return result;
127
};
128

129
// 解析嵌套tokens
130
const parseArrayTokens = (toenks, array) => {
131
  let result = "";
132
  array.forEach((node) => {
133
    // 这里我们循环交替调用,形成一个递归效果
134
    result += tokensRender(toenks, node);
135
  });
136
  return result;
137
};
138

139
const pandaTemplate = {
140
  render(template, data) {
141
    const tokens = parseTemplateToTokens(template);
142
    const htmlStr = tokensRender(tokens, data);
143
    return htmlStr;
144
  },
145
};

1
<div id="app"></div>
2
<script>
3
  // 开始使用
4

5
  const data = {
6
    name: "panda",
7
    age: 18,
8
    info: {
9
      pc: {
10
        type: "macbookpromaxplusUltraman",
11
      },
12
    },
13
    cars: [
14
      {
15
        name: "劳斯奈斯幻影",
16
        keys: ["钥匙一", "钥匙二"],
17
      },
18
    ],
19
    girls: [
20
      {
21
        name: "小红",
22
        children: [
23
          {
24
            name: "孩子一",
25
            age: 8,
26
          },
27
          {
28
            name: "孩子二",
29
            age: 9,
30
          },
31
          {
32
            name: "孩子三",
33
            age: 10,
34
          },
35
        ],
36
      },
37
    ],
38
  };
39
  const htmlStr = pandaTemplate.render(
40
    `
41
      <div>
42
      <p>姓名:{{name}},</p>
43
      <p>年龄:{{age}}</p>
44
      现有车辆:
45
      <ul>
46
        {{#cars}}
47
        <li>{{name}},钥匙:[ {{#keys}} {{.}}, {{/key}} ]</li>
48
        {{/cars}}
49
      </ul>
50
      现有女孩:
51
      <ul>
52
        {{#girls}}
53
        <li>
54
          {{name}},现有小孩:[ {{#children}}<sapn>{{name}},</sapn> {{/children}} ]
55
        </li>
56
        {{/girls}}
57
      </ul>
58
      <p>其他信息:{{info.pc.type}}</p>
59
    </div>
60
                  `,
61
    data
62
  );
63

64
  document.getElementById("app").innerH;
65
  TML = htmlStr;
66
</script>