Node先后端分离基本归纳

首先从一个重要的概念“模板”提及。 广义上来讲，web中的模板就是填充数据后能够生成文件的页面。 严格意义上来讲，应该是模板引擎利用特定格式的文件和所提供的数据编译生成页面。模板大体分为前端模板（如ejs）和后端模板（如freemarker）分别在浏览器端和服务器端编译。

所谓的前端渲染就是当咱们去http请求的时候，咱们先去请求到的是模版文件，随后数据才会过来，后端渲染是后端模板和数据结合好了之后整个的传给浏览器

后端 MVC

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

<div> <ul class="well nav nav-list" style="height:95%;"> {{foreach from=$pageArray.result item=leftMenu key=key name=leftMenu}} <li class="nav-header">{{$key}}</li> {{foreach from=$leftMenu key=key2 item=item2}} <li><a target="main" href='{{$item2}}'>{{$key2}}</a></li> {{/foreach}} {{/foreach}} </ul> </div>

传入 View 层的其实就是个叫作 $pageArray 的 JSON 数据。而 MVC 模式也是很是容易理解，而后再看看下面这张图。

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

 

前端模板

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

咱们假设接口数据以下：

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

假设渲染后的页面以下：

<div> <ul class="list"> <li>apple</li> <li>orange</li> <li class="last-item">peach</li> </ul> </div>

前端模板引擎出现以前，咱们通常会这么作：

<div></div> <script> // 假设接口数据 var data = [{name: "apple"}, {name: "orange"}, {name: "peach"}]; var str = ""; str += '<ul class="list">'; for (var i = 0, len = data.length; i < len; i++) { if (i !== len - 1) str += "<li>" + data[i].name + "</li>"; else str += '<li class="last-item">' + data[i].name + "</li>"; } str += "</ul>"; document.querySelector("div").innerHTML = str; </script>

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

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

<div></div>
<script src="//cdn.bootcss.com/underscore.js/1.8.3/underscore.js"></script>
<script type="text/template" id="tpl">
  <ul class="list">
    <%_.each(obj, function(e, i, a){%>
      <% if (i === a.length - 1) %>
        <li class="last-item"><%=e.name%></li>
      <% else %>
        <li><%=e.name%></li>
    <%})%>
  </ul>
</script>

<script>
// 模拟数据
var data = [{name: "apple"}, {name: "orange"}, {name: "peach"}];

var compiled = _.template(document.getElementById("tpl").innerHTML);
var str = compiled(data);
document.querySelector("div").innerHTML = str;
</script>

 

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

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

Node 中间层

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

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