动态创建多个 HTML 块的最佳实践

Question

对于上下文：我的应用程序有一个调度程序，我想显示多个约会块（比如 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 调用 return（几乎没有来回发送数据）。虽然这最终可能看起来微不足道，但所有小的延迟加起来都会影响用户体验。

克隆模板

<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 个块之后才会变得明显，这远远超出了我的用例。不利的一面是 'pollutes' 页面 HTML 代码和将内容处理到 object 中的过程无论如何都需要通过 JS。

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

Answer 1

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

动态创建多个 HTML 块的最佳实践

Best practice for creating multiple HTML blocks dynamically

html

javascript

ajax

jquery

templates