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

Question

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

该逻辑是在带有多个 if/else if - 条件的 javascript 中实现的，我正在寻找一种简化它的方法：

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())

我理解正确吗？

标签： javascript

Answer 1

我尽力减少代码，它可以更好，但它会很复杂。

你应该阅读更多关于 DRY（不要重复自己）的信息，它会帮助你避免这种情况并编写简单易读的代码。

这篇文章可能对你有所帮助

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);
}