原地址：https://github.com/hanzichi/underscore-analysis/issues/25

前言
這篇文章本來(lái)不打算寫的，實(shí)話說(shuō)樓主對(duì)前端模板的認(rèn)識(shí)還處在非常初級(jí)的階段，但是為了整個(gè) 源碼解讀系列 的完整性，在深入 Underscore _.template 方法源碼后，覺(jué)得還是有必要記下此文，為了自己備忘也好，為了還沒(méi)用上前端模板引擎的同學(xué)的入門也好。（熟悉模板引擎的可以幫樓主看看文中有沒(méi)有 BUG ..）
后端 MVC
說(shuō)起模板渲染，樓主首先接觸的其實(shí)并不是前端模板引擎，而是后端。后端 MVC 模式中，一般從 Model 層中讀取數(shù)據(jù)，然后將數(shù)據(jù)傳到 View 層渲染（渲染成 HTML 文件），而 View 層，一般都會(huì)用到模板引擎，比如樓主項(xiàng)目中用到的 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 層的其實(shí)就是個(gè)叫做 $pageArray 的 JSON 數(shù)據(jù)。而 MVC 模式也是非常容易理解，推薦看下阮一峰老師的 談?wù)凪VC模式，然后再看看下面這張圖。

web_mvc

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

假設(shè)渲染后的頁(yè)面如下：

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

前端模板引擎出現(xiàn)之前，我們一般會(huì)這么做：

<div></div>
<script>
// 假設(shè)接口數(shù)據(jù)
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>

其實(shí)樓主個(gè)人也經(jīng)常這么干，看上去簡(jiǎn)單方便，但是這樣做顯然有缺點(diǎn)，將 HTML 代碼（View 層）和 JS 代碼（Controller 層）混雜在了一起，UI 與邏輯代碼混雜在一起，閱讀起來(lái)會(huì)非常吃力。一旦業(yè)務(wù)復(fù)雜起來(lái)，或者多人維護(hù)的情況下，幾乎會(huì)失控。而且如果需要拼接的 HTML 代碼里有很多引號(hào)的話（比如有大量的 href 屬性，src 屬性），那么就非常容易出錯(cuò)了（這樣干過(guò)的應(yīng)該深有體會(huì)）。
這個(gè)時(shí)候，前端模板引擎出現(xiàn)了，Underscore 的 _.template 可能是最簡(jiǎn)單的前端模板引擎了（可能還上升不到引擎的高度，或者說(shuō)就是個(gè)前端模板函數(shù)）。我們先不談 _.template 的實(shí)現(xiàn)，將以上的代碼用其改寫。

<div></div>
<script src="http://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>
// 模擬數(shù)據(jù)
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>

這樣一來(lái)，如果前端需要改 HTML 代碼，只需要改模板即可。這樣做的優(yōu)點(diǎn)很明顯，前端 UI 和邏輯代碼不再混雜，閱讀體驗(yàn)良好，改動(dòng)起來(lái)也方便了許多。
前后端分離最大的缺點(diǎn)可能就是 SEO 無(wú)力了，畢竟爬蟲(chóng)只會(huì)抓取 HTML 代碼，不會(huì)去渲染 JS。（PS：現(xiàn)在的 Google 爬蟲(chóng)已經(jīng)可以抓取 AJAX 了 Making AJAX applications crawlable，具體效果未知）
Node 中間層
單純的后端模板引擎（后端 MVC）以及前端模板引擎方式都有一定的局限性，Node 的出現(xiàn)讓我們有了第三種選擇，讓 Node 作為中間層。
具體如何操作？簡(jiǎn)單地說(shuō)就是讓一門后臺(tái)語(yǔ)言（比如 Java？PHP？）單純提供渲染頁(yè)面所需要的接口，Node 中間層用模板引擎來(lái)渲染頁(yè)面，使得頁(yè)面直出。這樣一來(lái)，后臺(tái)提供的接口，不僅 Web 端可以使用，APP，瀏覽器也可以調(diào)用，同時(shí)頁(yè)面 Node 直出也不會(huì)影響 SEO，并且前后端也分離，不失為一種比較完美的方案。
總結(jié)
本文簡(jiǎn)單介紹了模板引擎在前后端的使用，下文我們回到 Underscore，重點(diǎn)分析下 _.template 的使用方式以及源碼原理。