#24: 使用 Underscore 进行模板化

我们在上一个视频中介绍了使用 Handlebars 进行模板化。但 Handlebars 不是唯一可用的模板化解决方案。在本视频中，我们将使用 Underscore 中提供的模板化功能。

为什么？一个原因是您可能已经在项目中使用 Underscore 了。它是一个非常流行的库，因为它像 jQuery 一样，提供了许多跨浏览器工作的有用方法。正如他们所说

它是 jQuery 的燕尾服和 Backbone.js 的背带的搭配。

如果您已经在使用 Underscore，那么这将是使用其模板化功能的一个重要诱因。

此外，在我快速测试中，Handlebars 1.0.0 压缩并最小化后为 14.2 KB，而 Underscore 压缩并最小化后为 4.9 KB。Handlebars 拥有更多功能（例如注释、循环、路径、逻辑等）。在我们简单的演示中，我们根本不需要这些功能，所以这不是一个完全公平的比较，但无论如何我们只是在学习。

与其在 HTML 中使用模板，我们需要在 JavaScript 中定义 Underscore 模板。我们又回到了字符串连接。

var compiled = _.template(
  "<div class='module module-movie' style='background-image: url(<%= movieImage %>)'>" + 
    "<div class='movie-info'>" +
      "<h3 class='movie-title'>" +
         "<%= movieTitle %>" + 
      "</h3>" +
      "<p class='movie-director'>" + 
         "<%= movieDirector %>" + 
      "</p>" + 
    "</div>" + 
  "</div>"
);

compiled 然后变成了一个我们可以使用数据对象上下文调用的函数，并返回用这些数据填充的所有 HTML。为了提高效率，我们将返回的 HTML 连接成一个大的字符串，以便我们可以只将其附加到 DOM 一次

  var i, html = "";
  for (i = 0; i < data.movies.length; i++) {
    html += compiled(data.movies[i]);
  }  
  $("#movies").append(html);

在本视频中，我们还抽象了获取数据的方式。我们创建了一个 JSON 源，并使用 jQuery 的 $.getJSON() 函数来获取它。就像我们可能在“现实生活中”需要做的那样。

$.getJSON("/path/to/json.js", function(data) {

});

我们依赖该数据的 for 循环等代码放在那里的回调函数中。或者更有可能的是，调用一些其他命名良好的函数来处理它，从而保持代码的清晰分离。

这是我们最终得到的结果

查看 Chris Coyier 在 CodePen 上的笔 IpAdn (@chriscoyier)

需要注意的是，LoDash 与我们在这里所做的完全兼容。我不确定 LoDash 模板化是否比 Underscore 的更好/更快/更慢/更差，但我交换了库，演示也正常工作。