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）。其他代码注册到实例上的这些逻辑事件。

Answer 2

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

Answer 3

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

[{
    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等。

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

3 个答案: