重构共享相同变量的两个 JS 函数

Question

重构以下两个包含非常相似的变量声明的函数的最佳方法是什么：

function minFeeCheck(input) {
    input.value = parseFloat(input.value).toFixed(2);
    var minFeeUpdate = parseFloat($("#minimumFee").val()).toFixed(2);
    var maxFeeUpdate = parseFloat($("#maximumFee").val()).toFixed(2);
    var minInt = parseInt(minFeeUpdate);
    var maxInt = parseInt(maxFeeUpdate);
       if (minFeeUpdate < 0) input.value = 0;
       if (minInt > maxInt) input.value = maxFeeUpdate;
       if (minInt > maxInt) {
           input.value = minFeeUpdate;
           $("#maximumFee").val(minFeeUpdate);
       }
}
function maxFeeCheck(input) {
    input.value = parseFloat(input.value).toFixed(2);
    var minFeeUpdate = parseFloat($("#minimumFee").val()).toFixed(2);
    var maxFeeUpdate = parseFloat($("#maximumFee").val()).toFixed(2);
    var minInt = parseInt(minFeeUpdate);
    var maxInt = parseInt(maxFeeUpdate);
       if (maxFeeUpdate < 0) input.value = 0;
       if (maxInt < minInt) {
           input.value = maxFeeUpdate;
           $("#minimumFee").val(maxFeeUpdate);
       }
}

这两个函数看起来很相似，只是一个目标是最小值，一个目标是最大值。在保持相同功能的同时写出它的最理想和最干净的方法是什么。谢谢

更新

在@gaetanoM 的帮助下，这是一个可能的解决方案。它包括检查用户是否输入负数（这会将 minFee 和 maxFee 更改为零）。

HTML:

<input id="minFee" class="form-control form-control-custom" value="" maxlength="255" onchange="minMaxFeeCheck(this);" min="0" max="200" data-toggle="tooltip" title="A number greater than zero and less than maximum fee." type="number"/>

<input id="maxFee" class="form-control form-control-custom" value="" maxlength="255" onchange="minMaxFeeCheck(this);" min="0" max="200" data-toggle="tooltip" title="A number greater than zero and minimum fee." type="number"/>

JavaScript:

function minMaxFeeCheck(input, minormax) {
    input.value = parseFloat(input.value).toFixed(2);
    var minFeeUpdate = parseFloat($("#minimumFee").val()).toFixed(2);
    var maxFeeUpdate = parseFloat($("#maximumFee").val()).toFixed(2);
    var minInt = parseInt(minFeeUpdate);
    var maxInt = parseInt(maxFeeUpdate);
    var tmp = (minormax) ? minFeeUpdate : maxFeeUpdate;
    if (input.value < 0) {
          input.value = 0;
          $("#minimumFee").val(0);
    } else {
        if (tmp < 0) input.value = 0;
        if (minInt > maxInt) input.value = tmp;
        if (minInt > maxInt) {
            input.value = tmp;
            $("#minimumFee").val(tmp);
        }   
    }
}

Answer 1

我的建议是：

function minmaxFeeCheck(input, minormax) {
    input.value = parseFloat(input.value).toFixed(2);
    var minFeeUpdate = parseFloat($("#minimumFee").val()).toFixed(2);
    var maxFeeUpdate = parseFloat($("#maximumFee").val()).toFixed(2);
    var minInt = parseInt(minFeeUpdate);
    var maxInt = parseInt(maxFeeUpdate);

    var tmp = (minormax) ? minFeeUpdate : maxFeeUpdate;

    if (tmp < 0) input.value = 0;
    if (minInt > maxInt) input.value = tmp;
    if (minInt > maxInt) {
        input.value = tmp;
        $("#minimumFee").val(tmp);
    }
}

确实：

if (minInt > maxInt) {

与以下相同：

if (maxInt < minInt) {

Answer 2

你可以试试这个方法:

 function minMaxFeeCheck(input) {
  input.value = +parseFloat(input.value).toFixed(2);
  const minFeeUpdate = +parseFloat($("#minimumFee").val()).toFixed(2);
  const maxFeeUpdate = +parseFloat($("#maximumFee").val()).toFixed(2);
  minFeeUpdate < 0 ? input.value = 0 : minFeeUpdate > maxFeeUpdate ? input.value = minFeeUpdate && $('#maximumFee').val(minFeeUpdate) : input.value = maxFeeUpdate && $('#minimumFee').val(maxFeeUpdate);
}

重构共享相同变量的两个 JS 函数

Refactor Two JS Functions That Share Same Variables

javascript

jquery

refactoring

dry