Question

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

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

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

Answer 2

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

从一般的角度来看，如果你有很多单线函数和多行代码塞进一个类似的东西，如果你的目标仅仅是语法糖，你可能会遇到一些麻烦以及非常个性化的清晰度定义（这可能是非常短暂的，并且会像流行趋势一样发生变化）。

这是因为提供代码寿命的质量通常是熟悉度，并且在较小程度上，集中化（较少的代码分支跳过）。能够识别并且不是绝对厌恶你多年后写的代码（没有发现它奇怪/外星人，例如）往往倾向于减少系统中概念数量的那些特性，并且流向非常惯用的语言和库。除了正式的SE指标之外，还有人力指标，例如只是被激励保持相同的代码。

但这是一种平衡行为。如果寻求这些更短和更甜的函数调用的动机更多地与语法之外的概念有关，例如具有修改和扩展和检测行为的中心位置，以提高其他容易出错的代码的安全性等等，那么即使是一堆单线功能可能会在未来开始变得非常有用。在这种情况下，保持熟悉程度的关键是确保您（以及您的团队，如果适用）有足够的重复使用这些功能，并将其纳入日常实践和标准。

惯用法代码在这里往往非常安全，因为我们倾向于通过它的例子使其饱和，使其熟悉。任何时候你开始深入建立专有接口，我们都有可能失去这种质量。然而，绝对需要专有接口，因此关键是要使它们重要。

另一种深奥的观点是，彼此依赖的功能往往会一起衰老。仅对语言提供的非常简单的类型进行操作的图像处理功能趋于老化。例如，我们可以找到这种C类功能，这些功能在今天仍然相关且易于应用，可追溯到80年代。这样的代码保持熟悉。如果它依赖于非常奇特的像素和颜色库以及常规之外的数学例程，那么它往往会更快地老化（失去熟悉度/适用性），因为图像处理程序现在随着它所依赖的一切而老化。因此，总是着眼于走钢丝平衡和权衡取舍，有时可以避免在规范之外冒险过度的诱惑，并避免将代码与太多异国情调的界面（特别是那些服务不多的界面）联系起来比糖）。有时候，有利于减少概念数量并且更直接地使用系统中已有的代码的稍微冗长的代码形式可能是更可取的。

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

Answer 3

如果resetInputValues()方法返回undefined（意味着没有返回任何内容）或任何虚假值，您可以将其重构为：

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

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

使用单行函数或重复代码

3 个答案: