将 HTML 存储在完全可读的 JavaScript 变量中的好方法 - Good way to store HTML in a Javascript Variable That's Fully Readable

Good way to store HTML in a Javascript Variable That's Fully Readable

我正在尝试将HTML存储在Javascript变量中，以便将来易于阅读和编辑。

我已经这样做了：

var form = [
    "<fieldset>",
    "  <label></label>",
    "</fieldset>" ].join("'n");

唯一的问题是我希望它在未来比编辑更容易，可能将其存储在 PHP 的变量中（如果这更容易的话），然后对其进行编码或其他东西。

将会有更多的HTML

。

在 PHP 变量中：

$form =<<<FORM
<fieldset>
    <label></label>
</fieldset>
FORM;

http://www.php.net/manual/en/language.types.string.php#language.types.string.syntax.heredoc

如果您提到的 PHP 选项是您想要的方式，那么一个选项（非常可读且易于编辑）将是这样的：

$out = '<div>';
    $out .= '<p>Hello, World</p>';
$out .= '</div>;

最大的优点（我认为）是这允许您自由缩进以提高可读性。显然这是一个非常简单的例子，但希望这一点能传达出来。

您可以通过向每行添加反斜杠来编写多行字符串：

在 JavaScript 中创建多行字符串

我会使用jQuery模板。

http://blog.reybango.com/2010/07/09/not-using-jquery-javascript-templates-youre-really-missing-out/

您的示例：

<script id="myTemplate" type="text/html">
    <fieldset><label></label></fieldset>
</script>

此外，模板允许您添加变量，例如：

<script id="myTemplate" type="text/html">
    <fieldset><label class="${labelclass}">${label}</label></fieldset>
</script>

将信息作为数组传入

var templateData = [
    { labelclass: "fruit", label: "orange" },
    { labelclass: "vegetable", label: "cucumber" },
    { labelclass: "animal", label: "dog" }
];

然后，您可以附加到所需的位置

$("#myTemplate").tmpl(templateData ).appendTo( "form" );

您不必使用这些变量，但它比尝试手动构造它要干净得多。