【问题标题】：Optimum Way To Write Long Javascript Variables containing HTML编写包含 HTML 的长 Javascript 变量的最佳方法
【发布时间】：2016-01-16 01:38:43
【问题描述】：

大家好，我正在开发一个网络应用程序，该应用程序通过 javascript 将一堆 html 和对象输出到 html 页面上。

它看起来很乱，这让我想知道 - 写这个的最佳方式是什么以及为什么。

这是我的代码

var html_content = '';
     html_content += "<div class='body-content'>";
        html_content += "<h1>" + wowArr.name +"</h1><br />" + "<h2> Arena Titles (Account Wide)</h2>" + achievementZ.join('<br />') + "<br /><br />" 

                + "<h2>Highest Arena Ratings</h2>" 

                + "<span style='color: #FFFFFF;'>"+rating2v2.name+"</span>" + ": " + rating2v2.quantity + "<br/>" + "Last Reached On: " + getHighestDate(rating2v2) + "<br/><br/>"

                + "<span style='color: #FFFFFF;'>"+rating3v3.name+"</span>" + ": " + rating3v3.quantity + "<br/>" + "Last Reached On: " + getHighestDate(rating3v3) + "<br/><br/>"

                + "<span style='color: #FFFFFF;'>"+rating5v5.name+"</span>" + ": " + rating5v5.quantity + "<br/>" + "Last Reached On: " + getHighestDate(rating5v5) + "<br/><br/>"

                + "<h2>Current Arena Rating</h2>2v2 Rating: " + wow2s + '<br />' + "3v3 Rating: " + wow3s + '<br />' + "5v5 Rating: " + wow5s + '<br /><br />'  

                + "<h2>Current RBG Rating</h2>RBG Rating: " + wowRBGs + '<br /><br />' 

                + '<input type="button" class="homebtn" name="startGame" value="new" onclick="reloadW();">';
     html_content += "</div>";

    $('.main-content').html(html_content);

对我来说，似乎有更好的方法可以做到这一点，但我没有丝毫的起点。

任何方向或帮助将不胜感激！

【问题讨论】：

How to insert a large block of HTML in JavaScript?的可能重复

标签： javascript arrays variables object

【解决方案1】：

其他答案的 ES6 模板语法很简洁，在某些情况下绝对有用。

但是，您真正需要的是一个轻量级的模板引擎。

让我给你几个使用模板引擎而不是连接字符串的理由：

这是解决您的问题的最干净的方法
你可以将你的模板/数据和渲染代码分开，这样更容易维护
您免费获得安全性：{{variables}} 会自动转义（请参阅下面示例中我如何转义“名称”变量）
无需担心兼容性问题，您几乎可以在任何地方使用此方法
它非常灵活，如果您愿意，您可以自动将模板编译成 js 变量，因此最终您可以将模板嵌入到 .js 文件中并保持上述所有优势

这是使用 mustache 模板引擎 (mustache.js) 完全重写的代码：

<!doctype html>
<head>
</head>
<body>
  <div id="main-content"></div>
</body>

