Javascript 在js中维护元素组之间关系的最佳实践

所以你有一个列表和另一个。一个用于导航，另一个用于元数据

现在，我们的想法是，用户将添加、重新排序和删除nav列表中的项目，元列表应该更新以反映nav列表中发生的事情。通过向nav列表添加一个项目，一块HTML被附加到元列表中

请记住，我将使用jQuery

因此，我要问的是在元素集之间建立关系的最佳方式。现在我意识到我可以使用索引和：eq（）等，但是在一个包含大量容器的复杂实现中，事情可能会变得棘手。。。几个月或几年后回来做维护工作可能会很痛苦

---

只是想知道人们是否有建立明确关系的建议。在隐藏字段中存储id？某种主阵列？

人力资源管理，我认为您可能会使其变得更加复杂。如果DOM部分跟踪用户看到的内容，而JS对象在代码中跟踪它，那么为什么需要第二个JS对象呢

事实上，我建议尝试完全删除JS对象，并跟踪dom中的所有内容，只在需要时将其转换为JS。除非有令人信服的原因（有时性能是原因——操作DOM是JS中最大的杀手）

---

也许我在您的用例中遗漏了一些东西…

您思考这个问题的方式可能会产生一些看起来像意大利面条的代码。我强烈建议您看看像backbone.js这样的MVC框架<>backbone有一个强大的事件模型，它可以使一个UI代码块轻松地向其他UI代码块广播事件

使用主干，您可以使用模型来跟踪项目的状态。然后，您可以使用模块化视图“订阅”来添加/删除/更改模型上的事件

主干网是为了解决应用程序面临的问题而构建的：“我如何跟踪所有对象的状态？当它们发生变化时，我如何跟踪随后的UI变化？”

---

希望这有帮助

如果我拖放导航列表中的一个项目，我希望重新排序能够反映在其他列表中。如果我从导航列表中删除一个项目，我希望它从其他列表中删除。如果我在元列表中的一个字段中输入文本，我想更新nav列表中相应项中的HTML。这种交互需要js，不是吗？我只是想确保这两个列表中的元素都是以一种使这些关系清晰和简单的方式组织的。我的建议是让它们随意拖放，然后当你想知道它们的顺序时，去查询dom，这就是我所需要的顺序。我刚刚开始这个项目，已经在一片.parent（）.parent（）.parent（）.find（'.foo:eq（'+var+'））的海洋中迷失了方向；