问题结构化 JavaScript（视图和模型逻辑分离）

Question

我正在为一个网站开发一个 Javascript 重的作品（使用 jQuery）（目前，我正在开发一个原型）。

为了总结我正在做的事情，我有一系列“图标”。目前，每个图标都是一个图像。我还有一系列的“桶”。所有图标都从同一个存储桶中开始。用户能够创建新的存储桶并将图标从一个存储桶拖动到另一个存储桶。还可以通过单击图标来打开和关闭这些图标（尽管它们仍然保留在存储桶中）。

我现在一切都工作得很好，但是目前它基本上是一堆 img 元素从一个 div 移动到另一个 div。当我准备好开始实现服务器端逻辑时，我将需要一种方法来将正在发生的事情传达给服务器。

我需要的是一个反映视图发生情况的“模型”对象。如果当用户准备好将数据发送回服务器时，我有一个可以序列化代表我需要的对象，那就太好了。例如，如果用户已将 email.png 图标拖动到选项存储桶中，我希望这反映在模型对象中（即 { 'options': ['email'] }）。

问题是，我所有的逻辑都是基于事件而发生的。当用户将图标拖动到 div 时，会在 img DOM 元素上触发一个事件，我不知道如何访问它的模型来更新它。我唯一能想到的是解析 img src 并使用它来找出模型选项的名称，但这是一个非常黑客且不优雅的解决方案。

有什么想法吗？

Answer 1

您可以通过将根对象附加到 DOM 中的某些内容来维护原始对象模型或对象图，或者使用 jQuery 数据系统 来保留它。

甚至可以将您的 UI DOM 元素引用到这个集中式模型中，以帮助降低两个不同模型的复杂性。

jQuery 插件 在 jQuery 数据系统中以您寻求的方式集中状态的情况并不罕见。

原始 JavaScript

document['myObjectGraph'] = {
    first: 1,
    second: 'two,
    images: [
        document.getElementById('img1'),
        document.getElementById('img2')
    ],
    items: [
        'a',
        'b',
        another = { /* building out the model...*/ };
    ] 
};

或 jQuery 数据系统（相同的想法）

jQuery.data(document.body, 'myObjectGraph', {
    first: 1,
    second: 'two,
    images: [
        $('#img1'),
        $('#img2')
    ],
    items: [
        'a',
        'b',
        another = { /* building out the model...*/ };
    ]         
});

这实际上在一个地方（您选择设计的地方）创建了一个可管理的模型 - 它代表了图标、存储桶和其他任何东西的状态；它可以使用 JSON 进行序列化，并通过 JSON 发送到服务器。 jquery.com/jQuery.ajax/" rel="nofollow">ajax 调用；您的 UI 元素甚至可以从中重建/刷新。

这个想法伴随着额外的间接成本和保持原始模型与 UI 模型同步的工作量。

Answer 2

您可以使用元素的 id 或 class 属性来存储模型的名称吗？然后你可以为每个指定任何你想要的字符串，而不是试图脱离 src 属性。

Answer 3

您可以将图标留在存储桶中，然后在需要与服务器通信时询问存储桶中的内容。只要图标具有一些唯一的属性（例如id）来识别它们，那么您就可以根据需要动态构建模型。像这样的东西可以用来序列化你的存储桶：

http://jsfiddle.net/ambigously/3ufhn/

只要事情保持简单，这就会很好地发挥作用。如果事情变得更复杂，那么显式的 MVC 设置将使事情变得更容易，John K 的 .data 方法会派上用场；您还可以使用带有隐藏输入的

来跟踪您的状态。