如何优化要在 javascript 字符串中使用的长 html 代码的创建

How to optimize the creation of long html code to be used in javascript string

本文关键字：创建 代码 html 字符串 javascript 何优化 优化      更新时间：2023-09-26

我需要定义包含很长 html 代码的 javascript 变量。

下面是一个简短的示例：

var text = "Select one item:<br>";
text += "<ul class='thumbnails'><li class='span3'><a href='#' class='thumbnail'><img src='http://placehold.it/260x180' alt=''></a></li></ul>";

由于 html 会长得多，我宁愿在纯 html 中工作，而不是将文本附加到 javascript 字符串中。

我想

创建一个单独的 html 文件，但我想这需要 Ajax 调用来获取其内容。处理这个问题的最佳方法是什么？

正如N.Zakas在"可维护的javascript"一书中所说，你应该"将html排除在javascript之外"，通过UI层的松散耦合来提高代码的高可保留性。

除了 ajax 解决方案之外，您还可以将标记作为注释放置在 html 文件中并通过 javascript 读取它（作为常规 DOM 节点），或者您可以使用某种微模板系统（例如 handlebars）并将标记放在脚本块中（这个想法是将标记放在预期找到的位置而不是 JavaScript 逻辑中）

一种可能的解决方案是使用模板。有一些JavaScript库提供模板，下划线.js是一个：http://underscorejs.org/#template，或者有关如何使用它进行模板 http://www.headspring.com/blog/developer-deep-dive/an-underscore-templates-primer/的更多详细信息

加下划线非常适合许多其他事情。

您可以将文本分解为实际的 HTML 对象。

var thumbnailsUL = document.createElement('ul');
for (index in {your-thumbnails-list}) {
  var thumbnail = document.createElement('li');
  thumbnail.innerHTML = {whatever you need, more objects or html as text};
  thumbnailsUL.appendChild(thumbnail);
}

理想情况下，没有理由在JavaScript中构建这个 - 你能不从服务器发出它吗？

与其在 Javascript 中构造 HTML 作为字符串，我宁愿建议你在页面本身中发出这些 html 元素并在加载时隐藏。然后在Javascript中，您可以选择该容器并显示它。

相关文章：