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

Question

这是我第一次使用堆栈溢出。我正在努力将期刊网络应用程序作为个人项目。

所以我有2个函数，一个函数添加一个日记条目（存储在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

对函数的基本提取：定义一个函数（称之为＆＃39; renderItem＆＃39;或更具体的东西）并获取两个函数中匹配的所有代码并将其移动到那里。然后在其他两个函数中调用该函数。易于peasy。

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

有时你在相同的部分之间有代码，但你不能真正把它变成一个变量。在这些情况下，您有几个选择：

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

示例：

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

  <different part>

  <same part 2>
  …
}

方法1：

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>
  })
  …
}