このコードを改善または書き直して効率化するにはどうすればよいですか？

Question

"Enter"キー機能を有効にするために自分自身を繰り返す必要がありましたが、機能します。私はそれを無効にすることを検討していたが、ユーザーエクスペリエンスを考慮して有効にしたい。現在、JQueryとJQuery UIを搭載したシンプルなリストアプリケーションに取り組んでいます。以下はコードからの抜粋です。

var $inputButtonHolder = $('.input-button-holder') 
var $userListContainer = $('.user-items-container');//Grab main container which is hard coded 
var $sortDivContainer = $('<div class="sorter-container"></div>'); 
//Event handler attached to button element 
$('#add-button').on('click', function(){ 
    var $userInput = $('#add-to-do').val();//Get User Input 
    function addUserItem(){ 
     var $spanElem = $('<span class="user-input">').append($userInput);//Dynamically generating a span element 
     var $listOptions = $('<a href="#" class="delete-list">Delete</a>');//Dynamically generating a tag element 
     //Div element to hold child elements span and a tag - also dynamically generated 
     var $newDivElem = $('<div>',{ 
      "class": 'user-item', 
     }).append($spanElem); 
     //Checkboxes also dynamically generated and appended to newDivElem 
     var $checkBoxes = $('<input>', { type: 'checkbox', id: 'cb'}).appendTo($newDivElem); 
     $listOptions.appendTo($newDivElem);//append delete option to user list item 
     $userListContainer.append($sortDivContainer);//Append user item div which will enable sorting using JQ UI 
     $sortDivContainer.append($newDivElem); //Here we append user input 
     $('#add-to-do').val(''); 
     $('.warning-message').hide(); 
    }; 
    //pu 
    if($userInput==''){ 
     $('.warning-message').fadeIn(); 
    }else { 
     addUserItem(); 
    }; 
}); 
//when user presses the enter key after input 
$('#add-to-do').on('keypress', function(e){ 
    if(e.which == 13) { 
     var $userInput = $('#add-to-do').val();//Get User Input 
     function addUserItem(){ 
      var $spanElem = $('<span class="user-input">').append($userInput);//Dynamically generating a span element 
      var $listOptions = $('<a href="#" class="delete-list">Delete</a>');//Dynamically generating a tag element 
      //Div element to hold child elements span and a tag - also dynamically generated 
      var $newDivElem = $('<div>',{ 
       "class": 'user-item', 
      }).append($spanElem); 
      //Checkboxes also dynamically generated and appended to newDivElem 
      var $checkBoxes = $('<input>', { type: 'checkbox', id: 'cb'}).appendTo($newDivElem); 
      $listOptions.appendTo($newDivElem);//append delete option to user list item 
      $userListContainer.append($sortDivContainer);//Append user item div which will enable sorting using JQ UI 
      $sortDivContainer.append($newDivElem); //Here we append user input 
      $('#add-to-do').val(''); 
      $('.warning-message').hide(); 
     }; 
     if($userInput==''){ 
      $('.warning-message').fadeIn(); 
     }else { 
      addUserItem(); 
     }; 
     e.preventDefault(); 
    } 
}); 

Answer 1

最初のステップでは、内部関数を抽出してから再利用します。

var $inputButtonHolder = $('.input-button-holder') 
var $userListContainer = $('.user-items-container'); //Grab main container which is hard coded 
var $sortDivContainer = $('<div class="sorter-container"></div>'); 
var $addButton = $('#add-button'); 
var $addToDoButton = $('#add-to-do'); 
var $warning = $('.warning-message'); 
//Event handler attached to button element 
$addButton.on('click', function() { 
    var $this = $(this); 
    var $userInput = $this.val(); //Get User Input 
    checkUserInput($userInput); 
}); 
//when user presses the enter key after input 
$addToDoButton.on('keypress', function(e) { 
    if (e.which == 13) { 
    var $this = $(this); 
    var $userInput = $this.val(); //Get User Input 
    checkUserInput($userInput); 
    e.preventDefault(); 
    } 
}); 

function checkUserInput($userInput) { 
    if (!$userInput) { 
     $warning.fadeIn(); 
    } else { 
     addUserItem($userInput); 
    }; 
} 

function addUserItem($userInput) { 
    var $spanElem = $('<span>', {"class": 'user-input'}).append($userInput); //Dynamically generating a span element 
    var $listOptions = $('<a href="#" class="delete-list">Delete</a>'); //Dynamically generating a tag element 
    //Div element to hold child elements span and a tag - also dynamically generated 
    var $newDivElem = $('<div>', { 
     "class": 'user-item', 
    }).append($spanElem); 
    //Checkboxes also dynamically generated and appended to newDivElem 
    var $checkBoxes = $('<input>', { 
     type: 'checkbox', 
     id: 'cb' 
    }).appendTo($newDivElem); 
    $listOptions.appendTo($newDivElem); //append delete option to user list item 
    $userListContainer.append($sortDivContainer); //Append user item div which will enable sorting using JQ UI 
    $sortDivContainer.append($newDivElem); //Here we append user input 
    $addToDoButton.val(''); 
    $warning.hide(); 
    }; 

Answer 2

さて、addUserItem（）関数は2回あります。あなたはそれを「パブリック」関数にして、それを単に呼び出すことができます。そのコードを2回タイプする必要はありません。