我重复了JS代码，我如何将这些变成函数答案

【问题标题】：I have repeated JS code, how do I turns these into functions我重复了JS代码，我如何将这些变成函数
【发布时间】：2018-01-15 14:02:28
【问题描述】：

这里是我项目的 JSFiddle 链接，你可以在这里查看完整的 app.js...https://jsfiddle.net/be4pLh7s/1/

基本上我正在尝试建立一个联系人日记，您可以在其中创建新联系人，然后能够在以后编辑或删除它们......

从第 85 行开始是编辑和删除按钮的单击事件，我认为我编写这部分代码的方式可能不正确，因为我有重复的循环和 if 语句。

我尝试将这些重复的代码部分放入函数中，但随后应用程序崩溃并收到不同的错误。我已经尝试了一些方法来克服这些错误，但仍然无法使其正常工作，或者无法解决这个问题。

请您告知代码是否正确...我重复了自己吗？如果我有那么请你展示/告诉我如何在 DRY 和可读性方面使这段代码更好。谢谢。

如何为“编辑”、“保存”和“删除”按钮编写单独的函数。

这行代码重复了3次——

for (var i = 0; i < contactsBook.length; i++) {
            if (contactsBook[i].firstName === ul.getAttribute('data-person')) {}

这行代码重复了2次——

const ulChild = ul.childNodes;
          for (var j = 0; j < ulChild.length; j++) {
            if (ulChild[j].tagName === "LI") {}

这是有问题的代码部分-

//Click event for Edit and Delete buttons.
contacts.addEventListener("click", (e) => {

  if (e.target.tagName === "BUTTON") {
    const button = e.target;
    const ul = button.parentNode;
    if (button.textContent === "Edit") {
      for (var i = 0; i < contactsBook.length; i++) {
        if (contactsBook[i].firstName === ul.getAttribute('data-person')) {
          const ulChild = ul.childNodes;
          for (var j = 0; j < ulChild.length; j++) {
            if (ulChild[j].tagName === "LI") {
              const items = ulChild[j];
              const input = document.createElement('input');
              input.type = 'text';
              input.value = items.textContent;
              items.textContent = "";
              items.insertBefore(input, ulChild.childNodes);
              button.textContent = 'Save';
            };
          };
        };
      };
    } else if (button.textContent === "Save") {
      for (var i = 0; i < contactsBook.length; i++) {
        if (contactsBook[i].firstName === ul.getAttribute('data-person')) {
          const ulChild = ul.childNodes;
          for (var j = 0; j < ulChild.length; j++) {
            if (ulChild[j].tagName === "LI") {
              console.log(ulChild[j]);
            };
          };
        };
      };
    } else if (button.textContent === "Delete") {
      contacts.removeChild(ul);
      for (var i = 0; i < contactsBook.length; i++) {
        if (contactsBook[i].firstName === ul.getAttribute('data-person')) {
          contactsBook.splice(i,1);
          localStorage.setItem('addbook', JSON.stringify(contactsBook));
        };
      };
    };
  };
});

感谢您的帮助！

【问题讨论】：

我没有看到那么多重复的代码......你到底想移动什么？
循环和 if 语句 - if (button.textContent === "Edit") { for (var i = 0; i
好吧，Delete 部分只有一个 for 循环，不经过子循环。
@Darsh2987：然后你需要将循环模式化为一个函数，并传递某种回调。我怀疑你的代码会变得更具可读性。
似乎codereview.stackexchange.com 更适合此类问题。无论如何，这里有两个我认为最关键的方面： 1. 不要将数据存储在 HTML 中，并且不要在需要查找内容时将 HTML 作为主要数据源 2. 分隔不同的逻辑块（保存、编辑、删除、查找-按姓名联系）并将它们移动到单独的功能。尽量不要依赖任何全局变量，只依赖参数。

标签： javascript function loops if-statement

【解决方案1】：

没有太多重复的代码。我能给出的唯一提示是如果你想使用更多的 javascrpt 耀斑，例如.forEach 而不是标准的 for 循环和 .filter，因为你有一个 for 和 if 语句。

举个例子

for (var i = 0; i < contactsBook.length; i++) {
        if (contactsBook[i].firstName === ul.getAttribute('data-person'))
....

可以做到：

contactsBook.filter(book => book.firstName === ul.getAttribute('data-person'))

这并没有什么不同。

【讨论】：