重构/简化javascript中的多个if条件语句

Question

在网页上有多个选择标记，用于隐藏或显示表格行。

这个逻辑是在javascript中用多个if/else if条件语句实现的，我正在寻找一种方法来简化它：

if(
  (validPublication == true)
  && (productPublication > 0)
  && (genre == -1 || $(this).data('genre') == genre)
  && identificator_shared == false
  && (format == 'foo' && $(this).data('foo') == true)
  && (identificator_version == -1 || $(this).data('topic_version') == identificator_version)
) {
  $('#filter_topic_version_eq').removeAttr('disabled');
  $('#filter_identificator_version_eq').removeAttr('disabled');
  $('#filter_genre_eq').removeAttr('disabled');
  $('#filter_format_eq').removeAttr('disabled');
  $(this).show();
  if ($(this).data('product')) {
    products.push($(this).data('product'));
  }
}
else if(
  (validPublication == true)
  && (productPublication > 0)
  && (genre == -1 || $(this).data('genre') == genre)
  // if format foo && drvt_shared=true dann alle Versionen anzeigen
  && (format == 'foo' && (identificator_shared == true))
  && ($(this).data('foo') == true)
) {
  $('#filter_topic_version_eq').removeAttr('disabled');
  $('#filter_identificator_version_eq').removeAttr('disabled');
  $('#filter_format_eq').removeAttr('disabled');
  $('#filter_genre_eq').removeAttr('disabled');
  $(this).show();
  if ($(this).data('product')) {
    products.push($(this).data('product'));
  }
}
else if(
  (validPublication == true)
  && (productPublication > 0)
  && (genre == -1 || $(this).data('genre') == genre)
  && (format == 'bar' && (identificator_shared == false))
  && ($(this).data('bar') == true)
  && (identificator_version == -1 || $(this).data('topic_version') == identificator_version)
) {
  $('#filter_format_eq').removeAttr('disabled');
  $('#filter_genre_eq').removeAttr('disabled');
  $('#filter_topic_version_eq').removeAttr('disabled');
  $('#filter_identificator_version_eq').removeAttr('disabled');
  $(this).show();
  if ($(this).data('product')) {
    products.push($(this).data('product'));
  }
}
... and so on

我不认为使用switch语句会有很大的改进。

===更新:在注释中给出了在单独的函数中提取if条件的建议。

而不是

  if (validPublication == true)
    && (productPublication > 0)
    && (genre == -1 || $(this).data('genre') == genre)
    && identificator_shared == false
    && (format == 'foo' && $(this).data('foo') == true)
    && (identificator_version == -1 || $(this).data('topic_version') == identificator_version)
  )

我应该使用：

function foo(validPublication, productPublication, genre,identificator_shared,format,identificator_version) {
  if(
    (validPublication == true)
    && (productPublication > 0)
    && (genre == -1 || $(this).data('genre') == genre)
    && identificator_shared == false
    && (format == 'foo' && $(this).data('foo') == true)
    && (identificator_version == -1 || $(this).data('topic_version') == identificator_version)
  ) {
    return true
  }
}

所以主条件看起来是这样的：

if foo(validPublication, productPublication, genre,identificator_shared,format,identificator_version)
else if(bar())
else if(baz())

我的理解正确吗？

Answer 1

我尽了最大的努力减少代码，它可以更好，但它将是复杂的。

你应该多读一些DRY (不要重复自己)，它会对你有很大的帮助，可以避免这种情况，并写出简单易读的代码。

此aricle可能会帮助您

function isProductPublication(productPublication) {
  return productPublication > 0;
}

function isgenre(elm) {
  return genre == -1 || $(elm).data('genre') == genre;
}

function isEqual(check, value) {
  return check == value;
}

function _do(elm) {
  $('#filter_topic_version_eq').removeAttr('disabled');
  $('#filter_identificator_version_eq').removeAttr('disabled');
  $('#filter_genre_eq').removeAttr('disabled');
  $('#filter_format_eq').removeAttr('disabled');
  $(elm).show();
  if ($(elm).data('product')) {
    products.push($(elm).data('product'));
  }
}


if (
  (isEqual(validPublication, true) && isProductPublication(productPublication) && isgenre(this))
  && 
  (
    (isEqual(identificator_shared, false) && (isEqual(format, 'foo') && isEqual($(this).data('foo'), true)) && (isEqual(identificator_version, -1) || isEqual($(this).data('topic_version'), identificator_version)))
    || (isEqual(format, 'foo') && isEqual(identificator_shared, true) && isEqual($(this).data('foo'), true))
    || (isEqual(format, 'bar') && isEqual(identificator_shared == false) && isEqual($(this).data('bar'), true) && (isEqual(identificator_version, -1) || isEqual($(this).data('topic_version'), identificator_version)))
  )
) {
  _do(this);
}