在 JavaScript 中将交互式对象放置在哪里？答案

【问题标题】：Where to place interactive objects in JavaScript?在 JavaScript 中将交互式对象放置在哪里？
【发布时间】：2011-06-01 16:42:25
【问题描述】：

我正在创建一个基于 Web 的应用程序（即带有 jQuery 和大量 SVG 的 JavaScript），其中用户与屏幕上的“对象”进行交互（想想可以拖动、调整大小和通过箭头连接的 DIV - 就像一个矢量绘图程序或图形编程语言）。

由于每个“对象”都包含单独的信息，但总是属于元素的“类”，因此很明显应该使用 OOP 方法来编程此应用程序。

但是我在哪里存储“对象”最好呢？

我是否应该创建一个包含所有（JS 原生）对象的全局结构（“注册表”）并告诉他们“在 DOM 上绘制自己”？
或者我应该避免这种结构并将（相关）DOM 节点视为我的对象并将相关数据作为 .data() 附加到它们？

第一种方法非常 MVC - 但我猜所有事件处理程序的附件将不平凡。

第二种方法将以简单的方式处理事件，并且不会创建重复的结构，但我猜通常的 OO 东西（如方法）会更复杂。

你有什么推荐的？我认为答案将是 JavaScript 和 SVG 特定的，因为“通常”的编程语言没有如此高度组织的输出“画布”。

【问题讨论】：

我会等待回复，因为这个问题在 IMO 中非常有趣……但是为什么您选择 SVG 而不是使用画布和更“传统”的方法，即简单地让对象在画布？
我选择了 SVG 而不是 Canvas，因为我的数据是矢量而不是像素类型。而且，更重要的是，我经常使用 JavaScript 事件（mousedown、mousemove、...），因为我可以将它们绑定到 SVG 元素，所以我将“碰撞检测”卸载到浏览器的本机实现并不要不必自己在（可能很慢）JavaScript 中完成

标签： javascript jquery oop dom svg

【解决方案1】：

我会使用 JSON（作为对象注册表）并将其全部保存在您的脚本块中。然后，您无需解析即可轻松存储和恢复数据。

【讨论】：

是的，JSON 已经设置好了，因为这个应用程序与服务器端后端大量合作并通过 AJAX 进行通信，并且有时使用 COMET 模式 - 所以 JSON 是一个自然的选择

【解决方案2】：

您可能希望使用 JSON 来定义您正在处理的“对象”。例如

[{
    type: rectangle,
    coordinates: {x: 0, y: 0},
    size: {width: 100, height: 100}
},{
    type: arrow,
    start: {x: 150, y: 150},
    end: {x: 100, y: 100}
}]

这使您可以灵活地在页面加载时绘制形状，在操作对象时更新对象的状态，并保存状态以供以后再次加载。

这使您可以按照您所说的那样使用 MVC 模式，然后您可以进行特征检测以确定您是否要将其显示为 Canvas、SVG、Flash、HTML 等。

【讨论】：

为了更好地将我的回答与您的问题联系起来：我建议您使用第一点：“我是否应该创建一个包含所有（JS 原生）对象的全局结构（“注册表”）并告诉他们“在 DOM 上画自己”？ - 我的推理如下我的答案中的代码块所述。

【解决方案3】：

在过去的这种情况下（我已经打了大约 5 次）我总是在 JS 中创建 OOP（全局“类”，适当的非全局数据结构）。每个类通常都有一个指向其图形表示的.g 属性。 （在 jQuery 的 .data 之前，我在 DOM 实例上使用了 expando 属性，指向类实例，当事件处理程序或类似的东西需要另辟蹊径时。）

我也认为这是 MVC，但是当你有一个 JS 解释器来存储你的模型、充当控制器并操作视图时，当然很容易模糊线条（或者很难将它们分开） .

我发现在这个系统下添加事件处理程序并不难：实例化一个新对象（在代码中）负责在视图中实例化它的表示，并附加它自己的事件处理程序来触发基于实例的回调。此代码将特定于输入的事件（例如mousedown）映射到基于状态的逻辑事件（例如selected）。其他代码注册到实例上的这些逻辑事件。

【讨论】：

感谢您提供非常丰富的答案。我想我现在就走那条路:)