Underscore模版引擎的使用－template方法

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

今天就介紹一下個人認為比較好用的一個模版引擎，Underscore中的template方法，我覺得underscore這個庫真的不錯，有計划邊看源碼邊分析學習，到時候也會總結一些心得吧。

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

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

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

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

第三個參數是設置，比如這個方法默認是尋找<%  %>來進行替換，可以通過設置它來改變具體的方法可以參照這里

用法其實很簡單

var cmpiled = _.template("hello <%= name %>");
compiled.({name: mike}); // "hello mike"

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

<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代碼中就可以只作數據處理，而不用出現那一串又臭又長的模版字符串，大大提高了代碼可讀性，也在某種意義上實現了數據和表現的分離。