经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JS/JS库/框架 » JavaScript » 查看文章
Vue源码-手写mustache源码
来源：cnblogs　　作者：会飞的一棵树　　时间：2021/5/24 10:52:11　　对本文有异议

引言

在Vue中使用模板语法能够非常方便的将数据绑定到视图中，使得在开发中可以更好的聚焦到业务逻辑的开发。

mustache是一个很经典且优秀的模板引擎，vue中的模板引擎也对其有参考借鉴，了解它能更好的知道vue的模板引擎实现的原理。

数据转换为视图的方案

Vue的核心之一就是数据驱动，而模板引擎就是实现数据驱动上的很重要一环。借助模板引擎能够方便的将数据转换为视图，那么常用转换的方案有哪些呢。

  1. 纯 DOM 法,使用 JS 操作 DOM，创建和新增 DOM 将数据放在视图中。（直接干脆，但在处理复杂数据时比较吃力）
  2. 数组 Join 法,利用数组可以换行写的特性，[].jion('')成字符传，再使用 innerHTML。(能保证模板的可读和可维护性)
  1. <div id="container"></div>
  3. <script>
  4. // 数据
  5. const data = { name: "Tina", age: 11, sex: "girl"};
  6. // 视图
  7. let templateArr = [
  8.         "  <div>",
  9.         "    <div>" + data.name + "<b> infomation</b>:</div>",
  10.         "    <ul>",
  11.         "      <li>name:" + data.name + "</li>",
  12.         "      <li>sex:" + data.sex + "</li>",
  13.         "      <li>age:" + data.age + "</li>",
  14.         "    </ul>",
  15.         "  </div>",
  16.       ];
  17. // jion成domStr
  18. let domStr = templateArr.join('');
  19. let container = document.getElementById('container');
  20. container.innerHTML = domStr;
  21. </script>
  1. ES6 的模板字符串。
  2. 模板引擎。

mustache使用示例

  1. <!-- 引入mustache -->
  2. <script src="https://cdn.bootcdn.net/ajax/libs/mustache.js/4.2.0/mustache.js"></script>
  4. <div class="container"></div>
  6. <script>
  7. // 模板
  8. var templateStr = `
  9.       <ul>
  10.           {{#arr}}
  11.             <li>
  12.               <div class="hd">{{name}}<b> infomation</b></div>
  13.               <div class="bd">
  14.                 <p>name:{{name}}</p>
  15.                 <p>sex:{{sex}}</p>
  16.                 <p>age:{{age}}</p>
  17.               </div>
  18.             </li>
  19.           {{/arr}}
  20.       </ul>`;
  22. // 数据
  23. var data = {
  24.         arr: [
  25.           { name: "Tina", age: 11, sex: "female", friends: ["Cate", "Mark"] },
  26.           { name: "Bob", age: 12, sex: "male", friends: ["Tim", "Apollo"] },
  27.           { name: "Lucy", age: 13, sex: "female", friends: ["Bill"] },
  28.         ],
  29.       };
  31. // 使用render方法生成绑定了数据的视图的DOM字符串
  32.  var domStr = Mustache.render(templateStr, data);
  34. // 将domStr放在contianer中
  35. var container = document.querySelector(".container");
  36. container.innerHTML = domStr;
  37. </script>

mustache实现原理

