我正在寻找有关使用Javascript / SVG设计界面的编码技术的反馈。我是这些语言的新手，因为我最近放弃了对Adobe Flex的专业化。
该软件将是将源信号映射到目标信号的通用接口。连接由网格表示，行/列表示源/目标信号：
X X X X | destination A X O X X | destination B X X X X | destination C X X X X | destination D --------- 1 2 3 4
在这个美丽的图中，“0”表示源'信号2'被映射到'目的地B'。
我关注将数据（连接对象）绑定到视图（SVG元素）。我是这样做的：
数据存储在2D数组中：connections [nSources] [mDestinations]
在视图中，对于2D连接数组中的每个项目，我创建一个SVG元素，其ID为“celln，m”（“n，m”对应于其行/列索引）并将其添加到DOM。通过使用document.getElementById（...），我发现这是访问任何SVG元素的一种非常简单的方法，或者通过解析'evt.target.id'字符串来查找用户单击的行/列。
首次实施效果很好。但我很担心，因为接口需要支持处理动态数据......将动态添加或删除源/目标信号。用户可以重新排列行和列。它需要支持将信号分组为可扩展和可折叠节点。
一个简单的例子：如果在索引0处添加了一个新行，我需要更新每个SVG元素的ID以使其行增加1。
我的具体问题：这么多操纵DOM元素的ID是否正常（良好实践，安全可靠）？
要查看代码示例（操纵SVG元素ID的函数），请参阅此处：sample
在200x200（例如）的网格中，在索引0处添加行意味着更改40,000个SVG元素的ID，这似乎很可怕。有没有人看到这个问题？
答案 0 :(得分：0)
无论如何，您将使用DOM操作来实现您的目标。建议：使用MVC模式。每当用户添加/删除行或重新排列它们时，您不会修改DOM，而是修改模型。然后你调用一些重绘SVG的监听器/回调。我个人会分离整个表（我会将所有行保存在一个父<g>中），例如DOM（使用remove操作，或者像它一样。你使用什么库？）。然后，我将在内存中重新创建它，只有在那之后我才会将（appendChild）附加到它上面。这种方法似乎简单而且足够快。