#22：模板的必要性

模板是使用 JavaScript 应用程序的重要组成部分。通常情况下，数据是可用的，但并非以可以在屏幕上直接显示的格式呈现。这通常（但并非总是）是 JSON 格式的数据。这对于在 JavaScript 中使用来说是一个很棒的格式，但我们仍然需要将其格式化为我们可以使用的格式。

例如，以下是一些我们可能手头的一些虚构数据

var data = {
  movies: [
    {
      movieTitle: "Ender's Game",
      movieDirector: "Gavin Hood",
      movieImage: "http://s3-us-west-2.amazonaws.com/s.cdpn.io/3/movie-endersgame.jpg"
    },
    ...
  ]
}

最终，我们希望将其转换为

<div class="module module-movie" style="background-image: url(http://s3-us-west-2.amazonaws.com/s.cdpn.io/3/movie-endersgame.jpg);">
  <div class="movie-info">
   <h3 class="movie-title">Ender's Game</h3>
   <p class="movie-director">Gavin Hood</p>
  </div>
</div>

你可能会认为 jQuery 在这方面很强大。jQuery 充满了 DOM 遍历/操作工具。但你可能会说它没有一套非常强大的 DOM 创建工具。我相信 jQuery 团队曾经考虑过添加模板，甚至尝试过一个“官方”插件，但它并没有流行起来。

在这个视频中，我们并没有做现在传统意义上的模板化操作。我们只是用 jQuery 直接构建一个新的 <div>，并使用字符串连接来构建所需的 HTML，最终将其注入到页面中。从技术上讲，这样做并没有什么错误，但我试图强调这种方法如何很快变得难以控制。

仅仅在我们在这个视频中编写的少量 JS 代码中，我们就混合了各种关注点/任务

1. 获取数据。 我们这里只是将其放在手边，但可能这会更复杂一些。也许是一个带有错误处理和缓存等的异步 Ajax 请求。
2. 显示逻辑。 决定我们需要显示什么。有多少？哪些部分？基于什么？
3. 事件处理。 我们新注入的 div 在创建时添加了事件处理，而不是委托。
4. 模板。 我们创建的 HTML 用于实现设计、构建数据结构以及满足我们的需求。

这是我们最终得到的意大利面条式代码

查看 Chris Coyier 在 CodePen 上的示例 31b07f30dce13b31904da36693b29b41 (@chriscoyier)

接下来的几段视频将重点关注模板，因为这非常重要，但最终我们将把所有这些关注点分解开来，最终得到更有条理和可维护的代码。