＃127：JavaScript模板基础

影片下载
（只有MVP支持者可以下载原始高质量的录音以供离线查看。）

模板是您需要注入到页面上HTML块。 通常，模板是在“服务器端”创建的-因为它们会完整地出现在JavaScript中，只需要放入DOM中即可。 但是有时这不可行或需要额外的往返服务器，这可能很慢。 在那种情况下，使用JavaScript正确的模板是理想的。 当然，您可以执行一些字符串连接，将HTML和数据的一部分加在一起，直到拥有所需的模板为止。 但这可能并不理想，因为它没有将数据和模板的关注点分开。 真正JavaScript模板可以为您提供帮助。

在此截屏视频中，我们将介绍JavaScript模板制作的基本“原因”，然后专门介绍一个如何在Underscore.js中完成的简单示例。 然后，我们将介绍其他一些选择。

演示版

var compiled = _.template(
  "<div class='movie'>" + 
    "<h2><%= movie_title %></h2>" + 
    "<p><%= movie_desc %></p>" + 
  "</div>"
);

var i, toAppendString = "";

for (i = 0; i < data.movies.length; i++) {
  toAppendString += compiled(data.movies[i]);
}  

$("body").append(toAppendString);

在CodePen上查看 Chris Coyier （ @chriscoyier ）的Pen ％= penName％>

链接

• CodePen基本演示
• Underscore.js模板化
• NetTuts： 使用JavaScript模板时的最佳做法
• MDN： JavaScript模板
• John Resig： JavaScript微型模板化
• 詹姆斯·帕多西（James Padolsey）： 直截了当的插补

翻译自: https://css-tricks.com/video-screencasts/127-basics-of-javascript-templating/