Question

所以我一直在使用Javascript中的项目，该项目接收用户提供的对象并用HTML表示它们。现在它们在内存中表示为一个数组，并在显示中表示为一个单独的数组。在集成了一些代码更改之后，出现了一些问题，即显示数组似乎在删除它的内容时遇到了麻烦，因此应该删除的内容不会从视图中消失。

声明清单：

this.divList = gDocument.getElementById( element );
this.objectList = [];

将对象添加到列表中：

addObject = function (address, type){
    var newDiv = gDocument.createElement("div");
    this.divList.appendChild( newDiv );

    var d = this.createObject( newDiv, address, type );

    if (undefined != d)
    {
        this.objectList.push(d);
    }
 }

divList准确反映objectList，直到在运行时对objectList进行任何更改。重新启动后，列表再次同步。当我试图解决它时，事情非常复杂。我想知道是否有更好的方法来设计这样的想法（对象模型和图形表示）。任何评论都会有所帮助，谢谢。

Answer 1

除了问题模糊之外，我的建议是将一个列表而不是两个列表存储在内存中。每个列表元素都是一个对象，其中包含所需的所有必要数据，用于特定的抽象“对象”（“用户提供的”）。像这样：

this.divList = gDocument.getElementById(element);
this.masterList = [];
var i,
    len = this.divList.length;
for (i = 0; i<len; i++)
{
    this.masterList.push({
        elt: this.divList[i],
        obj: /* however you'd create the object in this.objectList  */
    });
}

编辑：您的addObject函数将更改为以下内容：

addObject = function (address, type)
{
    var newDiv = gDocument.createElement("div"),
        newObj = {elt: newDiv,
                  obj: this.createObject(newDiv, address, type)};
    this.masterList.push(newObj);
    this.divList.appendChild(newDiv);
 }

您应该存储对appendChild()所在的HTML元素的引用。你已经这样做了 - 但是当你需要操纵各个元素（比如删除一个元素）时，请改用masterList：

removeObject = function (i)
{
    var toRemove = this.masterList.splice(i, 1);
    if (toRemove)
    {
        this.divList.removeChild(toRemove.elt);
    }
}

另见Array.splice()。

Javascript和HTML数据模型和表示模型设计问题

1 个答案: