javascript - SPA 中的 ID 空间

Question

寻找高级 DOM/JS 架构师的答案。

我的问题是在另一个 question/answer 的背景下提出的其中谈到在 SPA 中拥有干净的 id 空间。

由于一些限制，我无法使用任何数据绑定(bind)框架，而是使用普通的 html，因此期待高级架构师的建议，他们了解数据绑定(bind)框架的内部固定方式及其内部操作方式。

例如，一旦 http GET 调用返回，我就会生成一些 DOM 记录。

Brand.prototype.appendChild = function(data) {
    var self = this;
    var li = document.createElement("li");
    li.setAttribute("id", "brand_" + data.id);
    li.innerHTML = "<p>" + data.name + "</p>";

    var p = document.createElement("p");
    p.innerHTML = "Delete";
    li.appendChild(p);

    p.addEventListener("click", function(){ 
        Brand.prototype.delete.call(self, {id: data.id});
    });

    this.element.appendChild(li);
};

// http delete happens outside via delegate, so it's async
Brand.prototype.delete = function(data) {
    this.delegate.requestConfirm(new model.vo.RequestVO(data, AppConstants.DELETE), "Are you sure you want to delete?");
};

// when http delete request returns, it passes the original data request, I've to find the DOM and delete it
Brand.prototype.removeChild = function(data) {
    var element = document.getElementById("brand_" + data.id);
    element.parentNode.removeChild(element);
};

输出看起来像这样。

<li id="brand_0">
    <p>Brand Name</p>
    <p>Delete</p>
</li>

如果用户点击删除，这是一个异步操作(没有 promise )，一旦删除请求返回，我就会查找特定的 ID 并将其删除。

所以关键是如果没有 ID，我就无法为所欲为，我必须在 dom 中为所有记录提供一个 id，如果我有 SPA 的多个部分，我会在 id 前面加上命名空间字符串，当然，如果我有几个深度嵌套的部分，它可能会变得困惑。

即使我使用了一些数据绑定(bind)框架，我仍然必须从数组中删除该特定对象，可以调用digest或其他方法将其删除。

所以问题就变成了，有没有办法让 CRUD 工作而无需在普通 JS 中声明 id？

根据 guest271314 的建议进行编辑。

Brand.prototype.appendChild = function(data) {
    var self = this;
    var li = document.createElement("li");
    li.innerHTML = "<p>" + data.name + "</p>";

    var p = document.createElement("p");
    p.innerHTML = "Delete";
    li.appendChild(p);

    p.addEventListener("click", function(event){
        Brand.prototype.delete.call(self, {id: data.id, event: event});
    });

    this.element.appendChild(li);
};

Brand.prototype.removeChild = function(data) {
    var element = data.event.target;
    var grandparent = element.parentNode.parentNode;
    grandparent.removeChild(element.parentNode);
};

Answer 1

您可以使用 event.target 或 event.currentTarget 在事件处理程序中获取事件的目标，而不是依赖 id > 一个元素。