动态创建多个 HTML 块的最佳实践 [关闭]答案

【问题标题】：Best practice for creating multiple HTML blocks dynamically [closed]动态创建多个 HTML 块的最佳实践 [关闭]
【发布时间】：2022-01-05 19:29:20
【问题描述】：

对于上下文：我的应用程序有一个调度程序，我想显示多个约会块（比如一个 div 作为子图像、文本和一个按钮），但是这个问题也适用于假设产品目录。为这些块构建 HTML 内容的最佳做法是什么？

在我的搜索中，我发现了多个选项，例如（使用伪代码）

在 jQuery 中逐行构建

$('<div />').append($('<img />')).append($('<p />').append($('<button />'));

我个人发现，一旦块包含超过 3-5 个元素，这个选项就会变得非常难看，因为代码开始跨越超过一整页滚动并且变得不可读（但这也可能是因为我的编码不佳技能）。

通过 Ajax/Load 检索 HTML 页面

<div>
    <img><p></p><button></button>
</div>

$("target").load("page.php");
or
$.ajax({
   url: "page.php",
   success: function (response) {
      $("target").append(response);
});

从好的方面来说，这将减少初始页面加载时间的内容分开，并且可以在需要之前在服务器端构建内容，在不利方面，我的服务器显示延迟约 0.1 秒（平均，可重现） AJAX 调用返回（几乎没有数据来回发送）。尽管这最终可能看起来微不足道，但所有小的延迟加起来都会影响用户体验。

克隆模板

<template>
   <div>
      <img><p></p><button></button>
   </div>
</template>

const template = document.querySelector("template");
var tgt = document.getElementById("target");
node = document.importNode(template.content, true);
tgt.appendChild(node);

从好的方面来说，这个选项比第一个选项（通过 jQuery 构建）快大约 10-20 倍，但是只有在大约 1000 个块之后才会变得明显，这远远超过了我的用例。不利的一面是，这“污染”了页面 HTML 代码，并且无论如何都需要通过 JS 将内容处理为对象。

还有哪些其他可行的选择？这个用例的最佳实践是什么？

【问题讨论】：

标签： javascript html jquery ajax templates

【解决方案1】：

由于您没有使用 SPA 方法（解释该方法的示例：with angular）。最好的（最干净/最快的）选项（在我看来）是从服务器端完全渲染块（显然你正在使用 PHP）。这意味着您将有一个文件定义约会“appointment.php”的单个块结构，其中包含模板+渲染逻辑，这个“appointment.php”结果（渲染后）然后您将调用（循环）对于您拥有的约会列表的每个实例，您需要它的页面，随心所欲地使用您希望的参数

【讨论】：