浅谈 Web 中前后端模板引擎的使用

chenjiang3 发布于2019-08-20 11:56 / 2589人阅读

摘要：前端模板的出现使得前后端分离成为可能。总结本文简单介绍了模板引擎在前后端的使用，下文我们回到，重点分析下的使用方式以及源码原理。楼主对于模板引擎的认识比较浅显，有不正之处希望指出感谢

前言

这篇文章本来不打算写的，实话说楼主对前端模板的认识还处在非常初级的阶段，但是为了整个源码解读系列的完整性，在深入 Underscore _.template 方法源码后，觉得还是有必要记下此文，为了自己备忘也好，为了还没用上前端模板引擎的同学的入门也好。（熟悉模板引擎的可以帮楼主看看文中有没有 BUG ..）

后端 MVC

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


  
    {{foreach from=$pageArray.result item=leftMenu key=key name=leftMenu}}
      {{$key}}
      {{foreach from=$leftMenu key=key2 item=item2}}
        {{$key2}}
      {{/foreach}}
    {{/foreach}}

传入 View 层的其实就是个叫做 $pageArray 的 JSON 数据。而 MVC 模式也是非常容易理解，推荐看下阮一峰老师的谈谈MVC模式，然后再看看下面这张图。

以前的 WEB 项目大多会采用这种后台 MVC 模式，这样做有利于 SEO，并且与前端请求接口的方式相比，少了个 HTTP 请求，理论上加载速度可能会稍微快些。但是缺点也非常明显，前端写完静态页面，要让后台去「套模板」，每次前端稍有改动，后台对应的模板页面同时也需要改动，非常麻烦。页面中如果有复杂的 JS，前端写还是后端写？前端写的话，没有大量的数据，调试不方便，后端写的话... 所以楼主看到的 PHPer 通常都会 JS。

前端模板

AJAX 的出现使得前后端分离成为可能。后端专注于业务逻辑，给前端提供接口，而前端通过 AJAX 的方式向后端请求数据，然后动态渲染页面。

我们假设接口数据如下：

 [{name: "apple"}, {name: "orange"}, {name: "peach"}]

假设渲染后的页面如下：


  
    apple
    orange
    peach

前端模板引擎出现之前，我们一般会这么做：

其实楼主个人也经常这么干，看上去简单方便，但是这样做显然有缺点，将 HTML 代码（View 层）和 JS 代码（Controller 层）混杂在了一起，UI 与逻辑代码混杂在一起，阅读起来会非常吃力。一旦业务复杂起来，或者多人维护的情况下，几乎会失控。而且如果需要拼接的 HTML 代码里有很多引号的话（比如有大量的 href 属性，src 属性），那么就非常容易出错了（这样干过的应该深有体会）。

这个时候，前端模板引擎出现了，Underscore 的 _.template 可能是最简单的前端模板引擎了（可能还上升不到引擎的高度，或者说就是个前端模板函数）。我们先不谈 _.template 的实现，将以上的代码用其改写。

这样一来，如果前端需要改 HTML 代码，只需要改模板即可。这样做的优点很明显，前端 UI 和逻辑代码不再混杂，阅读体验良好，改动起来也方便了许多。

前后端分离最大的缺点可能就是 SEO 无力了，毕竟爬虫只会抓取 HTML 代码，不会去渲染 JS。（PS：现在的 Google 爬虫已经可以抓取 AJAX 了 Making AJAX applications crawlable，具体效果未知）

Node 中间层

单纯的后端模板引擎（后端 MVC）以及前端模板引擎方式都有一定的局限性，Node 的出现让我们有了第三种选择，让 Node 作为中间层。

具体如何操作？简单地说就是让一门后台语言（比如 Java？PHP？）单纯提供渲染页面所需要的接口，Node 中间层用模板引擎来渲染页面，使得页面直出。这样一来，后台提供的接口，不仅 Web 端可以使用，APP，浏览器也可以调用，同时页面 Node 直出也不会影响 SEO，并且前后端也分离，不失为一种比较完美的方案。

总结

本文简单介绍了模板引擎在前后端的使用，下文我们回到 Underscore，重点分析下 _.template 的使用方式以及源码原理。

PS：楼主对于模板引擎的认识比较浅显，有不正之处希望指出~感谢！

服务器托管专线服务前后端前后端分离 webrtc前后端前后端分离开发

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80708.html

浅谈web中前端模板引擎的使用

摘要：置换型模板引擎的优点实现简单，缺点效率低，无法满足高负载的应用请求。用途百度词条模板引擎可以让网站程序实现界面与数据分离，业务代码与逻辑代码的分离，提升开发效率，良好的设计也提高了代码的复用性。前端模板的出现使得前后端分离成为可能。模板引擎模板引擎-百度词条什么是模板引擎？（百度词条）模板引擎（这里特指用于Web开发的模板引擎）是为了使用户界面与业务数据分离而产生的，它可以生成...

妤锋シ 2019-08-23 12:36 评论0 收藏0
浅谈前后端分离与实践（一）

摘要：前后端的界限是按照浏览器和服务器的划分。前后端彼此互不关联。关于作者本文部分图片段落参考文章实践中的前后端分离。淘宝前后端分离实践本文源码详见服务端代码。一、起源（故事纯属虚构，如有雷同，纯属巧合）传说在很久很久以前，我们有志之士有了个创业的想法，于是乎开始了自己的创业之梦，但是人手不足啊，于是乎所有角色老子一个人全包了： Roles: PM, DBA, RD, FED, Des...

dantezhao 2019-08-01 17:46 评论0 收藏0
浅谈前后端分离与实践（一）

摘要：前后端的界限是按照浏览器和服务器的划分。前后端彼此互不关联。关于作者本文部分图片段落参考文章实践中的前后端分离。淘宝前后端分离实践本文源码详见服务端代码。一、起源（故事纯属虚构，如有雷同，纯属巧合）传说在很久很久以前，我们有志之士有了个创业的想法，于是乎开始了自己的创业之梦，但是人手不足啊，于是乎所有角色老子一个人全包了： Roles: PM, DBA, RD, FED, Des...

yy13818512006 2019-08-21 16:59 评论0 收藏0
浅谈前后端分离与实践（一）

摘要：前后端的界限是按照浏览器和服务器的划分。前后端彼此互不关联。关于作者本文部分图片段落参考文章实践中的前后端分离。淘宝前后端分离实践本文源码详见服务端代码。一、起源（故事纯属虚构，如有雷同，纯属巧合）传说在很久很久以前，我们有志之士有了个创业的想法，于是乎开始了自己的创业之梦，但是人手不足啊，于是乎所有角色老子一个人全包了： Roles: PM, DBA, RD, FED, Des...

hearaway 2019-08-05 12:11 评论0 收藏0
关于前后端分离与模板引擎

摘要：但似乎他们的职责在以前甚至于现在都并不明确，虽然前端是跟浏览器打交道，但是最终浏览器拿到的页面是服务器通过模板生成的一个临时静态页面而已。当然，一般传统上的开发协作模式有两种一种是前端先写一个静态页面，写好后，让后端去套模板。随着不同终端（Pad/Mobile/PC)的兴起，对开发人员的要求越来越高，纯浏览器端的响应式已经不能满足用户体验的高要求，往往需要针对不同的终端开发定制的版本，为了提...

cnTomato 2019-04-23 13:40 评论0 收藏0