Question

我有一长串HTML，我必须分配给innerHTML（混合中添加了一些服务器端ASP值）。

是否有任何良好的做法可以在标准中编写HTML＆＃34; nice＆＃34;布局 - 例如，使用适当的缩进 - 以这种方式可以将其分配给innerHTML？

（我们不能假设将始终使用特定的IDE或代码编辑器。）

作为一个例子：这是我在代码I经常遇到的一种模式：

<SCRIPT LANGUAGE="JavaScript">
<!--
    window.opener.document.getElementById("overlay").style.position = "fixed";
    window.opener.document.getElementById("overlay").style.width = "700px";
    window.opener.document.getElementById("overlay").style.top = "100px";
    window.opener.document.getElementById("overlay").innerHTML = "<DIV STYLE=\"margin:25px 0px -10px 0px\"><DIV CLASS=\"error\" STYLE=\"height:auto; background:#ffe5e5; background-image:url(/images/icon_alert.png); background-position:5px 5px; background-repeat:no-repeat; border:1px solid #c00; -moz-border-radius:7px; -webkit-border-radius:7px; border-radius:7px; margin:10px 0px; padding:10px 10px 10px 35px; color:#c00\">There was a problem ... ;

Answer 1

一种解决方案是使用客户端模板，例如Handlebars和jQuery。然后，您可以将HTML格式化为单独的.html文件，并与其余代码完全分开。像Handlebars这样的库也提供了将变量注入模板的条款。

请注意，您需要加载模板。在开发模式下，您可以通过浏览器的HTTP请求加载这些请求，或者如果您使用的是Grunt，Gulp或webpack，则可以将模板构建到JavaScript应用程序文件中，这样就不需要额外的HTTP请求。对于生产模式，您需要大量考虑将模板构建到应用有效负载中，以最大限度地减少HTTP请求的数量。

Answer 2

TL; DR

始终尽量避免使用innerHTML（通过使用createElement（）或createFragment（）或切换一些可见性属性），

不要做innerHTML，它会导致页面的完整布局和绘画，并且在字面上等于树摇动。

如何编写长可读的innerHTML？

2 个答案: