使用单行函数或重复代码

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 以后可能涉及的不仅仅是将 class 应用于元素。我唯一要指出的是尽量减少这些函数中重复代码的数量。不要担心您正在添加函数调用开销这一事实，除非您是在性能关键场景中这样做，否则运行时解释器不会在意。

您可以安排函数以避免重复自己的一种方法：

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

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

如果你绝对必须有 shorthand，你可以这样做：

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

甚至

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

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

Answer 2

如果 resetInputValues() 方法 returns undefined（意思是 returns 什么都没有，例如）或任何虚假值，您可以将其重构为：

function togglePanel(type, toHide) {
    $('section#' + type + '-panel').toggleClass('hide', toHide || resetInputValues());
}

使用 togglePanel('break'); 代表 showBreakPanel()，使用 togglePanel('break', true) 代表 hideBreakPanel()。

Answer 3

My question is related with code quality and refactoring. When is better to have simple functions like these or invoke a Javascript/jQuery function directly? I suppose that the last approach have a better performance, but in this case performance is not a problem as it is a really simple site.

从一般的角度来看，如果你有很多单行函数和多行代码塞进一个，如果目标仅仅是 语法糖和非常个人化的清晰度定义（这可能非常短暂，并且会像时尚潮流一样变化）。

这是因为赋予代码长寿的质量通常首先是熟悉度，其次是集中化（较少的代码分支可以跳过）。能够识别而不是绝对厌恶你多年后编写的代码（找不到它 bizarre/alien，例如）通常有利于那些减少系统中概念数量的品质，并流向非常地道的语言和库的使用.除了正式的 SE 指标之外，这里还有一些人为指标，比如有动力继续维护相同的代码。

但这是一种平衡行为。如果寻求这些更短和更甜美的函数调用的动机更多地与语法之外的概念有关，比如有一个中心位置来修改、扩展和检测行为，以提高容易出错的代码的安全性等，那么甚至一堆单行函数的功能在未来可能会开始变得很有帮助。在这种情况下，保持熟悉的关键是确保您（和您的团队，如果适用）对此类功能进行大量重用，并将其纳入日常实践和标准。

惯用代码在这里往往很安全，因为我们往往会被它的示例所淹没，从而保持熟悉。任何时候你开始深入建立专有接口，我们都有失去这种质量的风险。然而，专有接口肯定是需要的，所以关键是让它们发挥作用。

另一种深奥的观点是，相互依赖的功能往往会一起老化。仅对语言提供的非常简单的类型进行操作的图像处理功能往往会老化。例如，我们可以找到此类 C 函数，它们在今天仍然相关且易于应用，可追溯到 80 年代。这样的代码很熟悉。如果它依赖于一个非常奇特的像素和颜色库以及超出规范的数学例程，那么它往往会老化得更快（失去 familiarity/applicability），因为该图像处理例程现在随着它所依赖的一切而老化.因此，再次强调，始终着眼于走钢丝平衡和权衡取舍，避免在规范之外冒险太远的诱惑有时会很有用，并避免将您的代码耦合到太多异国情调的接口（尤其是那些提供更多服务的接口）比糖）。有时，稍微更冗长的代码形式有利于减少概念的数量并更直接地使用系统中已有的内容可能更可取。

然而，通常情况下，这取决于情况。但这些可能是您在做出所有决定时需要牢记的一些不太常提及的品质。

使用单行函数或重复代码

Use single line functions or repeat code

javascript

jquery

refactoring

coding-style