面試：如何實現一個模板引擎？詳情 - 面試,模板引擎,螞蟻金服 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 的所有數據處理能力。

優勢

這麼實現的優勢在於：

小，極簡
模板語法不用學習，天然就會
自帶 JS 的所有數據處理能力（就是寫 JS 代碼）

至於劣勢或者缺點，自己想一想吧，哈哈。

性能

性能測試結果如下：

我承認，這樣的代碼去和其他的成熟的模板引擎比較性能，就是耍流氓。

兼容

因為 ES6 語法存在瀏覽器兼容問題，所以請勿用於有瀏覽器兼容要求的生產環境。但是在 node 端或者本地工具產品中可以放心大膽的使用。ES6 string template 兼容性如下：

當然，如果你的用户瀏覽器版本定位很高，那麼大可放心使用。畢竟是 JS 語法，能有什麼稀奇 bug 能那麼幸運被你遇到？

重點 & 結論

我們是螞蟻金服大數據部的前端團隊，把控整個螞蟻的所有數據，貫穿從業務中獲取數據，最終到讓數據服務業務整個流程中。

業務上，我們會負責螞蟻金服幾十個數據產品研發迭代。
技術上，我們重點維護交叉表、探索分析畫布、編輯器等技術產品，深度參入 AntV G2 棧、G6 棧的開發。

...

更多信息可以加我 wx 私聊，給簡歷我們做同事，不給簡歷，我們做朋友。

投遞簡歷請註明來源於這篇文章，我們就不筆試和麪試這一題。

hustcc 博客

hustcc 博客

博客 / 詳情