0

我刚刚和一位经验丰富的开发人员一起检查了我的代码，他做了很多非常有用的更改，但是，不幸的是，代码没有正确保存，我丢失了所有的编辑！！！

他帮助的主要事情是消除了我的一些代码重复。我有两个共享大量代码的函数： //使用“添加”按钮将项目添加到待办事项列表和 //使用 ENTER KEY 将项目添加到列表。

他为此所做的是将这些函数的大部分添加到 //Add new item to To-Do List 函数中，这样其他函数就更简单了。不过我忘了他是怎么做到的！如果有人可以提供帮助，我将不胜感激！

//Add new item to To-Do List
function addNewItem(list, itemText) {
  totalItems++;

  var listItem = document.createElement("li");

  var checkbox = document.createElement("input");
  checkbox.type = "checkbox";
  checkbox.id = "cb_" + totalItems;
  checkbox.onclick = updateStatus;

  var span = document.createElement("span");
  span.id = "item_" + totalItems;
  span.textContent = itemText;


  var spanDelete = document.createElement("span2");
  spanDelete.id= "spanDelete_" + totalItems;
  spanDelete.textContent = "DELETE";
  spanDelete.onclick = deleteItem;


  var spanEdit = document.createElement("span3")
  spanEdit.id = "editId_" + totalItems;
  spanEdit.textContent = "EDIT";
  spanEdit.onclick = editItem;

  listItem.appendChild(checkbox);
  listItem.appendChild(span);
  listItem.appendChild(spanDelete);
  listItem.appendChild(spanEdit);


  list.appendChild(listItem);
}

//Add item to list with ENTER KEY
var totalItems = 0;
var inItemText = document.getElementById("inItemText");
inItemText.focus();
inItemText.onkeyup = function(event) {
  if (event.which === 13) {
    var itemText = inItemText.value;

    if (!itemText || itemText === "") {
      return false;
    }

    addNewItem(document.getElementById("todoList"), itemText);

    inItemText.focus();
    inItemText.select();
  }
}


  //Add item to To-Do List with "Add" Button
  var btnNew = document.getElementById("btnAdd");
  btnNew.onclick = function() {
    var itemText = inItemText.value;

    if (!itemText || itemText === "") {
      return false;
    }


    addNewItem(document.getElementById("todoList"), itemText);

    inItemText.focus();
    inItemText.select();

  }

这是小提琴：https ://jsfiddle.net/Rassisland/7bkcLfhu/

4

1 回答 1

1

为避免代码重复，请将您的函数保存到一个变量中，然后使用尽可能多的事件处理程序来引用它。这里重要的一课是您并不总是需要使用匿名函数。

;(function(){
  "use strict";
  
  var button = document.getElementById('button');
  
  var doStuff = function(event){
    //  do some stuff
    alert('i did some stuff');
  };
  
  document.addEventListener('keypress',doStuff);
  button.addEventListener('click',doStuff);
  
})();
<button id="button" name="button">i am a button</button>

<textarea id="textarea" name="textarea">press a key</textarea>

于 2015-12-24T02:30:32.550 回答