DRYing事件處理程序

Question

我有三個按鈕的模式：關閉，刪除和保存。每個按鈕都需要一個點擊處理程序，每個點擊處理程序都會隱藏該模式作爲其最後一個操作。這是天真的做法：

// Close 
$('#edit-user-close').on('click', function() { 
    $modal.modal('hide'); 
}); 

// Remove 
$('#edit-user-remove').on('click', function() { 
    removeUser(); 

    $modal.modal('hide'); 
}); 

// Save 
$('#edit-user-save').on('click', function() { 
    saveChanges(); 

    $modal.modal('hide'); 
}); 

此代碼感覺非常像它可以被幹掉。我可以用什麼技術/語法來幹這些事件處理程序？

Answer 1

代碼本身對我來說似乎很好。如果你想要做下一個單擊處理程序，你可以使用一類具有data屬性來確定動作，試試這個：

<a href="#" class="modal-action" data-action="close">Close/a> 
<a href="#" class="modal-action" data-action="remove">Remove user</a> 
<a href="#" class="modal-action" data-action="save">Save</a> 

$('.modal-action').click(function() { 
    switch ($(this).data('action')) { 
     case 'remove': 
      removeUser(); 
      break; 
     case 'save': 
      saveChanges(); 
      break; 
    } 

    $modal.modal('hide'); 
}); 

如果你永遠只能將有2個按鈕（除close），那麼switch可以縮短爲if聲明。我使用了switch，因爲它更具可擴展性，您將來需要添加不同的按鈕操作。