模版引擎

背景

背景是公司有项目技术栈是jQuery + Underscore

Underscore把htmlTemplate数据进行替换，添加到浏览器中，生成dom节点
Underscore的问题

• 语法不友好，容易漏掉结束符号，分割符号比较复杂
• 打包的体积很大，方法很多，但是覆盖率小

因此手搓了一个模板引擎
listen-template
速度对比
speed-test

模版引擎介绍

引擎应该实现哪些功能

1. 计算，生成对应模板字符串
2. 分支，循环能力 if for
3. 安全，防止xss攻击
4. 嵌套，调用其他已定义模版，include，渐进式构成网页
5. 扩展，模板增加功能函数，简化操作

模版引擎原理

模版引擎如何实现

1. Split
   词法语法分析，切割成不同的快以便做后续的分析
2. forHtml & forJs
   按切割的奇偶顺序，不同的块不同的逻辑处理
3. toString & command
   将变量输出到echo函数根据指令运行不同的逻辑
4. Compile
   通过new Function生成对应函数，并且绑定默认的一些方法

模版引擎速度对比

引擎列表

1. Handlebars 功能强大的引擎
2. artTemplate 国人出品的著名引擎
3. underscore 功能强大的引擎
4. listen-template diy

总结

1 为什么不是最快的
进行循环的时候创建了函数作用域，没有直接使用for速度快

2 为什么比较快
放弃了引擎帮寻找作用域等操作，直接从data或者当前取值，某些引擎甚至用了with

3 为什么会考虑造一个轮子
不明白其中原理，很难定位错误，看了其他框架源码后，觉得有优化的必要,使用了简单模版引擎

4 为什么没有使用es6
年代比较久远～