Javascript前端模板引擎

性能优化

写这么一个小东西的动机，是因为在netease实习的过程当中，使用到了前端模板引擎jst，虽然以前也使用过，就是在使用python的web frame - tornado的时候，也是用到类似于模板框架，只不过那个是后端特定的字段数据到前端，前端只需要在相对应的地方监控该字段数据就可以了。在富ajax应用的今天，显然这种方式不太适用，更加轻便的方法，只需要在获取了数据之后，通过前端模板语言，将数据组装好，插入到模板当中，进行相对应的渲染就好了。

首先，可以先来了解一下实现前端模板的方案

1. String-based模板技术(基于字符串的parse和compile过程)
2. Dom-based模板技术
3. Living template技术
4. Virtual DOM

这里面，前面两种都与innerHTML有着千丝万缕的关系，我们得知道innerHTML这一个东西，相信很多人都已经用过这个api了，首先对于innerHTML，其优缺点，我觉得如下

优点：

• 简洁、明了，便与书写
• 快，在 old IE当中，也表现很好
• 自动完成了 string 2 Dom 的转换

缺点：

• 安全问题

  document.body.innerHTML = '<img src=x onerror="alert('xss')">'

• 慢
  刚才说快，是因为他对于大块区域的替换，很快，但是比如你只需要修改一个标签的属性值，使用innerHTML更换整个DOM，显然是不符合效率的，低效
• 笨拙
  因为替换只能替换一整块DOM，不能进行微调，如果要精细到标签，又需要自己进行精密的维护，个人认为，对于大块区域的，还是可以用暴力的方法解决

String-based Template

基于字符串的模板引擎，其最大的功劳，就是将你从大量夹杂着逻辑的字符串当中解放出来，基于字符串进行操作。

其基本原理可以用下面的一张图来进行解释

过程：
string → AST → Function → data + render → string → innerHTML → DOM

从图里，可以看到 string-based强烈依赖于 innerHTML进行输出

应用例子：
doT.js

优点：
1. 快速初始化时间
2. 解析语法支持更好，因为不是使用自建的DSL(Domain Specific Language)就是使用基于JavaScript语法，而DOM-based模板更依赖于DOM

缺点：
见 innerHTML的缺点

Dom-based Template

直接上图吧，它的流程大致如下

Dom-based的模板技术事实上并没有完整的parse的过程(先抛开表达式不说)，如果你需要从一段字符串创建出一个view，你必然通过innerHTML来获得初始Dom结构. 然后引擎会利用Dom API(attributes, getAttribute, firstChild... etc)层级的从这个原始Dom的属性中提取指令、事件等信息，继而完成数据与View的绑定，使其"活动化"。

所以Dom-based的模板技术更像是一个数据与dom之间的"链接"和"改写"过程。

应用例子：
Angular、Vue

优点：
1. 动态，活动的，compile之后，data与View仍然保持联系，即你可以不依赖与手动操作Dom API来更新View
2. 运行时高效，实现局部刷新

缺点：
1. innerHTML的缺点
2. 无独立parser，不像string-based可以使用自建的DSL或者是Js的解析器，首次获取必须通过innerHTML来获取节点

Living Template

这个模板方案应该说是 前面两种的结合，就是为了让其脱离对innerHTML的依赖，其流程图大致如下

解析的时候，使用自建的DSL，构建成抽象语法树，根据DOM进行操作，进行数据的绑定

Virtual DOM

由于后面这两种方案，暂时认识的还不是特别多，所以说不出特别多的东西，virtual DOM的实现者，就是 React，大概的意思呢，就是在React当中操作Dom，并不是在真正的DOM当中进行操作，而是在虚拟DOM当中进行操作，React定时使用diff算法检查二者差异，并且达到最小化更新DOM。

运用virtual dom实现前端模板引擎，可以看看 戴大大的blog

为了理解第一种 string-based templatea，查找了资料之后，写了一个最简单版本的前端模板引擎，只能识别 {user.name}，未对一些控制语句、流语句进行解析，小白作品，不喜勿喷

easy template engine