Web前端培訓(xùn)：使用Underscore的模板引擎

　　前端開(kāi)發(fā)有時(shí)候避免不了要在JavaScript代碼中插入HTML代碼，插入的代碼比較多時(shí)，在以后的編輯中容易出現(xiàn)問(wèn)題，例如，一不小心可能漏掉某個(gè)雙引號(hào)、加號(hào)導(dǎo)致語(yǔ)法錯(cuò)誤等，為了將它們剝離開(kāi)，誕生了JavaScript模板。

　　Underscore是一個(gè)JavaScript實(shí)用庫(kù)，提供了一整套函數(shù)式編程的實(shí)用功能，但是沒(méi)有擴(kuò)展任何JavaScript內(nèi)置對(duì)象。下面介紹的template是Underscore提供的一個(gè)實(shí)用功能——模板引擎，template功能將JavaScript模板編譯為可以用于頁(yè)面呈現(xiàn)的函數(shù)，通過(guò)JSON數(shù)據(jù)源生成復(fù)雜的HTML并呈現(xiàn)出來(lái)。

　　模板函數(shù)的使用語(yǔ)法如下：

_.template(templateString, [settings])

　　在上述語(yǔ)法中，templateString參數(shù)通常是字符串，模板函數(shù)可以使用<%= ...%>插入變量，也可以用<%...%>執(zhí)行任意的JavaScript代碼。如果要想在模板中插入一個(gè)值，并讓其進(jìn)行HTML轉(zhuǎn)義，可以使用<%-...%>。具體用法如下：

　　(1)賦值：

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

　　上述語(yǔ)法中，使用_.template()函數(shù)定義了一個(gè)變量name，然后compiled()函數(shù)用于向name屬性注入數(shù)據(jù)'moe'。

　　(2)需要轉(zhuǎn)義：

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

　　在上述語(yǔ)法中，插入值'<script>'，并且成功轉(zhuǎn)義為'&lt;script&gt;'。