0

我正在编写一个在给定 DIV 容器中构建复杂 HTML 结构的库（使用 JQuery）。

这是它如何工作的示例：

HTML

<div id="a"></div>
<div id="b"></div>

图书馆 JAVASCRIPT

function complexStructure(container, opts) {
    this._container = $(container);
    // code handling options
    // ...
}

complexStructure.prototype = {
    show: function () {
        this._buildStructure();
    },

    _buildStructure: function () {
        // building html nodes here
        // ...
        for ( x=0; ... ) {
            for ( y=0; ... ) {
                // ...
                obj.attr("id", this._idOfElement(x, y));
                // ...
            }
        }
        // ...      
        this._container.empty().append(structure);
    },

    _idOfElement: function (x ,y) {
        return "element_x_" + x + "_y_" + y;
    },

    updateElementState: function (x, y, state) {
            var element = this._container.find("#" + this._idOfElement(x, y));
            // ...
            // update element
            // ...
    }
};

库用户 JAVASCRIPT

var a = new complexStructure(document.getElementById("a"), {... opts ...});
var b = new complexStructure(document.getElementById("b"), {... opts ...});
a.show();
b.show();

在构建节点时，我为它们分配了 ID，以便以后可以检索它们。为了检索它们，我从它们的祖先 DIV 容器开始查找它们的 ID，因为可能有多个具有相同 ID 的节点（在 DIV a和 DIV b中）。

我想知道在这种情况下是否可以使用重复的 ID，或者我是否应该更喜欢使用 CSS 类或自定义属性。在这种情况下，最佳实践是什么？您对整体架构有何建议？

当然实际的代码比这更复杂。

谢谢你的时间

4

1 回答 1

0

我要自己回答。

为避免 ID 重复，您只需将结构的每个节点的 ID 附加到其容器的 ID 即可。

一种解决方案是在构造函数或设置函数中为容器选择一个 ID：

this._containerId = ... generate random/unique/sequential ID ...;

然后将元素的 ID 附加到其容器的 ID：

_idOfElement: function (x, y) {
    return this._containerId + "_element_x_" + x + "_y_" + y;
}

如果您确定传递给构造函数的容器将始终插入到 DOM 树中（以便您可以使用 检索它getElementById），另一种解决方案可能是更改结构构造函数：

function complexStructure(container, opts) {
    this._container = $(container);
    // code handling options
    // ...
}

至：

function complexStructure(containerId, opts) {
    this._containerId = containerId;
    this._container = $("#" + containerId);
    // code handling options
    // ...
}

然后使用与_idOfElement上述相同的功能。

于 2013-06-15T04:50:08.383 回答