简介

模板引擎是数据和模板相相结合的最优解决方案，模板引擎的主要功能使模板视图配合数据渲染页面。除了模板引擎还有es6的字符串模板,字符串拼接还有更久远的Dom API。
示例：

  1. // mustache模板引擎
  2. const str = `
  3.     <div>
  4.     <div>${aaa}</div>
  5.     </div>
  6. `;
  7. const data = {
  8.     aaa: "你好"
  9. };
  10. const tplStr = mustache.render(str, data);
  11. XXX.innerHTML = str;    // 插入视图
  13. // Es6 字符串模板
  14. const aaa = "你好";
  15. const str = `<div>
  16.     <div>${aaa}</div>
  17. </div>`; // <div><div>你好</div></div>
  18. XXX.innerHTML = str;    // 插入视图
  20. // 字符串拼接
  21. const aaa = "你好";
  22. let str += "<div>";
  23. str += "<div>"+ aaa +"</div>";
  24. str += "</div>"; // <div><div>你好</div></div>
  25. XXX.innerHTML = str;
  27. // dom api
  28. const aaa = "你好";
  29. const div1 = document.createElement("div");
  30. const div2 = document.createElement("div");
  31. div2.innerText = aaa;
  32. div1.appendChild(div2);
  33. XXX.appendChild(div1);        // 插入视图

根据以上案例实现效果一致，但dom api不具有实践意义，太过于繁琐。 而字符串拼接则格式不够优雅，模板少量还能接受，多的话不只是编写麻烦，看起来很混乱。 es6字符串模板处理简单字符串无压力， 但如果模板中出现判断是否显示某节点， 循环等操作的话，还是很麻烦。 这个时候模板引擎的功能则体现出来了，模板引擎可以在模板上编写一些判断、循环等操作，例如现在很火的vue，vue的视图就是相当于一个模板引擎。v-if、v-for和大括号表达式等基本实现模板引擎的基本功能。

mustache是一个比较初版的模板引擎插件， 后续出现的模板引擎或多或少都有借鉴mustache的思想。

1、入口文件

  1. import parseTemplateTokens from "./parseTemplateTokens";
  2. import renderTmplate from "./renderTmplate";
  4. export default {
  5.   render(templateStr, data){
  6.     // 将字符串模板解析成tokens
  7.     const tokens = parseTemplateTokens(templateStr);
  8.     // 将tokens和数据相结合拼接处处理后的dom字符串
  9.     const domStr = renderTmplate(tokens, data);
  10.     return domStr;
  11.   }
  12. }

2、将模板字符串转成tokens数组

tokens是根据模板的内容拆解出文本节点、元素节点的一个数组，将非标识符（非{{ 或 }}）包含的节点识别为元素节点， 被{{ 或 }} 包含的节点为文本节点。
转成tokens需要有以下两个步骤：
1、需要一个方法将元素节点和文本节点识别并拆分（Scanner）得到无序的tokens数组， 何为无序的tokens数组，既是没有将模板中的循环和逻辑判断归类。
2、转成有序tokens的方法（nestTokens）， 有序的tokens则是将# 和 /之间的数据进行归类折叠。

  1. /**
  2.  * 将模板字符串转成tokens数组
  3.  * 无序的tokens    
  4.  * [
  5.     [ "text", "<div class='list'>" ],
  6.     [ "#", " arr" ],
  7.     [ "text", "<div class='item'><div class='title'>" ],
  8.     [ "name", " title " ],
  9.     [ "text", "</div><div class='item-list'>" ],
  10.     [ "#", " item.data" ],
  11.     [ "text", "<div class='item-item'>" ],
  12.     [ "name", " a " ],
  13.     [ "text", "</div>" ],
  14.     [ "/", " item.data" ],
  15.     [ "text", "</div></div> " ],
  16.     [ "/", " arr" ],
  17.     [ "text", "</div>" ]
  18.   ]
  19.  */
  21. import Scanner from "./Scanner";
  22. import nestTokens from "./nestTokens";
  24. export default templateStr => {
  25.   const tokens = [];
  26.   const scanner = new Scanner(templateStr);
  28.   let words;
  29.   while (!scanner.eos()) {
  30.     // 收集开始标记出现的文字
  31.     words = scanner.scanUtil("{{");
  32.     if(words !== ''){
  33.       tokens.push(["text", words]);
  34.     }
  35.     scanner.scan("{{");
  36.     words = scanner.scanUtil("}}");
  37.     if(words !== ''){
  38.       if(words[0] === "#"){
  39.         tokens.push(["#", words.substring(1)]);
  40.       }else if(words[0] === "/"){
  41.         tokens.push(["/", words.substring(1)]);
  42.       }else{
  43.         tokens.push(["name", words]);
  44.       }
  45.     }
  46.     scanner.scan("}}");
  47.   }
  48.   return nestTokens(tokens);
  49. }

