两个函数共享相似点时进行重构 [英] refactoring when two functions share some similarity

问题描述

我的应用程序中有两个选项卡，一个是播放器"选项卡，另一个是教练"选项卡.我在播放器标签中有一个function1，在教练标签中有function2.

I have two tabs in my app one is a player tab and another is a coaching tab. I have a function1 in the player tab and function2 in the coaching tab.

功能1

var beforeList = $('#players').val()
$('#players').change(function () {
  var afterList = $(this).val()
  var selectedPlayer = ''

  if (!beforeList) {
    selectedPlayer = afterList[0] 
    $('parent option[value=' + selectedPlayer + ']').add()
    $('#injuredPlayer option[value=' + selectedPlayer + ']').add()
  } else if (!afterList) {
    selectedPlayer = beforeList[0] 
    $('parent option[value=' + selectedPlayer + ']').remove()
    $('#injuredPlayer option[value=' + selectedPlayer + ']').remove()
  } else if (beforeList.length > afterList.length) {
    selectedPlayer = getselectedPlayer(beforeList, afterList) 
    $('parent option[value=' + selectedPlayer + ']').remove()
    $('#injuredPlayer option[value=' + selectedPlayer + ']').remove()
  } else if (beforeList.length < afterList.length) {
    selectedPlayer = getselectedPlayer(afterList, beforeList) 
    $('parent option[value=' + selectedPlayer + ']').add()
    $('#injuredPlayer option[value=' + selectedPlayer + ']').add()
  }

  if (afterList) {
    for (var i = 0; i < afterList.length; i++) {
      var optionInParentB = ($('#dad option[value=' + afterList[i] + ']').length > 0)
      var optionInParentA = ($('#mom option[value=' + afterList[i] + ']').length > 0)
      var optionInInjuredPlayer = ($('#injuredPlayer option[value=' + afterList[i] + ']').length > 0)
      if (!optionInParentB) {
        $('<option/>', {value: afterList[i], html: afterList[i]}).appendTo('#dad')
      }
      if (!optionInParentA) {
        $('<option/>', {value: afterList[i], html: afterList[i]}).appendTo('#mom')
      }
      if (!optionInInjuredPlayer){
        $('<option/>', {value: afterList[i], html: afterList[i]}).appendTo('#injuredPlayer')
      }
    }
  } else {
    $('#mom').empty()
    $('#dad').empty()
    $('#injuredPlayer').empty()
  }

  beforeList = afterList
})

功能2

var beforeList = $('#coach').val()
$('#coach').change(function () {
  var afterList = $(this).val()
  var selectedCoach = ''

  if (!beforeList) {
    selectedCoach = afterList[0] 
    $('#injuredCoach option[value=' + selectedCoach + ']').add()
  } else if (!afterList) {
    selectedCoach = beforeList[0] 
    $('#injuredCoach option[value=' + selectedCoach + ']').remove()
  } else if (beforeList.length > afterList.length) {
    selectedCoach = getselectedCoach(beforeList, afterList) 
    $('#injuredCoach option[value=' + selectedCoach + ']').remove()
  } else if (beforeList.length < afterList.length) {
    selectedCoach = getselectedCoach(afterList, beforeList) 
    $('#injuredCoach option[value=' + selectedCoach + ']').add()
  }

  if (afterList) {
    for (var i = 0; i < afterList.length; i++) {
      var optionInInjuredCoach = ($('#injuredCoach option[value=' + afterList[i] + ']').length > 0)
      if (!optionInInjuredCoach){
        $('<option/>', {value: afterList[i], html: afterList[i]}).appendTo('#injuredCoach')
      }
    }
  } else {
    $('#injuredCoach').empty()
  }

  beforeList = afterList
})

当我看到两个功能非常相似时，唯一的区别是播放器"选项卡有父母，而教练"选项卡没有父母.我想知道这些功能是否很好，还是应该对其进行重构.如果我只保留它们，这是不好的做法吗?如果我要重构，则不确定如何使函数足够通用以适应两个选项卡的差异.我很想念，我是JS的新手，如果我误会了，请原谅我.

When I look at both the functions I see they are very similar, the only difference is that the player tab has parents and the coaching tab does not. I was wondering if the functions are fine as they are or if they should be refactored. Is it bad practice if I just leave them as they are? If I am to refactor I was not sure how I can make a function generic enough to accommodate the differences of two tabs. I would love thoughts and as I am new to JS please forgive me if I have misspoken.

推荐答案

如果jQuery找不到元素(因为它不存在于文档中或因为它在函数运行时被隐藏)，它往往会静默地失败.如果这对您没问题，并且您没有收到任何错误，则一切都很好.

jQuery tends to fail silently if it doesn't find an element (because it doesn't exist in the document or because it's hidden at function runtime). If this is ok with you and you don't get errors, all good.

否则，将某些重复的代码移到新的命名函数中，并向其传递参数，然后使用该参数确定是否对这些元素执行操作.像这样:

Otherwise, move some of that duplicated code out to a new named function and pass an argument to it, and use that to determine whether to act on those elements. Something like this:

// define the function
function doCommonStuff(doDad) {
    if (doDad) {
        // do Dad stuff
    }
}

// call the function
doCommonStuff(true);

这篇关于两个函数共享相似点时进行重构的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！