文档章节

如何选择 Web 前端模板引擎?

编辑部的故事
 编辑部的故事
发布于 06/06 15:16
字数 2995
阅读 715
收藏 12
点赞 4
评论 6

Web 模板就在那里

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

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

服务器端的模板引擎

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

PHP(“PHP: Hypertext Preprocessor”,超文本预处理器的缩写)是一种被广泛应用的开放源代码的多用途脚本语言,它可嵌入到 HTML中,尤其适合 web 开发。

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

其它服务器端语言很多都有 HTML 模板引擎,比如 JSPmustache

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

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

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

浏览器端的模板引擎

我所知道最早的前端模板引擎是 jCT,它托管于 Google Code,诞生于 2008 年,宿主语言是 JavaScript,工作在浏览器中。很荣幸,我就是 jCT 的作者,相关早期博客可以查看 achungithub jCT 备份。

直到今天写这篇文章,我才发现 pure-js 这篇文章里面也提到不少先行者——jemplate 最早在 2006 年就创建了。

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

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

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

如何选择

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

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

  1. 前提,选择的引擎能满足数据渲染需求,且不和现有依赖冲突,如果你已经非常熟悉某个引擎,那你已经有答案了。
  2. 是一次性的项目需求么? 是的话直接选择轻量的,学习复杂度最低的。
  3. 是要做组件开发么?
  4. 引擎支持预编译结果,不必每次都实时编译么?
  5. 要跨平台么? 有官方提供支持的,首选类 React-JSX 的引擎或纯粹的 VDOM 引擎。
  6. 选择学习或维护复杂度最低的,众所周知,开发者对调试的时间超过写代码的时间深恶痛绝。
  7. 最后才是性能对比,性能对比是一件非常细致的工作,他人的对比结果不一定符合你的场景。

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

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

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

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

组件开发

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

预编译

预编译应该具备:

  1. 编译结果在目标环境中不再需要编译过程。
  2. 编译结果可调试性,这意味着结果应该包含原生 ECMAScript 代码,而不是纯粹的数据描述。

大家都知道 React-JSX 是支持预编译的,官方的说法是 React Without JSX,即总是 build 过的。

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

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

原 ReactJS 代码,其中用到了 Web Components 技术:

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

编译后:

class HelloMessage extends React.Component {
  render() {
    return React.createElement(
      "div",
      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>

复杂度

很难用唯一的标准去评判两个引擎哪个复杂度低,这是由使用者的思维模式不同造成的。例如前边列出的引擎在使用上以及预编译结果上的区别,不同使用者感触是不同的,这正是不同引擎存在的合理性、价值性。

  • 有的使用者认为这个应用场景有字符串模板就满足了需求,轻量够用。
  • 有的使用者认为字符串拼接技术的模板引擎不够强壮,不够时代感。
  • 有的使用者认为 OOP 够理性,够逻辑,够抽象。
  • 有的使用者认为原生 HTML 才叫前端。
  • 有的使用者认为 VDOM 适用性更广。

这些评判都有各自的理由,着眼点不同,标准也就不同了。但是我们还是可以从它们的共性去考虑它们的复杂度。

字符串类模板通常都很轻量,不在本节讨论范围之内。对于非字符串模板复杂度评判的共性标准是什么?我认为,可以考量数据绑定的复杂度。

本文所指的数据绑定不只是插值,还包括上下文以及事件,甚至是整个运行期的宿主环境。

事实上至少需要达到 VDOM 级别的引擎才具有这种能力,因为通过 VDOM 可以映射到真实的 DOM 节点。

大概有几种模式(组合):

  1. 入口参数是个 Object,模板中的变量 x 是该对象的 .x 属性,例:virtual-stache-example
  2. 特定语法或属性,比如:Vue.js 的 <a v-on:click="doSomething">...</a>,属性 computed、methods
  3. 抽象的语义化属性,比如:Vue.js 的 active 这个词适用于多种场景,容易理解且不产生歧义
  4. 不负责绑定,需要使用者非常熟悉原生方法,用原生方法进行绑定,比如:PowJS

这些模式只是理论方面的,通常是模板引擎设计者要解决的问题。对于使用者来说不如直接问:

  1. 可以在 HTML 模板中直接写最简单的 console.log(context) 来调试么?
  2. 可以在多层 DOM 树绑定或传递不同的上下文参数么?
  3. 可以在多层 DOM 树内层向上访问已经生成的 Node 么?

模板引擎团队会给你正确的解决办法,但通常和问题字面描述的目标有所差异。我觉得这就是你评判选择的关键,你对官方给出的正确方法的认可度。

嵌入到 DOM 中

嵌入到 HTML 中

这是本文开篇 PHP 自述里面的话,历史原因使得 PHP 依然是服务器端的超文本预处理器,HTML 在 PHP 中依然是字符串,但是:PHP 视角中的 HTML 就是字符串,PHP 真的无缝嵌入到 HTML 这个 "宿主" 中了。

在 WEB 业内标准完善,环境大大改善的今天,前端模板引擎能不能突破仅仅嵌入到 HTML 字符串或嵌入到 VDOM,能不能真正地

嵌入到 DOM 中

PowJS 做到了这一点,其实我也是 PowJS 的设计者。PowJS 是这么实现的:

  • 实现模板必须要实现的指令
  • 预编译输出原生 ECMAScript 代码
  • 模板语法结构与 ECMAScript 函数写法一致

最终,写 PowJS 模板就像在写 ECMAScript 函数。

GoHub index 中的写法

<template>
  <details func="repo" param="data" if="is.object(data.content)&&!sel(`#panel details[sha='${data.sha}']`)"
    open
    let="ctx=data.content"
    sha="{{data.sha}}"
    origin="{{ctx.Repo}}"
    repo="{{data.owner}}/{{data.repo}}"
    subdir="{{ctx.Subdir||''}}"
    filename="{{ctx.Filename}}"
    render=":ctx"
    do="this.renew(sel(`#panel details[repo='${data.owner}/${data.repo}']`))"
    break
  >
    <summary>{{ctx.Description}}</summary>
    <div if="':';" each="ctx.Package,val-pkg">
      <p title="{{pkg.Progress}}: {{pkg.Synopsis}}">{{pkg.Import}}</p>
    </div>
  </details>
  <dl func="list" param="data"
    if="!sel(`#panel details[sha='${data.sha}']`)&&':'||'';"
    each="data.content,data.sha,val-rep"
    do="this.appendTo(sel('#panel'))">
    <details sha="{{sha}}" repo="{{rep.repo}}">
      <summary>{{rep.synopsis}}</summary>
    </details>
  </dl>
</template>

多数模板引擎都会实现 if 、each 这些指令,上面的 PowJS 模板中还有:

  • 全局对象 is、sel
  • 模板(函数)命名 repo 、list
  • 模板(函数)入口形参 data
  • 自定义局部变量 ctx
  • 下层模板(函数)形参推导 data.sha->sha
  • 遍历值到下层模板形参推导 (ctx.Package,val-pkg)->pkg 、(data.content,val-rep)->rep
  • DOM 节点操作 this.renew、 this.appendTo,这直接渲染到页面 DOM 树
  • 流程控制 break
  • 伪节点 if="':';",渲染时根本不生成 div 节点,它是个伪节点,相当于块代码符号 "{}"

关键是整个模板结构,指令语义和 ECMAScript 函数完全一致:

  • 没有数据绑定,你写的是 ECMAScript 函数,传参数好了,要什么绑定
  • 没有事件绑定,每个节点都是真实存在的,直接写 addEventListener 就好了
  • 要调试,随便找个 do 或 if 或 let 插入 _=console.log(x), 就好了,逗号表达式几乎可以无缝插入所有原生语句
  • 所有的业务逻辑都是使用者自己写的,PowJS 只负责把他们粘合成一个函数
  • 导出视图是 ECMAScript 源码,下图截取自演示 My Folders



那么 PowJS 是最终的选择么?PowJS 的理念是原生性,原生的 DOM,原生的 ECMAScript。

原生也同样是 PowJS 的问题所在,不是所有的使用者都喜欢原生,我相信有的使用者更喜欢更抽象风格,他们眼中的原生总是带了点 "原始"。

原生意味着你可以扩展,引入其它 library 进行搭配,但 PowJS 永远不会出现 define setter/getter实现的 watcher,那超出了模板引擎的范围,如果有那一定是独立的项目。

最后,我的观点依然是:你的需求才是选择模板的关键,适合你的才是好的。

作者介绍

喻恒春,野生程序员,常年出没于 bug 丛林。

© 著作权归作者所有

共有 人打赏支持
编辑部的故事

编辑部的故事

粉丝 1085
博文 231
码字总数 392922
作品 0
深圳
运营/编辑
加载中

评论(6)

喻恒春
喻恒春

引用来自“南漂一卒”的评论

为啥 GitHub 仓库 archive 了?
迁移到 gitee 和 gitlab 了, 双备份,
迁移的原因, 你可以猜到的, 某个事件, github 我还是会继续浏览, 还是会继续提问题或 PR,
但不会把自己的项目放上去了,
一种态度而已
南漂一卒
南漂一卒
为啥 GitHub 仓库 archive 了?
3
3535yy
新版文字感觉像没排版过。。
_cxd
_cxd
:blush:#OSCHINA#
_cxd
_cxd
:laughing:
跨语言模板引擎--Crox

Crox 是一个由 JavaScript 语言实现的高性能跨语言模板引擎。Crox 模板可以直接在JavaScript环境中使用,也可以翻译成 PHP、JSP 等其他编程语言的可执行方法或翻译成 Velocity、Smarty 等其他...

叶秀兰 ⋅ 2015/02/03 ⋅ 0

关于beetl认识的几个误区

beetl 现在国内越来越流行,社区网站每日访问量都有上千,下载量每日保持在20个左右(无法统计maven的)。qq群在满员之前已经踢走了一拨又一拨的不活跃会员还有少量价值观不符合的人(写这个...

闲大赋 ⋅ 2016/09/14 ⋅ 17

如何选择Javascript模板引擎(javascript template engine)?

日期:2012-9-17 来源:GBin1.com 随着前端开发的密集度越来越高,Ajax和JSON的使用越来越频繁,大家肯定免不了在前台开发中大量的使用标签,常见到的例子如下: 你的到了一个JSON对象,如下...

gbin1 ⋅ 2012/09/17 ⋅ 0

一个精巧的Javascript Template引擎

基于MVC模式的web框架在渲染页面时,都会提供可以内嵌后端语言的模板引擎,用于使用动态数据生成页面。在某些场景下,无法使用后端的模板引擎,但又需要使用动态数据渲染页面内容,这时便可选...

con ⋅ 2014/03/29 ⋅ 4

聊一聊前端模板与渲染那些事儿

欢迎大家收看聊一聊系列,这一套系列文章,可以帮助前端工程师们了解前端的方方面面(不仅仅是代码): http://my.oschina.net/MrHou/blog?catalog=477313&temp=1466755903794 1 页面级的渲染...

侯禹 ⋅ 2016/07/02 ⋅ 0

一种web编程的新的模板处理思路

目前web开发中充斥着各种各样的模板引擎,从前端到后端,性能优劣暂且不论,剖析其大体工作方式,可以概括为:实例化模板!也就是将Controller处理结果生产的Model数据通过模板引擎渲染View(...

hanzhankang ⋅ 2013/11/07 ⋅ 4

SpringBoot --web 综合开发

上篇文章介绍了Spring boot初级教程 :《 spring boot(一):入门篇 》,方便大家快速入门、了解实践Spring boot特性;本篇文章接着上篇内容继续为大家介绍spring boot的其它特性(有些未必是s...

mjt95 ⋅ 01/15 ⋅ 0

springboot(二):web综合开发

上篇文章介绍了Spring boot初级教程:spring boot(一):入门篇,方便大家快速入门、了解实践Spring boot特性;本篇文章接着上篇内容继续为大家介绍spring boot的其它特性(有些未必是spring ...

ityouknow ⋅ 2017/04/11 ⋅ 0

Chair:支付宝前端团队推出的Node.js Web框架

Chair是支付宝前端团队推出的,基于Node.js的Web框架,适用于大部分的Web应用。 本文简要介绍Chair的设计思想、功能架构和开发状况。 一、Chair的由来和设计思想 历史上,支付宝前端项目都是...

小云栖 ⋅ 2016/01/15 ⋅ 55

js模板引擎 Handlebar 教程

如果你从事前端开发的话,或者使用javascript开发动态前端页面比较多的话,对于javascript模板引擎一定不会陌生。关注gbin1博客的朋友肯定还记得我们曾经介绍过的一个在线选择javascript模板...

gbin1 ⋅ 2012/12/27 ⋅ 3

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Linux中的端口大全

1 被LANA定义的端口 端口 名称 描述 1 tcpmux TCP 端口服务多路复用 5 rje 远程作业入口 7 echo Echo 服务 9 discard 用于连接测试的空服务 11 systat 用于列举连接了的端口的系统状态 13 d...

寰宇01 ⋅ 12分钟前 ⋅ 0

Confluence 6 如何备份存储文件和页面信息

备份的 ZIP 文件包含有 entities.xml,这个 XML 文件包含有 Confluence 的所有页面内容和存储附件的目录。 备份 Zip 文件结构 页面的附件是存储在附件存储目录中的,通过页面和附件 ID 进行识...

honeymose ⋅ 15分钟前 ⋅ 0

【每天一个JQuery特效】根据状态确定是否滑入或滑出被选元素

主要效果: 本文主要采用slideToggle()方法实现以一行代码同时实现以展开或收缩的方式显示或隐藏被选元素。 主要代码如下: <!DOCTYPE html><html><head><meta charset="UTF-8">...

Rhymo-Wu ⋅ 19分钟前 ⋅ 0

度量.net framework 迁移到.net core的工作量

把现有的.net framework程序迁移到.net core上,是一个非常复杂的工作,特别是一些API在两个平台上还不能同时支持。两个类库的差异性,通过人工很难识别全。好在微软的工程师们考虑到了我们顾...

李朝强 ⋅ 24分钟前 ⋅ 0

请不要在“微服务”的狂热中迷失自我!

微服务在过去几年一直是一个非常热门的话题(附录1)。何为“微服务的疯狂”,举个例子: 众所周知,Netflix在DevOps上的表现非常棒。Netfix可以做微服务。因此:如果我做微服务,我也将非常...

harries ⋅ 25分钟前 ⋅ 0

oAuth2 升级Spring Cloud Finchley.RELEASE踩坑分享

背景 6.19号,spring团队发布了期待已久的 Spring Cloud Finchley.RELEASE 版本。 重要变化: 基于Spring Boot 2.0.X 不兼容 Spring Boot 1.5.X 期间踩过几个坑,分享出来给大伙,主要是关于...

冷冷gg ⋅ 55分钟前 ⋅ 0

OSChina 周一乱弹 —— 理发师小姐姐的魔法

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @冰冰棒- :分享田馥甄的单曲《My Love》 《My Love》- 田馥甄 手机党少年们想听歌,请使劲儿戳(这里) @Li-Wang :哎,头发又长了。。。又要...

小小编辑 ⋅ 今天 ⋅ 8

Kafka1.0.X_消费者API详解2

偏移量由消费者管理 kafka Consumer Api还提供了自己存储offset的功能,将offset和data做到原子性,可以让消费具有Exactly Once 的语义,比kafka默认的At-least Once更强大 消费者从指定分区...

特拉仔 ⋅ 今天 ⋅ 0

NEO智能合约之发布和升级(二)

接NEO智能合约之发布和升级(一),我们接下来说说智能合约的升级功能。 一 准备工作 合约的升级需要在合约内预先设置好升级接口,以方便在升级时调用。接下来我们对NEO智能合约之发布和升级...

红烧飞鱼 ⋅ 今天 ⋅ 0

个人博客的运营模式能否学习TMALL天猫质量为上?

心情随笔|个人博客的运营模式能否学习TMALL天猫质量为上? 中国的互联网已经发展了很多年了,记得在十年前,个人博客十分流行,大量的人都在写博客,而且质量还不错,很多高质量的文章都是在...

原创小博客 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部