2.1、根据标识区分文本节点和元素节点

  1. /**
  2.  * 扫描器类
  3.  */
  5. export default class Scanner {
  6.   constructor(templateStr){
  7.     this.templateStr = templateStr;        // 原始模板
  8.     this.pos = 0;                                         // 指针
  9.     this.tail = templateStr;                    // 指针扫描后的模板
  10.   }
  12.   // 跳过指定内容
  13.   scan(tag){
  14.     // 判断指定内容是否在当前字符串第一位
  15.     if(this.tail.indexOf(tag) === 0){
  16.       this.pos += tag.length;
  17.       this.tail = this.templateStr.substring(this.pos);
  18.     }
  19.   }
  21.   // 让指针进行扫描，知道遇见内容结束，并且能够返回结束之前的文字
  22.   scanUtil(stopTag) {
  23.     // 记录初始pos的值
  24.     const pos_backup = this.pos;
  25.     // 当模板扫描未结束 并且 指定内容在当前字符串内不为空则继续循环扫描
  26.     while(!this.eos() && this.tail.indexOf(stopTag) !== 0){
  27.       this.pos++;
  28.       // 不断更新扫描后的模板
  29.       this.tail = this.templateStr.substring(this.pos);
  30.     }
  31.     return this.templateStr.substring(pos_backup, this.pos);
  32.   }
  34.   // 判断模板是否扫描结束
  35.   eos(){
  36.     return this.pos >= this.templateStr.length;
  37.   }
  38. }

2.2、转成有序tokens

  1. /**
  2.  * 将#与/之间的tokens折叠起来
  3.  */
  4. /**
  5.  * 例子：
  6.  * 原结构
  7.  * [
  8.     [ "text", "<div class='list'>" ],
  9.     [ "#", " arr" ],
  10.     [ "text", "<div class='item'><div class='title'>" ],
  11.     [ "name", " title " ],
  12.     [ "text", "</div><div class='item-list'>" ],
  13.     [ "#", " item.data" ],
  14.     [ "text", "<div class='item-item'>" ],
  15.     [ "name", " a " ],
  16.     [ "text", "</div>" ],
  17.     [ "/", " item.data" ],
  18.     [ "text", "</div></div> " ],
  19.     [ "/", " arr" ],
  20.     [ "text", "</div>" ]
  21.   ]
  22.  * 转化后
  23.  [
  24.     [ "text", "<div class='list'>" ],
  25.     [ "#", " arr", 
  26.       [
  27.         [ "text", "<div class='item'><div class='title'>" ],
  28.         [ "name", " title " ],
  29.         [ "text", "</div><div class='item-list'>" ],
  30.         [ "#", " item.data", 
  31.           [
  32.             [ "text", "<div class='item-item'>" ],
  33.             [ "name", " a " ],
  34.             [ "text", "</div>" ]
  35.           ] 
  36.         ],
  37.         [ "text", "</div></div>" ]
  38.       ] 
  39.     ],
  40.     [ "text", "</div>" ]
  41.   ]
  42.  */
  43. export default tokens => {
  44.   const nestTokens = [];
  45.   // 收集器，默认指向nestTokens结果数组
  46.   // 收集器会变化， 如遇到#的时候，收集器会指向这个token下标为2的新数组
  47.   let collector = nestTokens,
  48.   // 栈，存放当前遇到#后的嵌套层级
  49.   sections = [],
  50.   token,
  51.   i = 0,
  52.   len = tokens.length;
  54.   for(; i < len; i++){
  55.     token = tokens[i];
  57.     switch (token[0]) {
  58.       case "#":
  59.         // 收集器添加["#", "***"]
  60.         collector.push(token);
  61.         // 栈新增嵌套层级
  62.         sections.push(token);
  63.         // 修改收集器指向
  64.         collector = token[2] = [];
  65.         break;
  66.       case "/":
  67.         // 出栈，返回上一层
  68.         sections.pop();
  69.         // 修改收集器指向，如栈有嵌套层级，则指向栈的最后一位层级的下标为2的数组，否则则指向返回结果tokens
  70.         collector = sections.length > 0 ? sections[sections.length - 1][2] : nestTokens;
  71.         break;
  72.       default:
  73.         collector.push(token);
  74.         break;
  75.     }
  76.   }
  77.   return nestTokens;
  78. }

