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

前端开发有时候避免不了要在JavaScript代码中插入HTML代码，插入的代码少时还好些，如果比较多，在以后的编辑中会出现很多问题，例如一不小心可能漏掉某个双引号、加号等导致语法错误。为了将它们剥离开，出现JavaScript 模板。

Underscore是一个JavaScript实用库，提供了一整套函数式编程的实用功能，但是没有扩展任何JavaScript内置对象。下面要介绍的template是Underscore 提供的一个实用功能一一模板引擎，template功能将JavaScript模板编译为可以用于页面呈现的函数，通过JSON数据源生成复杂的HTML并呈现出来。

模板函数的使用语法如下：

_.template(templateString,  [settings])

在上述语法中，templateString参数通常是字符串，模板函数可以使用<%=...%>插入变量，也可以用<%...%>执行任意的JavaScript代码。如果要想模板中插入一个值，并让其进行HTML转义，可以使用<%-…%>。具体用法如下：

(1)赋值：

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

上述语法中，使用_.template()函数定义了一个变量name,然后compiled()函数用于name属性注入数据moe。

(2)需要转义：

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

在上述语法中，插入<script>值并且成功转义为&lt;script&gt。

在Node.js中使用Underscore是需要进行安装的，可以使用包管理器NPM来安装。

下面通过一个静态资源服务的案例来演示Node.js中如何使用Underscore。

(1)在chapter07目录下创建项目目录static-server。

(2)进入static-server目录下，输入npm init-y命令进行npm初始化。