javascript - 有没有通过 jQuery 构建 HTML 的正确方法

Question

我很久以来就想知道是否有一种使用 jQuery 构建 HTML 的好方法。

一开始，我曾经做过这样的事情:

var content = "";
  var footer = "";
  content += "<div class=\"row\">";
  content += "  <div class=\"col-md-10 col-md-offset-1\">";
  content += "    <p class=\"lead\">Please, give a brief explanation about why you are canceling this appointment:</p>";
  content += "    <textarea class=\"form-control\" id=\"deny_explanation\" placeholder=\"Brief explanation\" rows=\"8\"></textarea>"
  content += "  </div>";
  content += "</div>";
  footer += "<button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\"><i class=\"fa fa-remove\"></i> Close</button>";
  footer += "<a href=\"javascript: denyAppointment(" + appointment_id + "," + type + ");\" class=\"btn btn-danger\" ><i class=\"fa fa-thumbs-o-down\"></i> Cancel</a>";
  $("#generic_modal_title").html("Cancel appointment");
  $("#generic_modal_body").html(content);
  $("#generic_modal_footer").html(footer);
  $("#generic_modal").modal("show");

然后我改成这样:

content = $('<div/>').append(
              $('<div/>').addClass('row').append(
                $('<div/>').addClass('col-md-10 col-md-offset-1').append(
                  $('<h2/>').append('Client Info')
                )
              )
            ).append(
              $('<div/>').addClass('row').append(
                $('<div/>').addClass('col-md-5 col-md-offset-1').append(
                  $('<label/>').append('Client')
                ).append($('<br>')).append(data.client.first_name + " " + data.client.last_name)
              ).append(
                $('<div/>').addClass('col-md-5 col-md-offset-0').append(
                  $('<label/>').append('Weeks pregnant')
                ).append($('<br>')).append(data.client.weeks_pregnant)
              )
            );

我想知道有没有更好的方法？我的团队总是对我过去做的事情感到困惑，而且没有任何改变。

谢谢大家。

Answer 1

从性能 Angular 来看，老实说，我认为这并不重要，除非您在短时间内生成数百/数千个这些元素。我认为更重要的考虑是可维护性。

如果您要从代码构建大量 HTML，强烈建议您使用模板库以提高可维护性。这将允许您将 UI 从代码中分离出来，并使用简单的模型/ View 方法生成组件。我过去使用过的一些很棒的 JavaScript 模板库包括:

• https://github.com/janl/mustache.js
• http://handlebarsjs.com/
• https://code.google.com/p/kite/

如果您无法使用模板库，那么您的团队将决定他们喜欢什么格式。我个人更喜欢 jQuery 方法，因为它使将来的修改变得更容易，同时最大限度地减少出现一些难以定位的 HTML 语法错误的风险，这些错误可能会在以后再次困扰您。