模板引擎

时间： 作者：joseph

模板引擎是什么？

模板引擎（这里特指用于Web开发的模板引擎）是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的HTML文档。

模板引擎能做什么？

MVC
模板引擎可以让（网站）程序实现界面与数据分离，这就大大提升了开发效率，良好的设计也使得代码重用变得更加容易。
模板引擎不只是可以让你实现代码分离（业务逻辑代码和用户界面代码），也可以实现数据分离（动态数据与静态数据），还可以实现代码单元共享（代码重用），甚至是多语言、动态页面与静态页面自动均衡（SDE）等等与用户界面可能没有关系的功能。

模板引擎的优点

模板引擎在做的事情也无非是几个分离，但对应的对象是结构、数据、逻辑和表现：

  • 结构：最终要展现出来的结构框架，也即“模板”本身，比如上例中的表格。
  • 数据：不用多解释，要展现出来的数据。
  • 逻辑：即业务逻辑代码，不包含可能存在于模板引擎中的逻辑处理。
  • 表现：数据的具体表现，比如日期可以有各种不同的格式。

数据和结构分离

这是一个模板引擎最最基本的功能，即将结构框架和要展现的数据完全独立开来，不让它们直接进行拼接。比如上例中，在使用了模板引擎之后，tmpl和myData就已经不存在直接拼接的行为，而是最后使用模板引擎将它们两者组合起来。如果这一点做不到，实在不能称为“模板引擎”。

数据和逻辑分离

所谓数据和逻辑分离，是指数据处理应该和业务逻辑分离开来。业务逻辑应该只专业于数据读写、用户交互等与业务具体相关的事情，至于数据展现上的一些抉择，比如这里是显示“Yes”还是显示“是”，应该交给处理数据的部分来进行。这样的分工可以有效保持数据处理部分的完整性，使业务逻辑和数据处理部分的耦合减少。对这两部分来说，都是既便于复用，也便于后期维护。

表现与逻辑分离

数据的最佳存储方式与数据的最佳表现方式很多时候并不一致。比如时间类型的数据，最佳的存储方式无疑是时间戳（如1377399298），而最佳的表现方式则是我们最为熟悉的年月日的表示方式（如2013年8月25日）。此时就需要在数据展现前进行一些格式化。
数据的格式化不像分支逻辑或者遍历逻辑那么简单，它是一个五花八门的工作。比如就时间而言，就有无数种格式，有时候需要2013年8月25日，有时候需要2013-08-25，有时候需要11:03，有时候需要2 mins ago……更别说其它更多的数据类型了。因此，做数据格式化往往有一些专门的逻辑，简单一点的可能是一个小函数，复杂一点的则可能是类似moment.js之类的库。
格式化代码不应该出现在业务代码中，最理想的方式是作为一个单独的文件外挂进来，然后由模板引擎直接调用。

