模板引擎

模板引擎发展史

模板引擎实现方式很多，最简单是“置换型”模板引擎，
这类模板引擎只是将指定模板内容(字符串)中的特定标记(子字符串)替换一下便生成了最终需要的业务数据。
还有解释型 模板引擎 ，编译型模板引擎等。

Side区分

客户端模板引擎
主要结合JS实现HTML，例如handlebarjs mustache，实现方式为拼接字符串。
另一种React，使用Virtual DOM
服务端模板引擎
以velocity这种为代表，可结合Java等语言实现，
由服务端生成html返回客户端。

模板引擎定义

模板引擎是一个将页面模板和要显示的数据结合起来
的生成HTML页面的工具.
一般我们认为模板引擎是MVC种的View

传统服务端渲染方式

代表： PHP : Smarty Java： Velocity
对于PHP JSP来说，模板语言就是它们的宿主语言(Java PHP等)
而模板是属于服务端动态页面的内置功能。
ASP PHP JSP将动态语言部分通过特殊的标签包含起来，通过HTML和模板标签混排，输出HTML。 页面中充斥大量的逻辑代码。

传统模板引擎

这种方式，重点不在于struts2，而是vo和el表达式，其基本思想是：根据页面需要的信息，构造出一个实体，这个实体中包含了界面需要的所有属性，通常这个实体是由N个表中的字段构成的，俗称vo。由于vo的属性可以是String、List、Map等等等，又可以vo套vo，因此这种方式非常灵活，也非常好用。
在后台对vo进行赋值，通过struts2封装到request中，然后在界面用el表达式，通常是${}、forEach标签什么的，即可构造出界面。

缺点
1)因为这种利用标签控制html，依然是把表现和控制混杂在一起，html里边混杂了大量el控制标签，很不美观。
2)利用el表达式生成html代码，这是一个在服务器端执行的动作，在服务器端解析完成之后，才发送到客户端浏览器上，这样做会占用大量服务器资源，而且速度缓慢。
3)跟宿主语言有很大的关联性，各种语言采用的模板语言不同，包含各种特殊标记，导致移植性差。

Json+ajax+拼html

这种方法一般是基于ajax请求，要求服务器端返回一个json类型的json字符串，这个json串中包含了界面所需的所有信息，界面拿到json串后，构造出html，完成界面展示。
因为服务器端只需要提供一个json串，由客户端完成解析，因此服务器承受的压力很小，目前的电脑配置都较高，客户端的浏览器解析js脚本很快，因此页面体验效果好。
解析的过程大致是通过Jquery的each方法，进行遍历。
原始的拼接html的方式，页面中写了大量html+=”< div >”;，这种写法使页面变得非常凌乱，几乎不可以维护。

Jade

1. 超强可读性，灵活易用的缩进
2. 代码默认经过编码处理，以增强安全性
3. 编译及运行时的上下文错误报告
4. 命令行编译支持
5. HTML5模式
6. 可选的内存缓存
7. 联合动态的静态标记类
8. 利用过滤器解析树的处理

与一般后台模板引擎相似：
服务器端使用jade，在服务器端把模板渲染好了，客户端上面拿到的是已经编译好的代码

Jade 工程不一定要生成 html文件。 jade可以在express工程中直接被编译了

app.set('view engine', 'jade');//set the template engine

在Express中可以直接调用jade模板引擎
jade引擎是动态加载的，我们可以直接刷新页面来查看效果~

模板引擎（Jade）的强大之处

模板包含
include 一个jade模板文件，
模板继承
一个块是(一个block)
extends layout
block content 减少代码重复， 解决子文件和父文件，模板复用。 不同的页面都能用同一个公共的代码

mixin 重用

模板存储

自定义的JavaScript文件中以行内形式存储
把模板保存在js文件中，并不推荐，因为这需要将视图的代码放入一个控制器中！

<script type="text/x-jquery-tmpl" id="someTemplate">       <span>${getName()}</span></script>

远程加载
根据需要Ajax 远程加载这个模板，好处是初始化页面体积小，但是模板加载渲染UI很慢，使用js构建应用的主要原因就是速度问题，所以加载资源时要非常小心！

模板保存到HTML页面
不存在UI加载慢的问题，避免AJAX加载模板，模板就在要展示的位置以行内形式存放，
缺点：增加了初始页面的体积！
当服务器开启了压缩和缓存的时候，其实这种性能损失不值一提

ejs 跟jade 模板引擎对比

一个性质， nodejs 模板引擎， 也可以用在前端。
它们是有逻辑的模板引擎，不仅仅起到替换字符串变量等。
ejs和jade就很像 java和php等后端语言的模板引擎

• 文件以.ejs .jade 结尾，可以include 复用， extends继承。
• 然后把变量什么的 嵌在模板文件当中。
• 循环啊 条件语句 生成视图。(一般就是读取对象或数组的时候 ，生成li 列表)
• 可以 前置， 追加代码块， 包含
• Miixin 编译的模板里会被jade转换为普通的JavaScript函数。
• 本质是服务端渲染， 在服务器端渲染成html页面。

Node端模板引擎实现

主要看看render函数怎么实现，
它负责把类似 hellowworld <%= username%> 这样的模板语句转为”hellowworld”+obj.username。

var tpl=str.replace(/<%=    ([\S\s]+?)%>/g,function(match,code){    return "'+obj."+code+"+'";});tpl="var tpl='"+tpl+"'\nreturn tpl;";var compiled=new Function('obj',tpl);return compiled(data);

这里返回的是一个模板函数，然后执行它，tpl存的就是函数体，obj是传入参数。 然后传入实际的data数据给它来执行。

1. 语法分解，提取出普通字符串和表达式，利用正则匹配。
2. 处理表达式。将标签表达式转为普通语言表达式
3. 生成待执行的语句。
4. 与数据一起执行，生成最终字符串

模板编译

为了能够最终于数据一起执行生成字符串，我们需要将原始的模板字符串转换成一个函数对象。
为了提高模板渲染的性能，我们通常采用模板预编译

var compile=function(str){    var tpl=str.replace(/<%=([\s\S]+?)%>/g,function(match,code){        return "'+obj."+code+"+'";    });    tpl="var tpl='"+tpl+"'\nreturn tpl;";    return new Function('obj,escape',tpl);}

其实这里我们生成的函数应该是像下面这样的：

function(obj){    var tpl='Hello '+obj.username+'.';    return tpl;}

其实模板技术就是替换特殊标签的技术

var render=function(compiled,data){    return compiled(data);}

我们这个compile函数需要缓存，因为它跟实际数据无关，它只是模板编译，生成的中间函数只是与模板字符串有关~！

模板性能

• 缓存模板文件
• 缓存模板文件编译后的函数

模板技术的出现，将业务开发和HTML输出的工作流分开，设计原理就是单一职责原理。