javascript - JS - 动态创建的 div 容器包含错误的数据对象

Question

我想动态创建一些div。每个div包含一个对象

function node(id, title, content, isPrivate, dateOfCreation) { // my node object
  this.id = id;
  this.title = title;
  this.content = content;
  this.isPrivate = isPrivate;
  this.dateOfCreation = dateOfCreation;
  this.lastEdited = dateOfCreation;
}

这个对象由我的数据存储类管理

    var store = new dataStore(); // instance of the store

    function dataStore() {
      this.nodes = []; // all the node objects

      this.getNodes = function() { // get all objects
        return this.nodes;
      }

  this.addNode = function(node) { // add a new object
    addElementToArray(this.nodes, node);
  }

  this.deleteNode = function(node) { // delete an object
    deleteElementFromArray(this.nodes, node)
  }

      this.getNodeById = function(nodeId){ // find an object by its id
        for(var i = 0; i < this.nodes.length; i++){
          if(nodeId == this.nodes[i].id)
                return this.nodes[i];
        }
        return null;
      }

      this.getNodeTitle = function(node){ // get the title of the node
        return node.title;
      }
    }

所以我想创建一些div，每个对象一个div。

function initNodeView() { // build up all the divs

    for (var i = 0; i < 30; i++) { // -- TEST -- Fill the store
      store.addNode(new node(i, i, i, i % 2 == 0, i));
    }

  var nodes = store.getNodes(); // get all the nodes from the store

  for (var i = 0; i < nodes.length; i++) {
    var currentNode = nodes[i]; // the current object

    var nodeContainer = createDiv('#nodeList', "nodeContainer"); // the wrapperdiv

    createDivWithText(nodeContainer, "nodeContentDiv", store.getNodeTitle(currentNode)); // create a child div with the title of the object

    var barContainer = createDiv(nodeContainer, "nodeBtnBarDiv"); // create a childdiv - the container of all buttons

    createDivWithIcon(barContainer, "nodeIcon", currentNode.isPrivate ? "'foo.png'" : "'bar.png'"); // create an icon div

    var btnDefaultCss = "nodeBtn"; // default css class for buttons

    createBtn(barContainer, btnDefaultCss, "Edit", function() {
        // empty ..
    });

    createBtn(barContainer, btnDefaultCss, "Delete", function() {
      nodeContainer.remove(); // remove this container from the DOM
      store.deleteNode(currentNode); // delete this object from the store
    });
  }
}

为了重构我的代码，我构建了一些辅助函数。

function createDiv(parent, cssClass){ // create default div
    var divElement = $("<div></div>");
    divElement.addClass(cssClass);
    $(parent).append(divElement);
    return divElement;
}

function createDivWithText(parent, cssClass, text){ // create div with text
    var divElement = createDiv(parent, cssClass);
    divElement.html(text);
    return divElement;
}

function createDivWithIcon(parent, cssClass, iconSource){ // create icon div
    var divElement = createDiv(parent, cssClass);
    var icon = $("<img src='"+ iconSource +"'/>");
    divElement.append(icon);
    return divElement;
}

function createBtn(parent, cssClass, text, fn){ // create a new button
    var btn = $("<button></button>");
    btn.addClass(cssClass);
    btn.html(text);
    btn.click(function() {
        fn();
    });
    $(parent).append(btn);
}

我的问题是，当调用 initNodeView() 时，div 容器构建得很好。但是，当单击按钮(编辑或删除)并想要记录此容器的存储对象时，它总是会获取其中存储的最后一个对象。

因此，当创建 30 个对象和 30 个 div 容器时，它们都存储了第 30 个对象。

通常 div 1 应该有对象 1，div 2 应该有对象 2，...

Answer 1

问题在于 JavaScript 使用函数作用域的概念。这意味着函数内部声明的每个变量都是该函数的本地变量，但不像您所期望的那样是当前花括号 block 的本地变量。因此，只有一个变量 currentNode 在每次迭代中都会被分配一个新值。但在事件处理程序中，您引用相同的变量，其最终值是最后一个节点。

for (var i = 0; i < nodes.length; i++) {
  var currentNode = nodes[i];
  // ...
}
// currentNode == nodes[nodes.length - 1]

有很多方法可以解决这个问题。您可以将 for 循环体包装在匿名函数内并立即调用它，以强制 JavaScript 为每次迭代创建一个新作用域。

for (var i = 0; i < nodes.length; i++) {
  (function(currentNode) {
     // ...
  })(nodes[i]);
}

或者bind currentNode 的值传递给事件处理程序的参数。

for (var i = 0; i < nodes.length; i++) {
  var currentNode = nodes[i];
  // ...
  createBtn(barContainer, btnDefaultCss, "Edit", (function(currentNode) {
    // empty ..
  }).bind(null, currentNode));
}

对于 future 的项目，您可能会考虑使用let关键字 ECMAScript 6 引入。使用 let 而不是 var 声明的变量的作用域符合您的预期。

for (let i = 0; i < nodes.length; i++) {
  let currentNode = nodes[i];
  // ...
}
// currentNode is not defined

根据caniuse.com几乎所有主流浏览器都实现了 JavaScript 的这一功能。但为了保持一致性，您应该避免混合 let 和 var。