在JavaScript中放置交互式对象的位置？

Question

我正在创建一个基于Web的应用程序(即带有jQuery和大量SVG的JavaScript),用户可以在屏幕上与"对象"进行交互(想想可以通过arraows四处移动,调整大小和连接的DIV - 就像矢量绘图程序一样或图形编程语言).

由于每个"对象"包含个别信息但总是属于元素的"类",因此很明显应该使用OOP方法对该应用程序进行编程.

但是,我最好在哪里存储"物品"？

• 我应该创建一个包含所有(JS本机)对象的全局结构("注册表")并告诉他们"在DOM上绘制自己"吗？
• 或者我应该避免这样的结构,并将(相关的)DOM节点视为我的对象,并将相关数据作为.data()附加到它们？

第一种方法是非常MVC - 但我想所有事件处理程序的附件都是非常重要的.

第二种方法将以微不足道的方式处理事件,并且它不会创建重复的结构,但我想通常的OO东西(比如方法)会更复杂.

你有什么建议的？我认为答案将是JavaScript和SVG特定的"通常"编程语言没有这样高度组织的输出"画布".

Answer 1

在过去的这种情况下（我已经遇到过大约 5 次），我总是在 JS 中创建 OOP（全局“类”，适当的非全局数据结构）。每个类通常都有一个.g指向其图形表示的属性。（在 jQuery 之前，.data当事件处理程序等需要以其他方式查看时，我在 DOM 实例上使用了 Expando 属性来指向类实例。）

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

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