模板引擎都有哪些？

  1. JSP
    JSP全称Java Server Pages，是一种动态网页开发技术。它使用JSP标签在HTML网页中插入Java代码。标签通常以<%开头以%>结束。
    JSP是一种Java servlet，主要用于实现Java web应用程序的用户界面部分。网页开发者们通过结合HTML代码、XHTML代码、XML元素以及嵌入JSP操作和命令来编写JSP。
    JSP通过网页表单获取用户输入数据、访问数据库及其他数据源，然后动态地创建网页。
    JSP标签有多种功能，比如访问数据库、记录用户选择信息、访问JavaBeans组件等，还可以在不同的网页中传递控制信息和共享信息。
  2. Velocity
    velocity模板语法的javascript实现，Velocity是基于Java的模板引擎，应用广泛。Velocity模板适用于大量模板使用的场景，支持模板嵌套，复杂的逻辑运算，包含基本数据类型、变量赋值和函数等功能。
  3. Freemarker
    FreeMarker是一个模板引擎，一个基于模板生成文本输出的通用工具，使用纯Java编写
    FreeMarker被设计用来生成HTML Web页面，特别是基于MVC模式的应用程序
    虽然FreeMarker具有一些编程的能力，但通常由Java程序准备要显示的数据，由FreeMarker生成页面，通过模板显示准备的数据
  4. beetle
    Beetle 作为新一代的模板引擎，它融入了传统模板引擎没有的概念和思想，而且在功能和性能上也没有落下。
    功能完备：同主流的java模板引擎相比，Beetl具有绝大多数功能。适用于各种应用场景，从对响应速度有很高要求的大网站到功能繁多的CMS管理系统都适合。Beetl本身还具有很多独特功能来完成模板编写和维护，这是其他模板引擎所不具有的。
    非常简单：类似Javascript语法和习俗，只要半小时就能通过半学半猜完全掌握用法。拒绝其他模板引擎那种非人性化的语法和习俗。
    超高的性能：Beetl 远超过主流java模板引擎性能，而且消耗较低的CPU
    易于整合：Beetl能很容易的与各种web框架整合，如Spring MVC，JFinal,Struts,Nutz，Jodd，Servlet等。
    支持模板单独开发和测试，即在MVC架构中，即使没有M和C部分，也能开发和测试模板。
    扩展和个性化：Beetl支持自定义方法，格式化函数，虚拟属性，标签，和HTML标签. 同时Beetl也支持自定义占位符和控制语句起始符号也支持使用者完全可以打造适合自己的工具包.
  5. Thymeleaf
    Thymeleaf是一个开源的Java模板引擎库。
    它的核心目标是提供一种优雅的，结构良好的的方式去创建我们所需要的模板。
    为了实现这个目标Thymeleaf全部基于XML标签和属性去定义模板的处理逻辑，而不是想其他模板引擎一样在模板中编写逻辑代码。
    所以Thymeleaf项目与其他模板引擎的最大优势，其模板文件本身也是一个格式良好的HTML文件，并且可以直接被浏览器打开。改变了在传统模板引擎下前端设计人员和后端开发人员的协作方式，能有效的提高工作效率。
  6. baiduTemplate
    baiduTemplate希望创造一个用户觉得“简单好用”的JS模板引擎
    提供一套模板语法，用户可以写一个模板区块，每次根据传入的数据，
    生成对应数据产生的HTML片段，渲染不同的效果。
  7. Smarty
    Smarty的特点是将模板编译成PHP脚本，然后执行这些脚本。很快，非常灵活。
    是一个模板类，一般也简称为模板。Smarty里面有专门的模板引擎。模板的主要功能就是逻辑与显示的分离，也就是PHP和HTML的分离。
  8. artTemplate
    原理：动态执行JavaScript字符串！
    优点：
  • 预编译：渲染需要动态编译JavaScript字符串完成变量赋值。而artTemplate的编译赋值过程却是在渲染之前完成的
  • 更快的字符串相加方式： IE6-8的浏览器下，数组push方法拼接字符串会比“+=”快，而在v8引擎中，使用“+=”方式比数组拼接快4.7倍；所以 artTemplate 根据JavaScript引擎特性采用了两种不同的字符串拼接方式。
  • 支持运行时调试，可精确定位异常模板所在语句：（动态解析，所以调试器无法定位到错误）渲染的时候遇到错误会进入调试模式重新编译模板，而不会影响正常的模板执行效率。模板编译器根据模板换行符记录行号，当执行过程遇到错误，立马抛出异常模板对应的行号，模板调试器再根据行号反查模板对应的语句并打印到控制台。源码L282
  • 对Node端支持良好，便于以后统一扩展！
  1. laytpl
    laytpl是一款颠覆性的JavaScript模板引擎，它用巧妙的实现方式，将自身的体积变得小巧玲珑，不仅性能接近极致，并且还具备传统js引擎的几乎所有功能。
    性能卓绝，执行速度比号称性能王的artTemplate、doT还要快将近1倍，比baiduTemplate、kissyTemplate等快20-40倍，数据规模和渲染频率越大越明显
    体积小到极致，只有1kb。
    具备转义等安全机制，比较科学的报错功能
    模版中可任意书写Native JavaScript，充分确保模版的灵活度
    支持应用在Node.js平台
    支持所有古代或现代的主流浏览器
  2. Underscore
    Underscore 是一个JavaScript实用库,提供了类似Prototype.js (或 Ruby)的一些功能,但是没有扩展任何JavaScript内置对象。
    它弥补了部分jQuery没有实现的功能,同时又是Backbone.js必不可少的部分。
    Underscore提供了80多个函数,包括常用的: map, select, invoke — 当然还有更多专业的辅助函数,如:函数绑定, JavaScript模板功能, 强类型相等测试, 等等.
    在新的浏览器中, 有许多函数如果浏览器本身直接支持,将会采用原生的,如 forEach, map, reduce, filter,every, some 和 indexOf。
    我们使用Underscore一般配合backbone，用得最多的还是里面的模板引擎。
  3. Embedded JS Templates
    Embedded JS（EJS） 来源于ERB模板，且与ERB有很多相似之处。它有着与ERB相同的Tag，且包含很多相同的功能。
    EJS的特别之处在于，你需要把模板存于单独文件中，并将文件名传递给EJS。它会加载该文件，并返回HTML。
  4. Jade
    Jade — Node Template Engine，一个高性能的模板引擎，为 Node 而做，用 JavaScript 实现。
    Node.js 的 Express.js 框架默认用的就是 Jade。
    Jade 还有其他语言的实现，可以实现前后端渲染的统一。比如 php、ruby、python、java、scala。
  5. Razor
    Razor是ASP.NET MVC 3中新加入的技术，以作为ASPX引擎的一个新的替代项。简洁的语法与.NET Framework 结合，广泛应用于ASP.NET MVC 项目。Razor Pad是一个编辑Razor脚本的工具，脱离于ASP.NET 和Visual Studio。
  6. xtemplate
    xtemplate 是独立的富逻辑模板引擎，基于浏览器和 Node.js 的可扩展的模板引擎库。
    xtemplate 支持异步控制和继承，包括逻辑表达式，自定义函数等等。
    xtemplate 语法类似 mustache

