面试：如何实现一个模板引擎？

面试笔试经常会遇到吧？笔试面试一般遇到也不会要求特别高，一般可能想考查的是正则这个点。

下次遇到，可以看看下面这个轮子 tplv（不用 star，因为这不是重点，重点在最后），应该是一个比较独特的思路（也算抖机灵吧）。

使用示例

具体使用方式直接看 README 吧,和其他简单的模板引擎，没有什么很大区别。来一个简单的例子：

import { render } from 'tplv';

const template = '${ name }, ${value}(${percent} | Top ${array[2]})';

const data = {
  name: 'Hangzhou',
  value: 1200,
  percent: '13%',
  array: [1, 2, 3, 4]
};

render(template, data); // `Hangzhou, 1200(13% | Top 3)` will be got

原理

核心代码如下（真正的 7 行代码）：

/**
 * tplv render
 * @param template
 * @param data
 */
export default function(template: string, data: object): string {
  const ks = Object.keys(data);
  const vs = ks.map((k: any) => data[k]);

  const t = `return \`${template}\``;
  const f = new Function(...ks, t);

  return f(...vs);
}

原理是利用 ES6 string template 语法，所以模板语法和 JS 语法一模一样，自带 JS 的所有数据处理能力。

优势

这么实现的优势在于：

1. 小，极简
2. 模板语法不用学习，天然就会
3. 自带 JS 的所有数据处理能力（就是写 JS 代码）

至于劣势或者缺点，自己想一想吧，哈哈。

性能

性能测试结果如下：

我承认，这样的代码去和其他的成熟的模板引擎比较性能，就是耍流氓。

兼容

因为 ES6 语法存在浏览器兼容问题，所以请勿用于有浏览器兼容要求的生产环境。但是在 node 端或者本地工具产品中可以放心大胆的使用。ES6 string template 兼容性如下：

当然，如果你的用户浏览器版本定位很高，那么大可放心使用。毕竟是 JS 语法，能有什么稀奇 bug 能那么幸运被你遇到？

重点 & 结论

我们是蚂蚁金服大数据部的前端团队，把控整个蚂蚁的所有数据，贯穿从业务中获取数据，最终到让数据服务业务整个流程中。

业务上，我们会负责蚂蚁金服几十个数据产品研发迭代。
技术上，我们重点维护交叉表、探索分析画布、编辑器等技术产品，深度参入 AntV G2 栈、G6 栈的开发。

...

更多信息可以加我 wx 私聊，给简历我们做同事，不给简历，我们做朋友。

<img width="256" height="256" src="https://user-gold-cdn.xitu.io/2020/3/21/170fc13bfb3383fc?w=700&h=700&f=png&s=840355">

投递简历请注明来源于这篇文章，我们就不笔试和面试这一题。