为什么从函数返回真或假？

Question

我目前正在研究 Mikowski 和 Powell 的单页 Web 应用程序。在完成第 1 章中的简单教程后，我很困惑为什么在 toggleSlider()、onClickSlider() 和 initModule() 函数中需要 return true 和 return false。

这样做的额外好处是什么？当我在没有return true 和return false 的情况下运行以下代码时，它的工作方式与返回语句完全相同。

在什么情况下，有这些返回语句实际上是有益和必要的？

var spa = (function($) {
  var configMap = {
      extended_height: 434,
      extended_title: 'Click to retract',
      retracted_height: 16,
      retracted_title: 'Click to extend',
      template_html: '<div class="spa-slider"><\/div>'
    },
    $chatSlider,
    toggleSlider, onClickSlider, initModule;

  toggleSlider = function() {
    var slider_height = $chatSlider.height();

    if (slider_height === configMap.retracted_height) {

      $chatSlider
        .animate({
          height: configMap.extended_height
        })
        .attr('title', configMap.extended_title);
      return true;

    } else if (slider_height === configMap.extended_height) {
      $chatSlider
        .animate({
          height: configMap.retracted_height
        })
        .attr('title', configMap.retracted_title);
      return true;

    }

    console.log("Nothing to extend or retract. No events fired.");
    return false;
  };

  onClickSlider = function(event) {
    console.log("Calling onClickSlider click event");
    toggleSlider();
    return false;
  };

  initModule = function($container) {
    $container.html(configMap.template_html);

    $chatSlider = $container.find('.spa-slider');

    $chatSlider
      .attr('title', configMap.retracted_title)
      .click(onClickSlider);

    return true;
  };

  return {
    initModule: initModule
  };

}(jQuery));

jQuery(document).ready(
  function() {
    spa.initModule(jQuery('#spa'));
  }
);

body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #777;
}
#spa {
  position: absolute;
  top: 8px;
  left: 8px;
  bottom: 8px;
  right: 8px;
  border-radius: 8px 8px 0 8px;
  background-color: #fff;
}
.spa-slider {
  position: absolute;
  bottom: 0;
  right: 2px;
  width: 300px;
  height: 16px;
  cursor: pointer;
  border-radius: 8px 0 0 0;
  background-color: #f00;
}

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <div id="spa">
        <div class="spa-slider"></div>
    </div>
</script>

Answer 1

在我看来，您正在寻找一个真正没有规则的硬性规则。

你问“为什么”这条规则存在，而实际上它并不存在。

您仍在阅读 Mikowski 和 Powell 的单页 Web 应用程序的第 1 章，我很高兴他们让您思考并注意到您的函数的返回值。

有许多可能的返回值 - true 和 false 只是两个非常常见且非常重要的选项。

在更高级的函数中，您可能会发现自己返回 self 或 object 任意数量的不同返回值 - 所有这些都取决于应用程序的架构和您的需要。

例如，在面向对象编程中，对于简单的函数返回self 变得越来越普遍。这允许您在一行中链接不同的功能......但是面向对象编程与第 1 章有什么关系？

我建议你给自己更多的时间和经验。现在，我建议你相信这个过程。 Mikowski 和 Powell 正在尽最大努力为您提供大量知识……但他们必须将其分成小块。

祝你好运！

Answer 2

Javascript 函数中这样的返回值通常用于指示成功或失败。您可以通过执行以下操作来创建一个简单的流控制结构：

var doSomething = function() {
    if (error) { 
        return false; 
    } else { 
        return true; 
   }
};

if (doSomething()) { 
    doSomethingElse(); 
} else { 
    console.log("There was an error!"); 
}

也就是说，除了快速演示之外，将它用于其他任何事情都不是一个好主意。 return false 在纯粹以这种方式使用时会产生意想不到的结果而臭名昭著 - 几乎总是有更好的选择来实现您的目标（除非您的目标是返回一个布尔值！）。如果你只需要转义一个活动函数，你可以使用return;。

在您的特定代码中，toggleSlider() 似乎返回这些值以指示活动，而 onClickSlider() 使用 return false 代替 e.preventDefault()，正如 Nicholas 在他们的回答中提到的那样。你可以在这里阅读更多关于为什么这通常是一个坏主意：http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/

Answer 3

通常，在事件处理程序中，返回 false 是告诉事件实际上不触发的一种方式。因此，例如，在 onsubmit 的情况下，这意味着表单没有提交。

在您的示例中，return true; 将使动画发生，而 return false; 不会。

或者，您可以使用e.preventdefault() 而不是return false;。