Underscore.js 的模板功能介绍与应用

Underscore.js 是一个非常实用的 JavaScript 库，它提供了一系列用于处理数据、数组、集合等的函数，以及模板功能。模板功能允许你通过数据来动态生成 HTML 或其他字符串内容，这在前端开发中非常有用，特别是在需要根据后端数据渲染页面时。

### 模板功能介绍

Underscore.js 的模板功能基于 Mustache 模板语法（尽管它做了一些扩展和自定义）。模板是一个字符串，其中包含一些特殊的占位符，这些占位符在渲染时会被相应的数据替换。

模板的基本语法包括：

- `<%= value %>`：插入变量的值，并对其进行 HTML 转义，以防止 XSS 攻击。

- `<%- value %>`：插入变量的值，不进行 HTML 转义，允许插入 HTML 内容。

- `<% code %>`：执行 JavaScript 代码片段，但不输出到结果字符串。

- `<%# comment %>`：添加注释，不会出现在最终的渲染结果中。

### 应用示例

假设我们有一个用户对象，我们想根据这个对象来渲染一个简单的 HTML 字符串：

var user = {
  name: "John Doe",
  age: 30,
  isAdmin: true
};

// 使用 _.template 来编译模板字符串
var template = _.template("<p>Hello, <%= name %>! You are <%= age %> years old.</p>" +
               "<% if (isAdmin) { %><p>You are an admin.</p><% } %>");

// 渲染模板并传入数据
var renderedHTML = template(user);

console.log(renderedHTML);
// 输出: <p>Hello, John Doe! You are 30 years old.</p><p>You are an admin.</p>

在这个例子中，我们首先定义了一个包含用户信息的对象 `user`。然后，我们使用 `_.template` 函数来编译一个模板字符串，该字符串包含一些占位符，用于在渲染时插入用户信息。最后，我们调用编译后的模板函数，并传入用户数据，从而得到渲染后的 HTML 字符串。

Underscore.js 的模板功能非常适合在前端 JavaScript 环境中使用，特别是在需要动态生成 HTML 内容时。然而，随着现代前端框架（如 React、Vue 和 Angular）的兴起，这些框架提供了更加强大和灵活的模板系统，因此在新的项目中可能会更倾向于使用这些框架的模板功能。不过，对于简单的项目或在不使用这些框架的情况下，Underscore.js 的模板功能仍然是一个不错的选择。