更新時間:2022-09-09 來源:黑馬程序員 瀏覽量:
前端開發(fā)有時候避免不了要在JavaScript代碼中插入HTML代碼,插入的代碼少時還好些,如果比較多,在以后的編輯中會出現(xiàn)很多問題,例如一不小心可能漏掉某個雙引號、加號等導致語法錯誤。為了將它們剝離開,出現(xiàn)JavaScript 模板。
Underscore是一個JavaScript實用庫,提供了一整套函數(shù)式編程的實用功能,但是沒有擴展任何JavaScript內(nèi)置對象。下面要介紹的template是Underscore 提供的一個實用功能一一模板引擎,template功能將JavaScript模板編譯為可以用于頁面呈現(xiàn)的函數(shù),通過JSON數(shù)據(jù)源生成復雜的HTML并呈現(xiàn)出來。
模板函數(shù)的使用語法如下:
_.template(templateString, [settings])
在上述語法中,templateString參數(shù)通常是字符串,模板函數(shù)可以使用<%=...%>插入變量,也可以用<%...%>執(zhí)行任意的JavaScript代碼。如果要想模板中插入一個值,并讓其進行HTML轉(zhuǎn)義,可以使用<%-…%>。具體用法如下:
(1)賦值:
var compiled = _.template("hello: <%= name % >"); compiled((name: 'moe'}); => "hello:moe"
上述語法中,使用_.template()函數(shù)定義了一個變量name,然后compiled()函數(shù)用于name屬性注入數(shù)據(jù)moe。
(2)需要轉(zhuǎn)義:
var template = _.template("<b><%- value % ></b>"); template({value: '<script>'}); => "<b><script></b>"
在上述語法中,插入<script>值并且成功轉(zhuǎn)義為<script>。
在Node.js中使用Underscore是需要進行安裝的,可以使用包管理器NPM來安裝。
下面通過一個靜態(tài)資源服務的案例來演示Node.js中如何使用Underscore。
(1)在chapter07目錄下創(chuàng)建項目目錄static-server。
(2)進入static-server目錄下,輸入npm init-y命令進行npm初始化。