背景
在前端开发中，我们经常需要渲染一些动态的 HTML 页面。最常见的方式就是使用模板引擎。在这里我们介绍一款非常好用的 npm 包：underscore.template，它提供了强大的模板渲染功能，可以帮助我们高效地生成 HTML 页面。
安装
要使用 underscore.template，我们需要先在项目中安装该包。在项目根目录下执行以下命令：
npm install underscore.template
使用
基本用法
我们可以使用 underscore.template 来编写模板字符串，并将其编译成可执行的函数。例如：
const _ = require('underscore'); // 引入 underscore
const compiled = _.template('Hello, <%= name %>!');
const result = compiled({ name: 'world' });
console.log(result); // 输出 "Hello, world!"在这个例子中，我们先引入了 underscore 包，并使用 _.template 方法将模板字符串 Hello, <%= name %>! 编译成了一个可执行的函数。然后我们调用该函数，并传入 { name: 'world' } 这个对象作为参数，这个对象会被用来替换模板字符串中的占位符。最终输出的结果会是 Hello, world!。
嵌套模板
underscore.template 还支持嵌套模板，这使得我们可以更方便地组织模板代码。例如，我们可以将基本的模板字符串分成多个小块：
const _ = require('underscore'); // 引入 underscore
const header = _.template('<header><%= title %></header>');
const content = _.template('<section><%= body %></section>');
const page = _.template('<html><%= header({ title: "My Page" }) %><%= content({ body: "Hello, world!" }) %></html>');
const result = page();
console.log(result); // 输出 "<html><header>My Page</header><section>Hello, world!</section></html>"在这个例子中，我们分别定义了 header，content 和 page 这三个模板函数。其中 header 和 content 是比较简单的模板，它们分别接收一个对象作为参数。page 是一个比较复杂的模板，它将 header 和 content 嵌套在一起，形成了一个完整的 HTML 页面。最后我们调用 page 函数就可以得到渲染后的 HTML 页面。输出的结果为：
<html><header>My Page</header><section>Hello, world!</section></html>
循环渲染列表
在实际的开发中，我们经常需要将一些数据渲染成列表。在 underscore.template 中，我们可以使用 _.each 方法来对一个数组进行循环渲染。例如：
const _ = require('underscore'); // 引入 underscore
const list = _.template('<ul><% _.each(items, function(item) { %><li><%= item %></li><% }); %></ul>');
const result = list({ items: ['foo', 'bar'] });
console.log(result); // 输出 "<ul><li>foo</li><li>bar</li></ul>"在这个例子中，我们定义了一个 list 模板，它会将数组 items 中的元素进行循环渲染。在模板中，我们使用了 _.each 方法来迭代数组，为每个元素生成一个 <li> 标签。最终输出的结果为：
<ul><li>foo</li><li>bar</li></ul>
判断条件
在模板中，我们还可以使用 if 和 else 语句根据条件来决定是否输出某个片段。例如：
const _ = require('underscore'); // 引入 underscore
const template = _.template('<div><% if (show) { %><p>Hello, world!</p><% } else { %><p>Goodbye, world!</p><% } %></div>');
const result1 = template({ show: true });
const result2 = template({ show: false });
console.log(result1); // 输出 "<div><p>Hello, world!</p></div>"
console.log(result2); // 输出 "<div><p>Goodbye, world!</p></div>"保留字冲突
在使用 underscore.template 时，我们需要注意一些保留字的冲突问题。例如 with、foreach 等关键字在某些浏览器上可能会导致错误。为了避免这种问题，我们可以在 _.templateSettings 中指定新的保留字：
-- -------------------- ---- -------
----- - - ---------------------- -- -- ----------
------------------ - -
------------ ----------------- -- -------
--------- ------------------ -- -------
------- ------------------- -- ------------
--------- ------ -- -----
--
----- -------- - ----------------- ---------- ---------
----- ------ - ---------- ------ ------- ------- ---
-------------------- -- -- ---------- -----------在这个例子中，我们重新定义了 _.templateSettings 中的属性，将占位符的格式改成了 {{ ... }}，将代码块的格式改成了 <% ... %>，并将变量名改为了 data。这样就可以避免保留字冲突的问题了。
总结
underscore.template 是一款非常好用的 npm 包，它提供了强大的模板渲染功能，可以帮助我们高效地生成 HTML 页面。在使用时，我们需要注意保留字冲突的问题，并尽量将模板代码分成多个小块，以方便维护和重用。总的来说，underscore.template 在前端开发中是必不可少的工具，值得我们深入学习和掌握。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64190