模板引擎的原理与实现

模板引擎的实现方式有很多，最简单的是“置换型”模板引擎，这类模板引擎只是将指定模板内容（字符串）中的特定标记（子字符串）替换一下便生成了最终需要的业务数据（比如网页）。
置换型模板引擎实现简单，但其效率低下，无法满足高负载的应用需求（比如有海量访问的网站），因此还出现了“解释型”模板引擎和“编译型”模板引擎等。

JSP为例

1、工作原理 —— 拼字符串成为代码。
那最简单的 JSP 举例（因为这货第一次运行会被编译，比较好说事儿）
如图。
jsp1.jpg-143.2kB
<%%>内的是模板内容

是页面内容
当JSP运行被，编译为Servlet Class后，其实做了黄字标注的操作
<%%> 被去掉，内部即为正常的JAVA代码

被加引号成为字符串（回车换行也被变为转义字符）
输出字符串内容。

2、流程 —— 访问时，转换模板代码为目标源码执行，或者第一次运行时转为目标源码（缓存），后续直接调用源码运行。

所以，不管怎么样模板转换与目标代码执行肯定要消耗资源（只是消耗多点少点问题），肯定会比不用模板直接输出 HTML 来的有压力。

3、依赖性
从1原理可知，哪方实现的模板引擎，就依赖哪方。
在server端实现模板引擎时，依赖server端。
在客户端实现依赖客户端。
所以，只要在客户端实现一种模板解析方式（引擎），用来读取模板内容，分析并转为客户端可执行的程序源码，并运行，就可以脱离服务端，在浏览器端渲染页面，而不依赖服务端。

4、浏览器端模板 —— 依据原理，JS 可作：
js.jpg-86.8kB
剩下的无非是怎么用正则或者其他字符串处理手段将模板字符串拼接为js源码字符串。
并用 eval 或者 new Funciton 等手段，执行拼接后源码。

此代码可实时执行，或者如同jsp一般，第一次运行时执行模板->源码拼接，然后将拼接后源码缓存，之后执行模板不再进行重复拼接工作。

当然，此类优化手段很多，可以自己慢慢玩。

5、前端模板是否好
这是仁者见仁智者见智的事情，就不细说了，需要根据具体项目情况综合考虑。
无非就是全前置，前后各半和全后置模板这几种。
一般来说，前端模板会分担一部分服务器压力，毕竟把一（小）部分计算分摊到了客户端上。
但是可能会给（半前置）模板统一管理和更新上带来点问题。
也会给客户端增加（些许）压力。
或者会造成SEO、不支持JS浏览器如何显示等体验性问题需要解决。

6、前端模板类型

这里只根据你说的服务端模板，给出对应前端模板实现思路。
此类模板开源的有的是，GitHub 搜去吧。

实际上前端模板实现不只这（字符串拼接）一种方式，可自行拓展知识面，这里就懒得说了 = =|||

如何比较模板引擎的优劣

  1. 语法丰富
  2. 语法简单
  3. 速度：http://aui.github.io/artTemplate/test/test-speed.html

参考文章

http://www.toobug.net/article/how_to_design_front_end_template_engine.html

java
template engine