javascript – 使用单行函数或重复代码

我正在编写一个Javascript代码,我需要在其中显示和隐藏Web的某些部分.我最终得到了这样的功能：

function hideBreakPanel() {
  $('section#break-panel').addClass('hide');
}

function hideTimerPanel() {
  $('section#timer-panel').addClass('hide');
}

function showBreakPanel() {
  resetInputValues();
  $('section#break-panel').removeClass('hide');
}

function showTimerPanel() {
  resetInputValues();
  $('section#timer-panel').removeClass('hide');
}

我的问题与代码质量和重构有关.什么时候更好地拥有像这样的简单函数或直接调用Javascript / jQuery函数？我认为最后一种方法具有更好的性能,但在这种情况下,性能不是问题,因为它是一个非常简单的站点.

解决方法:

我认为你拥有这样的函数很好,毕竟hideBreakPanel后来可能涉及的不仅仅是将一个类应用于一个元素.我唯一指出的是尝试最小化这些函数中重复代码的数量.不要担心您正在添加函数调用开销这一事实,除非您在性能关键的情况下执行此操作,否则运行时解释器可能不在乎.

您可以通过一种方式安排功能以避免重复自己：

function hidePanel(name) {
  $('section#' + name + '-panel').addClass('hide');
}

function showPanel(name) {
    resetInputValues();
    $('section#' + name + '-panel').removeClass('hide');
}

如果你绝对必须有速记,那么你可以这样做：

function hideBreakPanel() {
   hidePanel("break");
}

甚至

var hideBreakPanel = hidePanel.bind(hidePanel, "break");

这样就可以在函数中封装常用功能,而且不必更新所有隐藏功能来修改隐藏的方式.