模板引擎原理

1》模板概念

通常是指嵌入某种动态编程语言代码的文本，数据和模板通过某种形式的结合可以变化出不同的结果，模板通常用来定义显示的形式，能够使数据展示更加丰富，而且容易维护

2》模板的好处

1)简化了html书写

2)通过编程元素（比如循环和条件分支），对数据的展现更具有控制力

3)分离数据与展现，使得展现的逻辑和效果更易维护

3》模板引擎

通过分析模板，将数据和模板结合在一起输出最后的结果的程序称为模板引擎

从模板引擎的实现上看，需要依赖编译语言的动态编译或者动态解释的特性，以简化实现和提高性能

4》实现原理

先获取html中对应的id下的innerHTML，利用开始标签和关闭标签进行字符串切分，其实是将模板划分成两部分内容，一部分是html部分，一部分是逻辑部分，通过区别一些特殊符号比如each，if等来讲字符串拼接成函数式字符串，将两部分各自经过处理后(正则处理），再次拼接到一起，最后将拼接好的字符串采用new

Function()方式转换成所需要的函数

1.正则抠出要匹配的内容

2.装入数组

3.分辨js逻辑部分

4.引擎函数

5.把data扔进去

5》相关知识

1)模板存放：模板一般放置到textarea/input等表单控件或者script等标签中

<script type="template" id="tempalte">

   <h2>
      <a href="{{href}}">
          {{title}}
      </a>
  </h2>
  <img src="{{imgsrc}}" alt="{{title}}">

</script>

2)模板获取：一般通过ID获取

document.getElementById("id");

3)模板函数：一般都是templateFun("id",data),id是存放模板字符串的元素id，data是需要装载的数据

模板解析编译：模板解析主要是指将模板中js语句和html分离出来，编译的话将模板字符串编译创最终的模板

6》高效的秘密

预编译：编译赋值过程是在渲染之前完成的，arttemplate模板编译器会根据一些简单的规则提取好所有模板变量，声明在渲染函数头部

更快的字符串相加方式：IE6-8浏览器下，push方法拼接字符串会比+=快，现代浏览器+=会比push方法快。

Arttemplate根据js引擎特性采用两种不同的字符串拼接方式

7》调试模式原理

前端模板引擎不像后端模板引擎，它是动态解析，所以调试器无法定位到错误，而arttemplate通过巧妙的方式让模板调试可以精确定位到引发渲染错误的模板语句

1)支持两种类型的错误捕获

(1)渲染错误：一般是因为模板数据错误或者变量错误产生的，渲染的时候只有遇到错误才会进入调试模式重新编译模板，而不会影响正常的模板执行效率，模板引擎根据模板换行符记录行号，当执行过程遇到错误，立马抛出异常模板对应的行号，模板调试器再根据行号反查模板对应的语句并打印到控制台

(2)编译错误：一般是模板语法错误，如不合格的嵌套，未知语法等，由于arttemplate没有进行完整的词法分析，故无法确定错误源所在的位置，只能对错误信息与源码进行原文输出，供开发者判断