underscore.js簡單有效的模板引擎

如今Javascript的模板引擎有很多，多到難以選擇，以至於有個頁面幫助你選擇模板引擎。它們的設計目標和特性也迥異，有基於字符串替換，也有基於Dom文檔樹操作。有的設計於瀏覽器端，也有的用於後端Node.js，當然還有前後端都支持如dust.js。如果你要開發單頁面應用程序SPA，流行的框架如AngularJS和EmberJS都包含了雙向數據綁定（two way data binding），因而不需要模板引擎了。

我近期開發熱聞網時，也面臨模板引擎的選擇問題。我個人很喜歡Angularjs這種雙向數據綁定，但是由於這個項目不是單頁面應用程序，用AngularJS不適合。此外Handlebars.js也很火，可是它的變量標記是{{.}}，這與我後端的Jinja2模板標記衝突，不予考慮。最後我決定使用小而精的Underscore.js庫。Underscore.js因它提供的大量函數式編程特性而聞名。我這裏僅討論使用它裏面的template函數做模板引擎。然而，官方文檔中提到的例子太過簡單。

var compiled = _.template("hello: <%= name %>");

如上，模板只是一個JS字符串，不適合複雜的模板。幸好我之前看過另一種用法，更加優雅。將模板的內容嵌入一個script標籤中，如下所示。

<script type="text/template" id="comment">

<%- comment.user %> post <%- comment.text %>.
</script>

然後在正常的腳本中獲取這段模板內容，並生成渲染函數。

<script>

var render = _.template($('script#comment').html(), {variable: 'comment'});

var data = { user: 'ab', text: 'hello' };
var result = render(data);

上面片段中result便是參數渲染後的結果了。是不是簡單有效呢？