mustache会将模板转换为tokens，然将tokens和数据相结合，再生成dom字符串。tokens将模板字符串按不同类型进行拆分后封装成数组，其保存的是字符串对应的mustache识别信息。
image
模板：

  1. <ul>
  2.     {{#arr}}
  3.       <li>
  4.         <div class="hd">{{name}}<b> infomation</b></div>
  5.         <div class="bd">
  6.           <p>sex:{{sex}}</p>
  7.           <p>age:{{age}}</p>
  8.         </div>
  9.       </li>
  10.     {{/arr}}
  11. </ul>

其转换的tokens(为排版方便清除部分空字符),这里tokens中的数字是，字符的开始和结束位置。

  1. [
  2.   ["text", "?      <ul>?", 0, 12],
  3.   ["#", "arr", 22, 30, [
  4.     ["text", "<li>?<div class="hd">", 31, 78],
  5.     ["name", "name", 78, 86],
  6.     ["text", "<b> infomation</b></div>?<div class="bd">?? <p>sex:", 86, 166],
  7.     ["name", "sex", 166, 173],
  8.     ["text", "</p>?<p>age:", 173, 201],
  9.     ["name", "age", 201, 208],
  10.     ["text", "</p>?</div>?</li>?", 208, 252]
  11.     ], 262
  12.   ],
  13.   ["text", "</ul>?", 271, 289]
  14. ]

数据：

  1. {
  2.   arr: [
  3.     { name: "Tina", age: 11, sex: "female" },
  4.     { name: "Bob", age: 12, sex: "male" }
  5.   ]
  6. }

生成后的Dom的字符串:

  1. <ul>
  2.     <li>
  3.       <div class="hd">Tina<b> infomation</b></div>
  4.       <div class="bd">
  5.         <p>sex:female</p>
  6.         <p>age:11</p>
  7.       </div>
  8.     </li>
  9.     <li>
  10.       <div class="hd">Bob<b> infomation</b></div>
  11.       <div class="bd">
  12.         <p>sex:male</p>
  13.         <p>age:12</p>
  14.       </div>
  15.     </li>
  16. </ul>

mustache关键源码

扫描模板字符串的Scanner

扫描器有两个主要方法。Scanner扫描器接收模板字符串作其构造的参数。在mustache中是以{{和}}作为标记的。
scan方法，扫描到标记就将指针移位，跳过标记。
scanUntil方法是会一直扫描模板字符串直到遇到标记，并将所扫描经过的内容进行返回。

  1. export default class Scanner {
  2.   constructor(templateStr) {
  3.     // 将templateStr赋值到实例上
  4.     this.templateStr = templateStr;
  5.     // 指针
  6.     this.pos = 0;
  7.     // 尾巴字符串，从指针位置到字符结束
  8.     this.tail = templateStr;
  9.   }
  11.   // 扫描标记并跳过，没有返回
  12.   scan(tag) {
  13.     if (this.tail.indexOf(tag) === 0) {
  14.       // 指针跳过标记的长度
  15.       this.pos += tag.length;
  16.       this.tail = this.templateStr.substring(this.pos);
  17.     }
  18.   }
  20.   // 让指针进行扫描，直到遇见结束标记，并返回扫描到的字符
  21.   // 指针从0开始，到找到标记结束，结束位置为标记的第一位置
  22.   scanUntil(tag) {
  23.     const pos_backup = this.pos;
  24.     while (!this.eos() && this.tail.indexOf(tag) !== 0) {
  25.       this.pos++;
  26.       // 跟新尾巴字符串
  27.       this.tail = this.templateStr.substring(this.pos)
  28.     }
  29.     return this.templateStr.substring(pos_backup, this.pos);
  30.   }
  32.   // 判断指针是否到头 true结束
  33.   eos() {
  34.     return this.pos >= this.templateStr.length;
  35.   }
  36. }

将模板转换为tokens的parseTemplateToTokens

  1. export default function parseTemplateToTokens(templateStr) {
  2.   const startTag = "{{";
  3.   const endTag = "}}";
  4.   let tokens = [];
  5.   // 创建扫描器
  6.   let scanner = new Scanner(templateStr);
  7.   let word;
  8.   while (!scanner.eos()) {
  9.     word = scanner.scanUntil(startTag);
  10.     if (word !== '') {
  11.       tokens.push(["text", word]);
  12.     }
  13.     scanner.scan(startTag);
  15.     word = scanner.scanUntil(endTag);
  16.     // 判断扫描到的字是否是空
  17.     if (word !== '') {
  18.       if (word[0] === '#') {
  19.         // 判断{{}}之间的首字符是否为#
  20.         tokens.push(["#", word.substring(1)]);
  21.       } else if (word[0] === '/') {
  22.         // 判断{{}}之间的首字符是否为/
  23.         tokens.push(["/", word.substring(1)]);
  24.       } else {
  25.         // 都不是
  26.         tokens.push(['name', word]);
  27.       }
  29.     }
  30.     scanner.scan(endTag);
  31.   }
  33.   // 返回折叠处理过的tokens
  34.   return nestTokens(tokens);
  35. }

处理tokens的折叠（数据循环时需）的nestToken

  1. export default function nestTokens(tokens) {
  2.   // 结果数组
  3.   let nestedTokens = [];
  5.   // 收集器,初始指向结果数组
  6.   let collector = nestedTokens;
  8.   // 栈结构，用来临时存放有循环的token
  9.   let sections = [];
  11.   tokens.forEach((token, index) => {
  12.     switch (token[0]) {
  13.       case '#':
  14.         // 收集器中放token
  15.         collector.push(token);
  16.         // 入栈
  17.         sections.push(token);
  18.         // 将收集器指向当前token的第2项，且重置为空
  19.         collector = token[2] = [];
  20.         break;
  21.       case '/':
  22.         // 出栈
  23.         sections.pop();
  24.         // 判断栈中是否全部出完
  25.         // 若栈中还有值则将收集器指向栈顶项的第2位
  26.         // 否则指向结果数组
  27.         collector = sections.length > 0 ? sections[sections.length - 1][2] : nestedTokens;
  28.         break;
  29.       default:
  30.         // collector的指向是变化的
  31.         // 其变化取决于sections栈的变化
  32.         // 当sections要入栈的时候，collector指向其入栈项的下标2
  33.         // 当sections要出栈的时候，若栈未空，指向栈顶项的下标2
  34.         collector.push(token);
  35.     }
  36.   })
  38.   return nestedTokens;
  39. }

在多层对象中深入取数据的lookup

该函数主要方便mustache取数据的。比如数据是多层的对象，模板中有{{school.class}},转换为token后是['name','school.class'],那么就能使用token[1](school.class)获取，其在data中对应的数据。然后将其替换过去。

  1. data:{
  2.   school:{
  3.     class:{"English Cls"}
  4.   }
  5. }
  1. export default function lookup(dataObj, keyName) {
  2.   // '.'.split('.') 为  ["", ""]
  3.   // 若是带点的取对象属性值
  4.   if (keyName.indexOf('.') !== -1 && keyName !== '.') {
  5.     // 若有点符合则拆开
  6.     let keys = keyName.split('.');
  7.     // 存放每层对象的临时变量
  8.     // 每深入一层对象，其引用就会更新为最新深入的对象
  9.     // 就像是对象褪去了一层皮
  10.     let temp = dataObj;
  11.     keys.forEach((item) => {
  12.       temp = temp[item]
  13.     })
  15.     return temp;
  16.   }
  17.   // 若没有点符号
  18.   return dataObj[keyName];
  19. }

将tokens转换为Dom字符串的renderTemplate

这里有两个方法。renderTemplate和parseArray在遇到#时（有数据循环时），会相互调用形成递归。

  1. export default function renderTemplate(tokens, data) {
  2.   // 结果字符串
  3.   let resultStr = '';
  4.   tokens.forEach(token => {
  5.     if (token[0] === 'text') {
  6.       // 若是text直接将值进行拼接
  7.       resultStr += token[1];
  8.     } else if (token[0] === 'name') {
  9.       // 若是name则增加name对应的data
  10.       resultStr += lookup(data, token[1]);
  11.     } else if (token[0] === '#') {
  12.       // 递归处理循环
  13.       resultStr += parseArray(token, data);
  14.     }
  15.   });
  17.   return resultStr;
  18. }
  20. // 用以处理循环中需要的使用的token
  21. // 这里的token单独的一段token而不是整个tokens
  22. function parseArray(token, data) {
  23.   // tData是当前token对应的data对象，不是整个的
  24.   // 相当于data也是会在这里拆成更小的data块
  25.   let tData = lookup(data, token[1]);
  26.   let resultStr = '';
  27.   // 在处理简单数组是的标记是{{.}}
  28.   // 判断是name后lookup函数返回的是dataObj['.']
  29.   // 所以直接在其递归的data中添加{'.':element}就能循环简单数组
  30.   tData.forEach(element => {
  31.     resultStr += renderTemplate(token[2], { ...element, '.': element });
  32.   })
  34.   return resultStr;
  35. }

gitee: https://gitee.com/mashiro-cat/notes-on-vue-source-code

原文链接：http://www.cnblogs.com/flytree/p/14800133.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

JavaScript热门文章

  • echarts 饼图 + 全屏显示
  • js正则匹配以{开头,以}结尾的表达式怎么写？-附源码
  • echarts 实现数据(tooltip)自动轮播插件
  • Js设置博客园主题色(theme-color)
  • elementUI 设置input的只读或禁用的方法
  • 超级好用的流程图js框架 值得收藏
  • layui table+复杂表头+合并单元格
  • 获取地理位置
  • 如何使用JavaScript导入和导出Excel文件
  • WebStorm eslint插件报错解决 - TypeError: this.CliEngine is not a constructor

    • JavaScript推荐文章

  • 一些八股：1.fetch 的理解。2.let、const、var
  • 电子表格转身购物车：三步轻松实现
  • Canvas简历编辑器-图形绘制与状态管理(轻量级DOM)
  • IntersectionObserver + scrollIntoView 实现电梯导航 - xingba-coder
  • 可视化—gojs 超多超实用经验分享(三)
  • PixiJS源码分析系列： 第一章 从最简单的例子入手
  • WebRTC入门
  • 前端 Array.sort() 源码学习
  • 【技巧】JS代码这么写，前端小姐姐都会爱上你
  • 【JS】await异常捕获，这样做才完美

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号