2023年6月29日发(作者：)

前端模板后端 MVC说起模板渲染，楼主⾸先接触的其实并不是前端模板引擎，⽽是后端。后端 MVC 模式中，⼀般从 Model 层中读取数据，然后将数据传到View 层渲染（渲染成 HTML ⽂件），⽽ View 层，⼀般都会⽤到模板引擎，⽐如楼主项⽬中⽤到的 PHP 的 smarty 模板引擎。随便上段代码感受⼀下。

　　传⼊ View 层的其实就是个叫做 $pageArray 的 JSON 数据。⽽ 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：现在的 Google 爬⾍已经可以抓取AJAX 了 ，具体效果未知）Node 中间层单纯的后端模板引擎（后端 MVC）以及前端模板引擎⽅式都有⼀定的局限性，Node 的出现让我们有了第三种选择，让 Node 作为中间层。具体如何操作？简单地说就是让⼀门后台语⾔（⽐如 Java？PHP？）单纯提供渲染页⾯所需要的接⼝，Node 中间层⽤模板引擎来渲染页⾯，使得页⾯直出。这样⼀来，后台提供的接⼝，不仅 Web 端可以使⽤，APP，浏览器也可以调⽤，同时页⾯ Node 直出也不会影响SEO，并且前后端也分离，不失为⼀种⽐较完美的⽅案。总结本⽂简单介绍了模板引擎在前后端的使⽤，下⽂我们回到 Underscore，重点分析下 _.template 的使⽤⽅式以及源码原理。PS：楼主对于模板引擎的认识⽐较浅显，有不正之处希望指出~感谢！