为什么从函数返回true或false？

Question

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

这样做有什么好处？ 当我运行下面的代码而没有return true并return false ，它的工作方式与return语句完全相同。

具有这些退货声明的适当情况实际上是有益和必要的吗？

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

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

在你的例子中return true; 会使动画发生，同时return false; 惯于。

或者，您可以执行e.preventdefault（）而不是return false; 。

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

在我看来，你正在寻找一个硬实的规则，其中没有一个。

当问题确实存在时，你问“为什么”这个规则存在。

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

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

在更高级的功能，你可能会发现自己返回self或object的任何数量的不同返回值的的-所有根据应用程序的架构和你需要什么。

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

我建议你给自己更多的时间和经验。 现在，我建议你相信这个过程。 米高夫斯基和鲍威尔正在尽最大努力为你提供大量的知识......但是他们必须把它分成更小的小块。

祝好运！