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

Question

我正在编写一个 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 函数更好？我认为最后一种方法具有更好的性能，但在这种情况下性能不是问题，因为它是一个非常简单的站点。

Answer 1

我认为您可以使用这些函数，毕竟 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");

通过这种方式，您可以将常用功能封装在一个函数中，并且您不必更新所有隐藏函数来修改隐藏的完成方式。