JavaScript代碼中使用Underscore的模板引擎

前端開(kāi)發(fā)有時(shí)候避免不了要在JavaScript代碼中插入HTML代碼，插入的代碼少時(shí)還好些，如果比較多，在以后的編輯中會(huì)出現(xiàn)很多問(wèn)題，例如一不小心可能漏掉某個(gè)雙引號(hào)、加號(hào)等導(dǎo)致語(yǔ)法錯(cuò)誤。為了將它們剝離開(kāi)，出現(xiàn)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><script></b>"

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

在Node.js中使用Underscore是需要進(jìn)行安裝的，可以使用包管理器NPM來(lái)安裝。

下面通過(guò)一個(gè)靜態(tài)資源服務(wù)的案例來(lái)演示Node.js中如何使用Underscore。

(1)在chapter07目錄下創(chuàng)建項(xiàng)目目錄static-server。

(2)進(jìn)入static-server目錄下，輸入npm init-y命令進(jìn)行npm初始化。