JavaScript 中的递增

Question

我正在尝试创建一个滑动侧边栏，并且想知道是否有比我已经在做的更好的方法。

  <img id = "MenuIcon" src = "MenuIcon.png" alt = "Menu Icon" onclick = "slideSideBar()" />

目前我只是检查sideSlideCount是否是偶数-如果是侧边栏一定不能出来，所以当函数被调用时它会滑出；如果 sideSlideCount 是奇数（即 % 2 != 0），则侧边栏应该滑出视图。

var sideSlideCount = 0; // variable used with the side bar
var bodyHeight = $(window).height();
var bodyWidth = $(window).width();
console.log(bodyWidth);

function slideSideBar() {
    if (sideSlideCount % 2 == 0) { // if sideSlideCount is even, i.e. the side bar is hidden
        $("#SideBar").animate({width: bodyWidth / 6}, 600); // slide the bar out to 300 width, 0.6 seconds
        $("#SideLinks").fadeTo(1000, 0.8); // fade the links into view, 1 second, to 100% opacity
    }
    else { // else, if the side bar is in view
        $("#SideBar").fadeIn(300).animate({width: 0}, 600); // slide the bar back out of view (0 width), 0.6 seconds
        $("#SideLinks").fadeTo(200, 0); // fade the links out of view, 0.2 seconds, to 0% opacity
    }
    sideSlideCount++; // increment the variable
}

Answer 1

您可以简单地使您的代码模块化以避免全局变量。您应该研究 AMD 模块，但为了简单起见，您可以自己创建一个命名空间，您的代码将在其中存放。

演示：http://jsfiddle.net/BzYuQ/

//Define a SlidingSidebar reusable component
!function (ns, $) {

    function SlidingSidebar(el, animateDuration) {
        this.$el = $(el);
        this.animateDuration = animateDuration;
    }

    SlidingSidebar.prototype = {
        constructor: SlidingSidebar,

        toggle: function () {
            this.$el.stop().animate({ width: 'toggle' }, this.animateDuration);
        }
    };

    ns.SlidingSidebar = SlidingSidebar;

}(slideExampleSite = window.slideExampleSite || {}, jQuery);


$(function () {
    //The following behavior could also be in a configurable "SlidebarFeature" module
    //or you could integrate the button directly into the SlidingSidebar.
    //I'm just showing how code can be modularized here.
    var sideBar = new slideExampleSite.SlidingSidebar('#sidebar', 600);

    $('#toggle-btn').click(function () {
        sideBar.toggle();
    });
});

显然在这种情况下，SlidingSidebar 组件并没有做太多的事情，但是随着应用程序的增长，将代码模块化以摆脱$(function () {/*tons of code*/}); 反模式将在许多方面得到回报。

Answer 2

你没有说什么是“更好”，但如果只是为了避免全局，你可以使用闭包：

var slideSideBar = (function() {
  var sideSlideCount = false; // variable used with the side bar
  var bodyHeight = $(window).height();
  var bodyWidth = $(window).width();
  console.log(bodyWidth);

  // This function has access to all the above variables, but no other
  // function does.
  function slideSideBar() {
    if (sideSlideCount) {
        $("#SideBar").animate({width: bodyWidth / 6}, 600);
        $("#SideLinks").fadeTo(1000, 0.8);

    } else {
        $("#SideBar").fadeIn(300).animate({width: 0}, 600);
        $("#SideLinks").fadeTo(200, 0);
    }
    sideSlideCount = !sideSlideCount;
  }

  // Return a reference to the slideSideBar function so it's available
  // globally, but access to variables is "private"
  return slideSideBar;
}());

唯一的区别是 slideSideBar 在上面执行之前不会存在，所以在执行之前不要尝试调用它。

Answer 3

不确定你对“更好”的定义，但我看到你使用的 jQuery 有一个很好的 $toggle 功能，可以在这里提供帮助。

function slidesideBar(){
     $("#SideBar").toggle(function() {
          $(this).animate({width: bodyWidth / 6}, 600); // slide the bar out to 300 width, 0.6 seconds
          $("#SideLinks").fadeTo(1000, 0.8); // fade the links into view, 1 second, to 100% opacity
     }, function() {
          $(this).fadeIn(300).animate({width: 0}, 600); // slide the bar back out of view (0 width), 0.6 seconds
          $("#SideLinks").fadeTo(200, 0); // fade the links out of view, 0.2 seconds, to 0% opacity
     });​
}

信用：jQuery Animation Toggle。复制粘贴：

当给定函数列表作为参数时，.toggle(fn1, fn2) 方法将在从第一个函数开始给出的函数之间交替。这会自动为您跟踪切换状态 - 您不必这样做。

jQuery 文档是here。 .toggle() 有多种形式，具体取决于所使用的参数，因此您在搜索 jQuery 文档时并不总能找到正确的。