时下流行什么react, avalon, angular, vue什么，其核心都离不开前端模板。理解前端模板，是我们了解MV* 的关键。
前端框架最重要的目的是将页面渲染出来。“渲染”（render）这个词最初不是前端的东西的。前端之前叫做切图，将设计师做的PSD变成一个静态页面，然后加上动态交互。但是我们有许多数据是来自后端，如何将数据加入静态页面呢？于是又多了一套工序叫“套页面”。套页面的过程实际就是将静态页面变成切割成一块块，每一块都是一个php，jsp或vm文件，它们是后端模板引擎的处理对象！
其实模板是不局限于后端还是前端的， 模板的本质是用于从数据（变量）到实际的视觉表现（HTML代码）这项工作的一种实现手段。由于后端近水楼台先得月（取数据比较方便），因此先在后端发展出这种技术。这些后端模板文件是活动于服务器的，然后经过复杂的处理，最后由浏览器渲染出来。这时的渲染是将服务器拼接好的静态文本变成一个DOM树的过程。
如果要实现前端实现MVC或MVP，那些工序必须发生改变。静态文件产出是不变，尤其是大公司，分工够细，有专门的切图组（大多数是妹子）将它们做出来。接着是套页面，这时就不能使用后端模板引擎，需要引入前端模板引擎。由于实现一个前端模板引擎太简单了，经过多年的发展，已经有众多好用的轮子：
https://github.com/janl/musta…
基于JavaScript的Logic-less（无逻辑或轻逻辑）模板。
https://github.com/twitter/ho…
上面的优化版，twitter出品
https://github.com/wycats/han…
完全兼容mustcache的语法
https://github.com/paularmstr…
拥有更强悍的模板继承与block 重写功能
https://github.com/mozilla/nu…
跟django的模板系统相似，可以说swig的升级版，是gitbook的御用前端模板
其它推荐的还有ejs， 易学易用，对有过ASP/PHP/JSP编程经验的人来说，非常亲切自然，缺点就是功能有点简单。
其他doT, xtempalate， Underscore Templates。
最不推荐是jade， 有点华而不实，过度设计，导致套页面工作量大，性能其差。
虚拟DOM时代流行的jsx就是无逻辑模板。之所以流行无逻辑或轻逻辑模板，其主要原因是改动成本比较少，像jade这样自造语法糖太多，从美工手中拿来的html需要大动干戈，进行摧心折骨般的改造才能套数据。对于模板来说，最简单而言，就是将某个可变数据放到适当的地方（填空），而其次，可以控制这个区域输出不输入（if指令)，或让其个区域循环输入多次（for指令)，更强制，实现模板互相套嵌（layout与block）。为了实现if与for有两种方法，一种是单纯的区域，插入一个js 语句，里面有if语句与for语句，另一种是使用语法糖，比如说 ms-for, ms-repeat, ng-if, ng-repeat。语法糖的用法比直接使用JS语句简单，但是带来学习成本与拓展功能。每一个模板 if, for指令的语法都不一样的，并且你想在循环做一些处理，比如过滤一些数据，或突然在某处中断，这又得引用一些新的语句。随着模板要求前后共用，就有了传输成本，直接写JS语句在模板里面肯定比不过语法糖。因此基于这种种原因，mustache风格的模板就成为主流。
现在三种模板风格：
PHP/ASP/JSP风格：
|
1 2 3 4 5 6 7 8 9 |
<% if ( list.length ) { %> <ol> <% for ( n=0; n<list.length; ++n ) { %> <li> <%= list[n] %> </li> <% } %> </ol> <% } %> |
mustcache风格，高级语法有限，通常难自定义拓展：
|
1 2 3 4 5 6 7 8 9 |
{{#if list.length}} <ol> {{#each list item}} <li> {{ item }} </li> {{/each}} </ol> {{/if}} |
属性绑定风格：
|
1 2 3 4 5 |
<ol ms-if="list.length"> <li ms-for="item in list"> {{item}} </li> </ol> |
前两者只能出现于script, textarea等容器元素内部。因此<分隔符与标签的<容器造成冲突，并且也不利于IDE的格式化处理。属性绑定风格则是MVVM时期最流行的模板定义风格，某页面某个区域就是一个模板，不需要进行入append等操作。
我们再来看如何实现前端模板。前端模板的本质就是一个可以转换函数（渲染函数）的字符串。渲染函数放进一个充满数据的对象后，还原为一个全新的字符串。因此重点是如何构建一个渲染函数。最简单的方式是正则，还记得第二章的format方法吗，这就是一个轻型的填充数据的方法。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
function format(str, object) { var array = Array.prototype.slice.call(arguments, 1); return str.replace(/\\?\#{([^{}]+)\}/gm, function(match, name) { if (match.charAt(0) == '\\') return match.slice(1); var index = Number(name) if (index >= 0) return array[index]; if (object && object[name] !== void 0) return object[name]; return ''; }); } |
format方法是通过#{ }来划分静态内容与动态内容的，一般来说它们称之为定界符（delimiter）。#{为前定界符，}为后界符，这个#{}其实是ruby风格的定界符。通常的定界符是<%与%>，{{与}} 。通常在前定界符中还有一些修饰符号，比如=号，表示这个会输出到页面，-号，表示会去掉两旁的空白。
将下例，要编译成一个渲染函数
|
1 2 3 4 5 |
var tpl = '你好,我的名字啊<%name%>, 今年已经 <%info.age%>岁了' var data = { name: "司徒正美", /span>{ name: "司徒正美", Ě数据是来自后端，如何将数据加入静态页面呢？于是又多了一套工序叫“套页面”。套页面的过程实际就是将静态页面变成切割成一块块，每一块都是一个php，jsp或vm文件，它们是后端模板引擎的处理对象！
其实模板是不局限于后端还是前端的， 模板的本质是用于从数据（变量）到实际的视觉表现（HTML代码）这项工作的一种实现手段。由于后端近水楼台先得月（取数据比较方便），因此先在后端发展出这种技术。这些后端模板文件是活动于服务器的，然后经过复杂的处理，最后由浏览器渲染出来。这时的渲染是将服务器拼接好的静态文本变成一个DOM树的过程。 如果要实现前端实现MVC或MVP，那些工序必须发生改变。静态文件产出是不变，尤其是大公司，分工够细，有专门的切图组（大多数是妹子）将它们做出来。接着是套页面，这时就不能使用后端模板引擎，需要引入前端模板引擎。由于实现一个前端模板引擎太简单了，经过多年的发展，已经有众多好用的轮子： https://github.com/janl/musta… https://github.com/twitter/ho… https://github.com/wycats/han… https://github.com/paularmstr… https://github.com/mozilla/nu… 其它推荐的还有ejs， 易学易用，对有过ASP/PHP/JSP编程经验的人来说，非常亲切自然，缺点就是功能有点简单。 其他doT, xtempalate， Underscore Templates。 最不推荐是jade， 有点华而不实，过度设计，导致套页面工作量大，性能其差。 虚拟DOM时代流行的jsx就是无逻辑模板。之所以流行无逻辑或轻逻辑模板，其主要原因是改动成本比较少，像jade这样自造语法糖太多，从美工手中拿来的html需要大动干戈，进行摧心折骨般的改造才能套数据。对于模板来说，最简单而言，就是将某个可变数据放到适当的地方（填空），而其次，可以控制这个区域输出不输入（if指令)，或让其个区域循环输入多次（for指令)，更强制，实现模板互相套嵌（layout与block）。为了实现if与for有两种方法，一种是单纯的区域，插入一个js 语句，里面有if语句与for语句，另一种是使用语法糖，比如说 ms-for, ms-repeat, ng-if, ng-repeat。语法糖的用法比直接使用JS语句简单，但是带来学习成本与拓展功能。每一个模板 if, for指令的语法都不一样的，并且你想在循环做一些处理，比如过滤一些数据，或突然在某处中断，这又得引用一些新的语句。随着模板要求前后共用，就有了传输成本，直接写JS语句在模板里面肯定比不过语法糖。因此基于这种种原因，mustache风格的模板就成为主流。 现在三种模板风格： PHP/ASP/JSP风格：
mustcache风格，高级语法有限，通常难自定义拓展：
属性绑定风格：
前两者只能出现于script, textarea等容器元素内部。因此 我们再来看如何实现前端模板。前端模板的本质就是一个可以转换函数（渲染函数）的字符串。渲染函数放进一个充满数据的对象后，还原为一个全新的字符串。因此重点是如何构建一个渲染函数。最简单的方式是正则，还记得第二章的format方法吗，这就是一个轻型的填充数据的方法。
format方法是通过 |
