#23：使用 Handlebars 进行模板化

我们在上一个视频中结束时，代码有点混乱。在一段 JavaScript 代码中，我们混合了数据检索、显示、业务逻辑和模板化。在这个视频中，我们将开始将这些内容分解，以帮助我们构建更具组织性、可维护性和易理解性的代码。模板化是其中很重要的一部分。

我们的模板化冒险的第一步是使用 Handlebars。Handlebars 的方法很巧妙，因为它将模板的 HTML 代码直接放置在 HTML 中。你使用一个特殊的 <script> 标签。这使得创作变得很方便，因为我们能够避免笨拙的字符串连接（那些引号和加号），并获得编辑器提供的 HTML 语法高亮显示。我们的模板最终看起来像这样

<script id="movie-template" type="text/x-handlebars-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>
</script>

请注意 script 标签中奇怪的 type 属性。这会阻止该标签内容执行。最终，Handlebars 只是提取了该标签的内容并将其转换为一个模板函数。这确实是一种处理它的巧妙方法。

像 {{movieTitle}} 这样的部分是重要的部分。我们最终会将一个对象传递给创建的模板函数，并且该对象的属性会与这些占位符部分匹配。Handlebars 被称为 handlebars，可能是因为这些占位符部分被包裹在花括号中，从上面看有点像把手。

按照 Handlebars 网站上的简单教程，我们创建模板函数如下

var source = $("#movie-template").html();
var template = Handlebars.compile(source);

然后，在我们的 for 循环中，我们使用包含单个电影的对象（上下文）调用新的模板函数。HTML 将被返回，我们将其附加到页面。

var html = template(data.movies[i]);
$("#movies").append(html);

在这个视频中，我们还将模板移到一个不同的 Pen 中。这仅仅是为了说明你在真实项目中如何划分自己的代码。模板几乎肯定会是某种“包含”。

最终的结果如下

查看 Chris Coyier (@chriscoyier) 在 CodePen 上的 Pen：mdCjJ

我们已经朝着编写更优质的代码迈出了几大步，但还需要进一步改进才能使其完全干净。