面试:如何实现一个模板引擎?

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

下次遇到,可以看看下面这个轮子 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">

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

开源项目
优秀的开源项目推荐。

前端攻城军

928 声望
87 粉丝
0 条评论
你知道吗?

前端攻城军

928 声望
87 粉丝
文章目录
宣传栏