Javascript Vanilla JS/HTML：将HTML对象连接到内部数据模型/数组的最佳实践

我有一个缩略图视图，其中包含内部存储在数组中的x项。 在最初的请求之后，没有更多的服务器通信，因此以后所有的事情都在浏览器中处理

在我当前的解决方案中，我在内部数据模型中为每个html缩略图项提供其相应索引的id，以便在单击缩略图后，我知道要加载哪些数据

在我尝试实现删除操作之前，我认为这是一个好主意，因此可以删除任何位置上的任何项目，也可以拖放缩略图项目

因此，在我当前的解决方案中，我需要在每次更新后运行每个html缩略图项来调整索引，这不是一个很好的解决方案

我不相信我会遇到性能问题，因为缩略图是否会包含100个以上的项目是非常可疑的，但我想知道哪里有更好的解决方案或最佳实践可以让它变得更好

我不能以任何方式或形式影响数据模型/数组，因此不能选择带有UID的映射，也不能使用任何框架，因此需要一个普通的解决方案

<button class="thumbNailItem" id="tni#5"><h3>BOLD</h3><p>My Description</p></button>

解释 考虑到我们几乎不知道您到底在寻找什么，这里有一种非常简单的方法，您只需使用本机JavaScript即可简单地处理数据、一些事件和一些渲染

如果你需要一些文档来理解这段代码，我强烈建议你看一看，我的意思是我想你可以理解它的大部分。如前所述，为了实现这一点，我只使用了处理HTML的呈现方式

有很多方法可以用来解决相同的问题，但在我看来，这一种方法对于正在发生的事情是干净、清晰和简洁的

作用{ 严格使用； //目前只是一些虚拟数据。 让数据=[ {姓名：杰克，年龄：18}， {姓名：利亚，年龄：32}， {姓名：杰，年龄：45} ]; //对app div的简单引用。 const app=document.getElementByIdapp； //如何处理每个按钮的单击事件。 常量处理程序=e=>{ data.e.target.id，1； 提供 }; //处理分派事件的简单函数。 const dispatchEvents==>{ document.querySelectorAll.profile button.forEachbtn=>btn.onclick=handler； }; //一个简单的渲染方法。 常量渲染==>{ app.innerHTML=data.mapo，i=>`

Name:${o.Name}

Age:${o.Age}

删去 `.加入； 调度事件； }; //初始渲染。 提供 };

---

你能告诉我们你现在有什么机会吗？你的代码在哪里？请提供一个只需使用一个模板，每次都重新呈现整个东西，就像react一样，但没有vdom。你可以使用vanilla JS模板…非常感谢。这很有帮助。

this.deleteStep = function() {
  let thumbParent = document.getElementById('thumbNailParent');
  this.curTC.testSteps.splice(this.curStep.index, 1);

  thumbParent.removeChild(thumbNailParent.children[this.curStep.index]);

  //would need to implement loop to correct all 'tni#ids'

  if (this.curStep.index <= thumbParent.children.length) {
    thumbParent.children[this.curStep.index].click();
  }