首頁(yè)技術(shù)文章正文

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

更新時(shí)間:2022-08-29 來(lái)源:黑馬程序員 瀏覽量:

  前端開(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;'。

分享到:
在線咨詢 我要報(bào)名
和我們?cè)诰€交談!