3、让tokens数组变为dom字符串

在得到tokens数组后，下一步是将tokens和数据相结合，转成dom字符串。
转成dom字符串有以下步骤：
1、对元素节点直接并入dom字符串中
2、将tokens中对应的文本节点找到对应的data字段获取到该字段的属性，然后并入dom字符串中，此时模板中编写的data字段有可能会出现 XXX.XXX.XXX， 这时需要一个方法处理该情况（lookup）。
3、处理tokens中的逻辑节点（#）的方法， parseArray。 

  1. /**
  2.  * 让tokens数组变为dom字符串
  3.  */
  4. import lookup from "./lookup";
  5. import parseArray from "./parseArray";
  7. export default function renderTmplate(tokens, data){
  8.   let template = "";
  9.   for(let i = 0; i < tokens.length; i++){
  10.     let token = tokens[i];
  11.     switch (token[0]) {
  12.       case "text":
  13.         template += token[1];
  14.         break;
  15.       case "name":
  16.         template += lookup(data, token[1]);
  17.         break;
  18.       default:
  19.         template += parseArray(token, data);
  20.         break;
  21.     }
  22.   }
  24.   return template;
  25. }

3.1、根据token的文本节点的属性值获取data中的属性

  1. /**
  2.  * 功能是可以在dataObj对象中，寻找用连续点符号的keyName属性
  3.  * 例如： dataObj
  4.  * {
  5.  *    a: {
  6.  *        b: {
  7.  *          c: 1
  8.  *        }
  9.  *    }
  10.  * }
  11.  * 
  12.  * keyName a.b.c
  13.  */
  14. export default (dataObj, keyName) => {
  15.   const keyStr = keyName.trim();
  16.   if(keyStr.indexOf(".") !== -1 && keyStr !== "."){
  17.     const keys = keyStr.split(".");
  18.     let temp = dataObj;
  19.     for(let i = 0; i < keys.length; i++){
  20.       temp = temp[keys[i]];
  21.     }
  22.     return temp;
  23.   }
  24.   // 如无点符号
  25.   return dataObj[keyStr] || "";
  26. };

3.2、处理逻辑节点数组，结合renderTemplate实现递归

  1. /**
  2.  * 处理数组，结合renderTemplate实现递归
  3.  * 注意，这个函数收的参数是token, 而不是tokens!
  4.  * token是 ["#", "XXX", [...]]
  5.  */
  6. import renderTmplate from "./renderTmplate";
  8. export default (token, data) => {
  9.   const v = data[token[1].trim()];
  10.   let str = "";
  11.   // # 的字段可以是循环，也可以判断语句
  12.   if(v instanceof Array){
  13.     for(let i = 0; i < v.length; i++){
  14.       str += renderTmplate(token[2], {
  15.         ...v[i],
  16.         "item": v[i],
  17.         ".": v[i]
  18.       });
  19.     }
  20.   }
  21.   if(typeof v === "boolean" && v){
  22.     str += renderTmplate(token[2], data);
  23.   }
  24.   return str;
  25. }

使用方式

  1. import fang_mustache from "./index.js";
  2. const str = `
  3.       <div class="list">
  4.         {{# arr}}
  5.         <div class="item">
  6.           <div class="title">{{ title }}</div>
  7.           <div class="item-list">
  8.             {{# data}}
  9.               <div class="item-item">{{ item.a }}</div>
  10.               <div class="item-item">{{ item.b }}</div>
  11.               <div class="item-item">{{ index }}</div>
  12.             {{/ data}}  
  13.           </div>
  14.         </div>
  15.         {{/ arr}}
  16.         {{# isShow}}
  17.           <div>你好</div>
  18.         {{/ isShow}}
  19.       </div>
  20.     `;
  21. const data = {
  22.   isShow: true,
  23.   arr: [
  24.     {
  25.       title: "O(∩_∩)O",
  26.       data: [
  27.         {
  28.           a: "测测测测",
  29.           b: "1111111111111"
  30.         }
  31.       ]
  32.     },
  33.     {
  34.       title: "hahahahahahaha",
  35.       data: [
  36.         {
  37.           a: "王晓",
  38.           b: "222222222222222"
  39.         }
  40.       ]
  41.     }
  42.   ]
  43. };
  44. const str = fang_mustache.render(str, data);    // 即可获取到编译后的字符串