如何选择Web前端模板引擎（推荐）-木庄网络博客

本文摘自PHP中文网，作者不言，侵删。

本篇文章给大家带来的内容是关于如何选择Web前端模板引擎（推荐），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

模板引擎负责组装数据，以另外一种形式或外观展现数据。浏览器中的页面是 Web 模板引擎最终的展现。

无论你是否直接使用模板引擎，Web 模板一直都在，不在前端就在后端，它的出现甚至可以追溯到超文本标记语言 HTML 标准正式确立之前。

服务器端的模板引擎

我所知道最早的 Web 模板引擎是 PHP，它正式诞生于 1997 年，工作在服务器端。让我们看看 PHP 官方的 intro-whatis：

HPer 普遍赞同 PHP 本身就是最天然、原生的 PHP 模板引擎，因为她本来就是。在 PHP 的世界里多次出现过再包装的模板引擎，著名的有 smarty。

其它服务器端语言很多都有 HTML 模板引擎，比如 JSP、mustache。

毫无疑问，这些服务器端模板引擎最终生成的结果是 HTML(XML) 字符串，处理流程逻辑使用宿主语言本身的语法实现。

它们的共同特征：HTML 只是个字符串, 最终结果可能还需要类似 Tidy 这样的清洁或修正验证工具。

这里提出一个问题：二次封装的 smarty 有存在的必要么?

浏览器端的模板引擎

我所知道最早的前端模板引擎是 jCT，它托管于 Google Code，诞生于 2008 年，宿主语言是 JavaScript，工作在浏览器中。

今天在 OSC 搜索 JavaScript 模板引擎你会得到 100+ 个结果，下边列举一些：

轻量度：tpl.js、T.js
认知度：arttemplate、mustache.js、doT.js、handlebars.js、pug
DOM-tree-based：domTemplate、transparency、plates
VDOM-based：htmltemplate-vdom、virtual-stache、html-patcher
流行框架：Vue.js、ReactJS、riot
Real-DOM：PowJS

它们的共同特征：全都支持插值。

这里还有 templating-engines 受欢迎度的对比，甚至 best-javascript-templating-engines 投票及正反方的理由。

如何选择

我认为存在即合理，每个引擎、框架总有可取之处，至少在你的应用里，在某个时代，所以本文不会评论某个引擎哪一点不好，那样是不客观的。现在回答前边提到的问题：smarty 有存在的必要么？我的答案是：有。理由很简单，看给谁用、看大背景。对于前后端没有分离的应用，或前端人员对后端语言不够熟悉，或因岗位职责需要，那么前端人员掌握一种比较通用的模板语法(语言)是现实的，反之让 PHPer 自己去使用 smarty 那就太浪费技能了。

下面是通常意义上的引擎选择建议：

前提，选择的引擎能满足数据渲染需求，且不和现有依赖冲突，如果你已经非常熟悉某个引擎，那你已经有答案了。

是一次性的项目需求么? 是的话直接选择轻量的，学习复杂度最低的。是要做组件开发么?

引擎支持预编译结果，不必每次都实时编译么?

要跨平台么? 有官方提供支持的，首选类 React-JSX 的引擎或纯粹的 VDOM 引擎。

选择学习或维护复杂度最低的，众所周知，开发者对调试的时间超过写代码的时间深恶痛绝。

最后才是性能对比，性能对比是一件非常细致的工作，他人的对比结果不一定符合你的场景。

我认为应该弱化语法风格的对比，偏好是没有可比性的，一些语法甚至有特殊的背景原因。

为什么最后才是性能对比？

性能的确很重要，但如果性能还没有影响到你的应用体验度，那就忽视它。很难真实地模拟应用场景，通常只有通过真实场景来检验，目前的测试工具还达不到这种效果。

前述问题有些有固定答案，下面讨论余下的问题：如何考虑组件开发、支持预编译、复杂度？

组件开发

进行组件开发已经不再是选择模板引擎的问题了，这是生态环境选择的问题。如果你的应用需要更快地完成，那么时间点是第一位的，就选择流行框架，有足够多的组件让你使用或参考。如果你的应用有独立的生态环境，需要技术选型以便长期维护，那继续看下文。

预编译

预编译应该具备：

编译结果在目标环境中不再需要编译过程。
编译结果可调试性，这意味着结果应该包含原生 ECMAScript 代码，而不是纯粹的数据描述。
大家都知道 React-JSX 是支持预编译的，官方的说法是 React Without JSX，即总是 build 过的。

一些基于字符串处理的引擎也支持预编译。如果你需要预编译，建议抛弃编译结果依然是基于字符串拼接的引擎，那样还不如不预编译，那是 HTML5 未被广泛支持之前的技术手段。

至少也要有类似 React-JSX 这样的编译结果才具有可调试性。备注：Vue.js 支持多种模板引擎，可达到同样的效果。

原 ReactJS 代码，其中用到了 Web Components 技术：

class HelloMessage extends React.Component {
  render() {
    return <p>Hello <x-search>{this.props.name}</x-search>!</p>;
  }
}

编译后：

class HelloMessage extends React.Component {
  render() {
    return React.createElement(
      "p",
      null,
      "Hello ",
      React.createElement(
        "x-search",
        null,
        this.props.name
      ),
      "!"
    );
  }
}

不少 VDOM 引擎也可以编译类似效果，比如 htmltemplate-vdom。

<script>
      var id = 3;
      var env = {
          people: [
              {
                  id: 'id1',
                  name: 'John',
                  inner: [{ title: 'a1' }, { title: 'b1' }],
                  city: 'New York',
                  active: true
              },
              {
                  id: 'id2',
                  name: 'Mary',
                  inner: [{ title: 'a2' }, { title: 'b2' }],
                  city: 'Moscow'
              }
          ],
          githubLink: 'https://github.com/agentcooper/htmltemplate-vdom',
          itemClick: function(id) {
              env.people.forEach(function(person) {
                  person.active = String(person.id) === String(id);
              });
              loop.update(env);
          }
          // Omitted ....
      };
  </script>