<!-- here is your template -->
<script id="template" type="x-tmpl-mustache">
       <div class='body-content'>
            <h1>{{ name }}</h1><br />
            <h2> Arena Titles (Account Wide)</h2>
             {{#achievementZ}}
               {{.}}<br/>
             {{/achievementZ}}
            <br/>
            <h2>Highest Arena Ratings</h2>
            <span style='color: #000;'> {{ rating2v2.name }}</span>: {{ rating2v2.quantity }}<br/>Last Reached On: {{ rating2v2.highestDate }} <br/><br/>
            <span style='color: #000;'>{{ rating3v3.name }}</span>: {{ rating3v3.quantity }}<br/>Last Reached On: {{ rating3v3.highestDate }}<br/><br/>
            <span style='color: #000;'>{{ rating5v5.name }}</span>: {{ rating5v5.quantity }}<br/>Last Reached On: {{ rating5v5.highestDate }}<br/><br/>
            <h2>Current Arena Rating</h2>2v2 Rating: {{ wow2s }}<br /> 3v3 Rating: {{ wow3s }}<br /> 5v5 Rating: {{ wow5s }}<br /><br />
            <h2>Current RBG Rating</h2>RBG Rating: {{ wowRBGs }}<br /><br />
            <input type="button" class="homebtn" name="startGame" value="new" onclick="reloadW();">
        </div>
</script>

<!-- templating engine -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.2.1/mustache.min.js"></script>

<!-- usage -->
<script>

  var getHighestDate = function() {
    var date = new Date();
    return date.getFullYear();
  };

  // your data
  var view = {
    name: "Super <b>Joe</b>",
    achievementZ: [
      "achievement 1",
      "achievement 2",
      "achievement 3",
      "achievement 4"
    ],
    rating2v2: {
      name: "Mr Red",
      quantity: 42,
      highestDate: getHighestDate
    },
    rating3v3: {
      name: "Mr Orange",
      quantity: 69,
      highestDate: getHighestDate
    },
    rating5v5: {
      name: "Mr Black",
      quantity: 666,
      highestDate: getHighestDate
    },
    wow2s: "wow2s text...",
    wow3s: "wow3s text...",
    wow5s: "wow5s text...",
    wowRBGs: "wow RGB..."
  };

  // rendering code
  document.getElementById("main-content").innerHTML = Mustache.render(document.getElementById("template").text, view);

</script>

【讨论】：

【解决方案2】：

您可以通过使用 \ 绕过换行符，在 javascript 中使用“多行”字符串：

var html_content = "
    <div class='body-content'>\
        <h1>" + wowArr.name + "</h1><br />\
        <h2> Arena Titles (Account Wide)</h2>" + achievementZ.join('<br />') + "\
        <br /><br />\
        <h2>Highest Arena Ratings</h2>\
        <span style='color: #FFFFFF;'>" + rating2v2.name + "</span>" + ": " + rating2v2.quantity + "<br/>" + "Last Reached On: " + getHighestDate(rating2v2) + "<br/><br/>\
        <span style='color: #FFFFFF;'>" + rating3v3.name + "</span>" + ": " + rating3v3.quantity + "<br/>" + "Last Reached On: " + getHighestDate(rating3v3) + "<br/><br/>\
        <span style='color: #FFFFFF;'>" + rating5v5.name + "</span>" + ": " + rating5v5.quantity + "<br/>" + "Last Reached On: " + getHighestDate(rating5v5) + "<br/><br/>\
        <h2>Current Arena Rating</h2>2v2 Rating: " + wow2s + '<br />' + "3v3 Rating: " + wow3s + '<br />' + "5v5 Rating: " + wow5s + "<br /><br />\
        <h2>Current RBG Rating</h2>RBG Rating: " + wowRBGs + '<br /><br />\
        <input type="button" class="homebtn" name="startGame" value="new" onclick="reloadW();">\
    </div>";

【讨论】：

【解决方案3】：

您可以使用 es6 模板字符串。

 var a = 5;
 var b = 10;
 console.log(`Fifteen is ${a + b} and\nnot ${2 * a + b}.`);
 // "Fifteen is 15 and
 // not 20."

所以你不必使用所有的 +..

【讨论】：

【解决方案4】：

以下是人们喜欢用 JavaScript 编写超长字符串的最常见方式。我试图根据自己的主观偏好将它们按降序排列。

ES6 模板字符串

如果您可以访问 ES6 功能，这是最好的方法。这些模板字符串根据定义是多行的。

var foo = 7;
console.log(`
  <div>${foo-1}</div>
  <div>${foo+1}</div>
`);

打印：

<div>6</div>
<div>8</div>

编译为 ES5 (babel/repl)：

"use strict";
var foo = 7;
console.log("\n  <div>" + (foo - 1) + "</div>\n  <div>" + (foo + 1) + "</div>\n");

字符串文字中的换行符：

var foo = 7;
console.log("\
  <div>" + (foo-1) + "</div> \
  <div>" + (foo+1) + "</div> \
");

连接表达式

var foo = 7;
console.log(""
  +"<div>" + (foo-1) + "</div>\n"
  +"<div>" + (foo+1) + "</div>\n"
);

逐行构建字符串

var foo = 7;
var tmp = '';
tmp += '<div>' + (foo-1) + '</div>\n';
tmp += '<div>' + (foo+1) + '</div>\n';
console.log(tmp);

数组连接

var foo = 7;
console.log([
  '<div>' + (foo-1) + '</div>',
  '<div>' + (foo+1) + '</div>'
].join('\n'));

考虑使用 JSX

这是一种不同的方法，但提供了一种与 DOM 交互的更安全的方式：

var foo = 7;
var shadowDom = <div>
  <div>{foo-1}</div>
  <div>{foo+1}</div>
</div>;

见Babel repl

【讨论】：

就我目前的情况而言，您认为最佳方式是什么？您将如何确定最佳方式。就像它基于您编写的代码行数还是其他什么。提前致谢
@CodegenesisG 您通过什么衡量标准来寻找最优值？最少的线？将所有内容放在一行中。最少的字符？使用模板字符串。最易读？这是主观的，我认为模板字符串也是在这种情况下要走的路。最快的？不确定，但模板字符串应该和连接表达式一样快。