使用javascript中的HTML保留缩进格式

reserve indented format using HTML in javascript

本文关键字：缩进 格式 保留 HTML javascript 中的 使用      更新时间：2023-09-26

在不使用任何模板引擎的情况下，我经常写这样的

success(data) {
  var html = '';
  if (data) {
    $.each(data.result, function() {
      html += '<button type="button" class="btn btn-navbar" data toggle="collapse" data-target=".nav-collapse">'
      html += '<span class="icon-bar"></span>'
      html += '<span class="icon-bar"></span>'
      html += '<span class="icon-bar"></span>'
      html += '</button>'
    });
    $('something').append(html);
  }
}

如果我想要的html是巨大的，很难阅读，有什么方法可以保持上面的缩进吗？

您可以使用回溯定义多行字符串：

var buttonTemplate = `<button type="button" class="btn btn-navbar" data toggle="collapse" data-target=".nav-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>`;
if (data) {
  $.each(data.result, function() {
    $(buttonTemplate).appendTo('#something');
  });
}

这是工作演示。

注意它是ECMAScript 6标准的一部分，在某些浏览器中可能不起作用：
ES6模板字符串兼容性表

您可以在更易于处理的数组中创建和存储模板。此外，您还可以存储多个模板，并使用

Templates = {};
Templates.temp = [
    `<button type="button" class="btn btn-navbar" data toggle="collapse" data-target=".nav-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>`
].join("'n");
if (data) {
  $.each(data.result, function() {
   $('#something').append($(Templates.temp));  // into jQuery object
  });
}

注意："in join（"''n"）不同于单引号join（'''n'）

在html中，将模板保存在类型为text/template的脚本标记中（任何类型不等于text/javascript的类型都将被浏览器忽略）。

<script type="text/template" id="btnTpl">
<button type="button" class="btn btn-navbar" data toggle="collapse" data-target=".nav-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>
</script>

然后你可以在你的javascript代码中使用它：

var buttonTpl = $('#btnTpl').html();
if (data) {
  $.each(data.result, function() {
    $(buttonTpl).appendTo('#something');
  });
}
相关文章：