javascript - 如何修复多个函数中重复的 javascript 代码？

Question

已关闭。此问题不符合 Stack Overflow guidelines 。目前不接受答案。

---

这个问题似乎与 help center 中定义的范围内的编程无关。 .

已关闭 5 年前。

Improve this question

这是我第一次使用堆栈溢出。我正在致力于制作一个期刊 Web 应用程序作为个人项目。

所以我有两个函数，一个函数添加一个日记条目(存储在 localStorage 中)，另一个函数从 localStorage 获取日记条目。这两个函数都会创建 DOM 元素。

这是第一个函数:

function addJournalEntry(event) {
    if(entryTitle.value === '' && entryText.value === '') {
        alert('Please enter fields')
    } else {
        // Create an anchor tag
        var listItem = document.createElement('li');
        // Creates a div element
        var container = document.createElement('div');
        // Create title
        var title = document.createElement('h5');
        // Create a date (current)
        var dateLog = document.createElement('small');
        // Create text
        var text = document.createElement('p');
        // Create edit button
        var editLink = document.createElement('a');
        editLink.id = 'edit-button';
        editLink.innerHTML = '<i class="icon ion-compose"></i>';
        // Create delete button
        var deleteLink = document.createElement('a');
        deleteLink.id = 'delete-button';
        deleteLink.innerHTML = '<i class="icon ion-trash-a"></i>';

        // Display input values
        title.textContent = entryTitle.value;
        dateLog.textContent = formatDate();
        text.textContent = entryText.value;

        // Append elements in the DOM
        container.appendChild(title);
        container.appendChild(dateLog);
        listItem.appendChild(container);
        listItem.appendChild(text);
        listItem.appendChild(editLink);
        listItem.appendChild(deleteLink);
        entryList.appendChild(listItem);

        event.preventDefault();

        // Store locally
        storeDataLocally(entryTitle.value, formatDate(), entryText.value);

        // Empty form fields
        entryTitle.value = '';
        entryText.value = '';
    }
}

这是第二个函数:

function getLocalData() {
    var dataArray;

    // Checks if the journalEntry is in local storage. If not, create an array.
    if(localStorage.getItem('journalEntry') === null) {
        dataArray = [];
    } else {
        dataArray = JSON.parse(localStorage.getItem('journalEntry'));
    }

    dataArray.forEach(function(data) {
        // Create an anchor tag
        var listItem = document.createElement('li');
        // Creates a div element
        var container = document.createElement('div');
        // Create title
        var title = document.createElement('h5');
        // Create a date (current)
        var dateLog = document.createElement('small');
        // Create text
        var text = document.createElement('p');
        // Create edit button
        var editLink = document.createElement('a');
        editLink.id = 'edit-button';
        editLink.innerHTML = '<i class="icon ion-compose"></i>';
        // Create delete button
        var deleteLink = document.createElement('a');
        deleteLink.id = 'delete-button';
        deleteLink.innerHTML = '<i class="icon ion-trash-a"></i>';

        // Diplay data values
        title.textContent = data.title;
        dateLog.textContent = data.date;
        text.textContent = data.text;

        // Append elements in the DOM
        container.appendChild(title);
        container.appendChild(dateLog);
        listItem.appendChild(container);
        listItem.appendChild(text);
        listItem.appendChild(editLink);
        listItem.appendChild(deleteLink);
        entryList.appendChild(listItem);
    });
}

现在我遇到了重复性问题，我想知道如何修复它并使其更加模块化？谢谢!

Answer 1

函数的基本提取:定义一个函数(将其称为“renderItem”或更具体的名称)并获取两个函数中匹配的所有代码并将其移动到那里。然后在其他两个函数中调用该函数。简单易行。

如果有任何行几乎相同，则提取与变量不同的部分，然后将这些变量作为函数的参数。

有时，您在相同的部分之间有代码，但您不能真正将其设为变量。在这些情况下，您有几种选择:

1. 提取两个较小的方法，并在不同部分之前和之后调用它们
2. 为每个不同的代码部分提取一个函数，并将其(不调用它)作为参数传递给提取的函数。这称为回调。

示例:

function foo(…){
  …
  <same part 1>

  <different part>

  <same part 2>
  …
}

方法一:

function baz1(){ <same part 1> }
function baz2(){ <same part 2> }
function foo(…) {
  …
  baz1()
  <different part>
  baz2()
  …
}

方法2:

function baz(callback){
  <same part 1>

  callback()

  <same part 2>
}
function foo(…){
  …
  baz(function() {
    <different part>
  })
  …
}