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

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;.