0

我正在寻找有关我设计 Javascript/SVG 界面的编码技术的反馈。我是这些语言的新手，因为我最近放弃了 Adob​​e Flex 的专长。

该软件将是一个通用接口，用于将源信号映射到目标信号。连接由网格表示，行/列代表源/目标信号：

XXXX | 目的地A
XOXX | 目的地B
XXXX | 目的地C
XXXX | 目的地 D
---------
1 2 3 4

在这个美丽的图中，“0”表示源“信号 2”映射到“目标 B”。

我关心将数据（连接对象）绑定到视图（SVG 元素）。我是这样做的：

数据存储在二维数组中：connections[nSources][mDestinations]

在视图中，对于二维连接数组中的每个项目，我创建一个 SVG 元素，其 ID 为“celln,m”（“n,m”对应于它的行/列索引）并将其添加到 DOM。我发现这是访问任何 SVG 元素的一种非常简单的方法，通过使用 document.getElementById(...)，或者通过解析“evt.target.id”字符串来查找用户单击的行/列。

第一次实施效果很好。但我很担心，因为接口需要支持处理动态数据......源/目标信号将即时添加或删除。用户可以重新排列行和列。并且它需要支持将信号分组到可扩展和可折叠的节点中。

一个简单的例子：如果在索引 0 处添加新行，我需要更新每个 SVG 元素的 ID 以将其行增加 1。

我的具体问题：这么多地操作 DOM 元素的 ID 是否可以（良好做法、安全和可靠）？

要查看代码示例（操作 SVG 元素 ID 的函数），请参见此处： 示例

在 200x200（例如）的网格中，在索引 0 处添加一行意味着更改 40,000 个 SVG 元素的 ID，这似乎很可怕。有没有人看到这有问题？

4

1 回答 1

0

无论如何，您将使用 DOM 操作来实现您的目标。建议：使用MVC模式。每当用户添加/删除行或重新排列它们时，您修改的不是 DOM，而是模型。然后你调用一些重绘SVG的监听器/回调。就我个人而言，我会将整个表（例如，我会将所有行保留在一个 parent<g>中）从 DOM 中分离出来（使用remove操作或类似的操作。你使用什么库？）。然后，我将在内存中重新创建它，然后才将其附加（appendChild到该组）回来。这种方法似乎足够简单和快速。

于 2013-02-05T22:54:54.833 回答