javascript - 问题结构化 JavaScript( View 和模型逻辑分离)

Question

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

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

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

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

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

有什么想法吗？

Answer 1

您可以通过将根对象附加到 DOM 中的某些内容来维护原始对象模型或对象图，或者使用 jQuery data system把它保留在里面。

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

这对于 jQuery 来说并不罕见 plugins在 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 进行序列化并通过ajax发送到服务器称呼;您的 UI 元素甚至可以从中重建/刷新。

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