VUE源码：模板引擎mustache_vue 模板引擎

模板引擎的定义

模板引擎就是将数据变为视图最优雅的解决方案
例如：VUE的v-for、mustache
历史上数据变为视图方法：

• 纯DOM方法
• 数组join
• ES6的反引号法：``${a} `
• 模板引擎

mustache的基本使用

官方git:https://github.com/janl/mustache.js
例子：

let arr = [
  { name: "小红", sex: "女", age: 18 },
  { name: "小黑", sex: "男", age: 19 },
  { name: "小白", sex: "女", age: 17 },
];

1
2
3
4
5
6

1.引入mustache库
2.语法

  <ul>
    {{#arr}}
    <li>
      <div class="hd">{{name}}的基本信息</div>
      <div class="bd">
        <p>姓名：{{name}}</p>
        <p>性别：{{sex}}</p>
        <p>年龄：{{age}}</p>
      </div>
    </li>
    {{/arr}}
  </ul>
1
2
3
4
5
6
7
8
9
10
11
12

Mustache.render(templateStr,data)

手写原理代码（简化版）

没有包含布尔值，其它基本实现
index:

import parseTempalteToTokens from "./parseTempalteToTOkens.js";
import renderTamplate from "./renderTamplate.js";
Window.templateEngine = {
  render(templateStr, data) {
    let tokens = parseTempalteToTokens(templateStr);
    // console.log(tokens);
    // 调用renderTemplate函数，让tokens数组变为dom字符串
    let domStr = renderTamplate(tokens, data);
    return domStr
  },
};

1
2
3
4
5
6
7
8
9
10
11
12

parseTempalteToTokens:

import Scanner from "./Scanner";
import nestTokens from "./nestTokens";
/**
 *
 * 将模板字符串变为token数组
 *
 */
export default function parseTempalteToTokens(templateStr) {
  let tokens = [];
  // 创建扫描器
  let scanner = new Scanner(twmplateStr);
  let words;
  // scanner没有到头
  while (!scanner.eos()) {
    // 收集开始标记之前的文字
    words = scanner.scanUtil("{{");
    // 存储
    if (words != " ") {
      // 普通文字中的空格没有意义；标签中的空格保留<div class="box"></div>
      let isInJJH = false;
      let _words = "";
      for (let i = 0; i < words.length; i++) {
        if (words[i] == "<") {
          isInJJH = true;
        } else {
          isInJJH = false;
        }
        // 如果不是空格，拼接
        if (!/\s/.test(words[i])) {
          _words += words[i];
        } else {
          // 如果是空格且在标签内，拼接
          if (isInJJH) {
            _words += " ";
          }
        }
      }
      tokens.push(["text", words]);
    }
    // 跳过双大括号
    scanner.scan("{{");
    // 收集}}之前的文字
    words = scanner.scanUtil("}}");
    // 存储，此时的words为{{}}中的内容
    if (words != "") {
      if (words[0] == "#") {
        tokens.push(["#", words.substring(1)]);
      } else if (words[0] == "/") {
        tokens.push(["/", words.substring(1)]);
      } else {
        tokens.push(["name", words.substring(1)]);
      }
    }
    // 跳过双大括号
    scanner.scan("}}");
  }
  return nestTokens(tokens);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

Scanner:

/**
 * 扫描器类
 */
export default class Scannner {
  constructor(templateStr) {
    this.templateStr = templateStr;
    console.log(templateStr);
    // 指针
    this.pos = 0;
    // 尾巴指针
    this.tail = templateStr;
  }
  // 走过指定内容
  scan(tag) {
    if (this.tail.indexOf(tag) == 0) {
      // tag有多长，就让pos后移多少位
      this.pos += tag.length;
      // 改变尾巴为从当前到最后
      this.tail = this.templateStr.substring(this.pos);
    }
  }
  // 让指针进行扫描，直到遇到指定内容，并返回结束之前的文字
  scanUtil(stopTag) {
    // 记录执行方法的pos的值
    let pos_backyp = this.pos;
    // 寻找标记且没到头
    while (this.tail.indexOf(stopTag) && !this.eos()) {
      this.pos++;
      // 改变尾巴为从当前到最后
      this.tail = this.templateStr.substr(this.pos);
    }
    return this.templateStr.substring(pos_backyp, this.pos);
  }
  // 指针是否到头，返回布尔值
  eos() {
    return this.pos >= this.templateStr.length;
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

nestTokens:

/**
 * 折叠，将#和/ 之间的tokens整合起来作为它下标为3的向
 * 将零散的tokens串起来--->栈：遇见#入栈；遇见/出栈
 */
export default function nestTokens(tokens) {
  // 结果数组
  let nestedTokens = [];
  // 收集器,注意收集器会变化
  let collector = nestedTokens;
  // 栈结构
  let sections = [];
  for (let i = 0; i < tokens.length; i++) {
    let token = tokens[i];
    switch (token[0]) {
      case "#":
        // 收集器存储token
        collector.push(token);
        // 入栈
        sections.push(token);
        // 收集器要换人
        collector = token[2] = [];
        break;
      case "/":
        // 出战
        sections.pop();
        // 改变收集器为上一层
        collector =
          sections.length > 0 ? sections[sections.length - 1][2] : nestedTokens;
        break;
      default:
        collector.push(token);
    }
  }
  return nestedTokens;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

renderTamplate:

import lookup from "./lookup.js";
import parseArray from "./parseArray.js";
/**
 * 让tokens数组变为dom字符串
 * 递归：#标记的tokens需要处理它下标为1
 */
export default function renderTamplate(tokens, data) {
  // 结果字符串
  let resultStr = "";
  // 遍历tokens
  for (let i = 0, len = tokens.length; i < len; i++) {
    let token = tokens[i];
    // 看类型
    if (token[0] == "text") {
      resultStr += token[1];
    } else if (token[0] == "name") {
      // 如果试name类型，直接使用它的值，要调用lookup
      // 防止是a.d.c
      resultStr += lookup(data, token[1]);
    } else if (token[0] == "#") {
      resultStr += parseArray(token, data);
    }
  }
  return resultStr;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

parseArray:

import lookup from "./lookup.js";
import renderTemplate from "./renderTamplate.js";
/**
 * 处理token数组，结合renderTemplate实现递归
 * 注意：接收参数为token
 * ['#',student,[]]
 *
 *
 * 这个函数：递归调用renderTemplate，次数有data决定
 *
 */
export default function parseArray(token, data) {
  // 得到data中数组需要渲染的部分
  let v = lookup(data, token[1]);
  // 结果字符串
  let resultStr = "";
  // 遍历v，这里只考虑v为数组的情况
  // 重点：下面这个循环！遍历的是数据
  for (let i = 0, len = v.length; i < len; i++) {
    // '.'的识别，例子见最后
    resultStr += renderTemplate(token[2], {
      ...v[i],
      ".": v[i],
    });
  }
  return resultStr;
}
/**     .的例子
 *  <ul>
    {{#arr}}
    <li>
      {{.}}
    </li>
    {{/arr}}
  </ul>
 * 
 * let data={
 *  arr:['1','2','3']
 * }
 * 
 * 
 */

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

lookup:

/**
 * 让dataObj对象中可以用.符号的keyName属性
 * 例如：dataObj为：
 * {
 *  a:{
 *    b:{
 *      c:100
 *    }
 *   }
 * }
 * 那么lookup(dataObj,'a.b.c')结果为100
 */
export default function lookup(dataObj, keyName) {
  // 看看keyName中有没有.符号，但keyname不能为.
  if (keyName.indexOf(".") != -1 && keyName != ".") {
    // 如果有，拆分属性
    let keys = keyName.split(".");
    // 设置临时变量tmp,用于周转，一层层的找
    let tmp = dataObj;
    for (let i = 0, len = keys.length; i < len; i++) {
      // 更新tmp
      tmp = tmp[keys[i]];
    }
    return tmp;
  }
  return dataObj[keyName];
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28