之前寫小網頁裡有遇到在DOM中增加大量的html結構的時候，傻乎乎的在js中寫一堆模版，然後用replace一個一個做替換。當時就是難看了點，不覺得啥，現在瞭解了模版引擎之後回頭來看真的比較捉急了，以後是不會那麼傻了

看了《javascript程式設計實戰》這本書後，個人認為比較好用的一個模版引擎，Underscore中的template方法。

_.template(templateString, [data], [settings])

這是template方法的api，可接受三個引數，其中：

第一個引數也是必須的引數是模版字串，你可以通過<%=  %> 來插入變數，還可以通過<%  %>來插入js程式碼，也可以通過<%-  %>來進行html轉義，如果變數很多，可以使用<% print() %>來簡化。

第二個引數是傳入模版的資料，如果不傳第二個引數，那麼這個方法會返回一個模版函式，這個模版函式可以穿入資料返回完成的模版，如果傳入data引數則會直接返回一個已完成的模版。

第三個引數是設定，比如這個方法預設是尋找<%  %>來進行替換。

用法其實很簡單

//定義模板
var tem = _.template("hello <%= name %>");
//編譯模板
var compiled=tem({name: mike});
console.log(complied);  //hello mike
//追加到DOM上
$('body').append(complied); 

<span style="font-size:18px;">var compiled = _.template("hello: <%= name %>");
compiled({name: 'moe'});
=> "hello: moe"

var list = "<% _.each(people, function(name) { %> <li><%= name %></li> <% }); %>";
_.template(list, {people: ['moe', 'curly', 'larry']});
=> "<li>moe</li><li>curly</li><li>larry</li>"

var template = _.template("<b><%- value %></b>");
template({value: '<script>'});
=> "<b><script></b>"</span>
 

可以注意到，模版中可以插入js程式碼，那麼對於很長的帶有相當重複性的內容，可以做這樣的處理

將他和其他JavaScript完全隔離開

type="text/template"表示這是個模板

<script type="text/template" id="tpl">
  <% _.each(data, function(n){ %>
    <p>姓名：<%= n.name %>,年齡：<%= n.age %>,性別：<%= n.sex %></p>
  <% }); %>
</script
 
>

var data = [
  {
    name: 'mike',
    age: 18,
    sex: '男'
  }，
  {
    name: 'nina',
    age: 20,
    sex: '女'
  },
  {
    name: 'elle',
    age: 26,
    sex: '女'
  }
];    
$('body').append(_.template($('#tpl').html(), data));

這樣在js程式碼中就可以只作資料處理，而不用出現那一串又臭又長的模版字串，大大提高了程式碼可讀性，也在某種意義上實現了資料和表現的分離。