Question

我目前正在使用Mikowski和Powell的单页Web应用程序。在完成第1章中的简单教程之后，我对return true，return false和toggleSlider()中onClickSlider()和initModule()的必要性感到困惑。功能

这样做的额外好处是什么？当我在没有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

在我看来，你正在寻找一个难以确定的规则，而那里确实没有。

你问＆＃34;为什么＆＃34;这条规则确实存在，当它真的没有。

您仍在阅读Mikowski和Powell的单页网页应用的第1章，我很高兴他们让您思考并注意到您的功能＆＃39; s返回值。

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

在更高级的功能中，您可能会发现自己返回self或object任意数量的不同返回值 - 所有这些都根据应用程序的架构和您需要的内容而定

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

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

祝你好运！

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

3 个答案: