浅谈Web中前后端模板引擎的使用深挖了Underscore_.template方法的源码后，感觉还是有必要写下这篇文章的，要么自己备忘，要么供还没有使用过前端模板引擎的同学介绍。（熟悉模板引擎的可以帮作者看看文章有没有bug。。）后端MVC说起模板渲染，首先接触的不是前端模板引擎，而是后端。后端MVC模式，一般是从Model层读取数据，然后将数据传递给View层进行渲染（渲染成HTML文件），而View层一般使用模板引擎，比如楼主项目用的PHP。聪明的模板引擎。随意感受一下上面的代码。
{{foreachfrom=$pageArray.resultitem=leftMenukey=keyname=leftMenu}}{{$key}}{{foreachfrom=$leftMenukey=key2item=item2}}{{$key2}}{{/foreach}}{{/foreach}} 传入View层的其实是一个名为$pageArray的JSON数据。MVC模型也非常容易理解。推荐看一下阮一峰老师讲MVC模型，再看下图。以往的WEB项目大多会采用这种后台MVC模式，有利于SEO，而且相比前端请求接口方式，少了一个HTTP请求，理论上加载速度可能会稍微快一些。但是缺点也非常明显。前端写好静态页面后，需要让后端“套模板”。如果页面中有复杂的JS，是前端写还是后端写？前端写的话，数据不多，调试不方便。如果后端写...那么你看到的PHPer一般都是JS。前端模板AJAX的出现，使得前后端分离成为可能。后端侧重于业务逻辑，为前端提供接口，前端通过AJAX向后端请求数据，然后动态渲染页面。我们假设界面数据如下：[{name:"apple"},{name:"orange"},{name:"peach"}]假设渲染页面如下：
前端模板引擎出现之前，我们一般是这样做的：
其实楼主也经常这样做。看起来简单方便，但这样做的弊端也很明显。HTML代码（View层）和JS代码（Controller层）混在一起，UI和逻辑代码混在一起，读起来会很吃力。一旦业务变得复杂，或者多人维护时，几乎会失控。而如果需要拼接的HTML代码中有很多引号（比如大量的href属性和src属性），那么就非常容易出错（做过这个的应该都有深刻的理解）。这时候前端模板引擎就出现了，Underscore的_.template可能是最简单的前端模板引擎了（可能没有上升到引擎的高度，也可能只是一个前端模板函数）。_.template的实现先不说，用它重写上面的代码。
这样前端如果要改html代码，只需要改模板即可。这样做的好处很明显，前端UI和逻辑代码不再混杂，阅读体验好，修改起来也方便很多。前后端分离的坏处可能是SEO弱。毕竟爬虫只能抓取HTML代码，不会渲染JS。（PS：目前谷歌爬虫已经可以抓取AJAX使AJAX应用可抓取，具体效果未知）Node中间层的简单后端模板引擎（后端MVC）和前端模板引擎有一定的局限性.Node的出现给了我们第三种选择，让Node作为中间层。怎么做？简单的说就是让一个后台语言（比如Java？PHP？）简单的提供渲染页面所需要的接口，Node中间层使用模板引擎来渲染页面，让页面直接出来。这样后台提供的接口不仅可以在Web端使用，也可以在APP和浏览器端使用。同时，页面Node不会影响SEO，而且前后端也是分离的，是一种相对安全的方案。小结本文简单介绍了模板引擎在前后端的使用。接下来，我们将回归Underscore，着重分析_.template的用法和源码原理。
