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

本文关键字：返回 函数 为什么 | 更新日期: 2023-09-27 18:03:08

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

这样做的额外好处是什么?当我在没有return true和return false的情况下运行下面的代码时，它的工作原理与使用return语句完全相同。

在什么情况下使用这些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>

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

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

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

或者，您可以使用e.p preventdefault()来代替return false;。

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/

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

你问"为什么"这个规则存在，而实际上它并不存在。

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

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

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

例如，在面向对象编程中，对于简单的函数返回self变得越来越普遍。这允许你在一行中链接不同的函数…但是面向对象编程和第一章有什么关系呢?

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

祝你好运!

相关文章：