Question

请耐心等待，因为我仍在学习javascript。我创建了一个简单的滑块，可在单击时左右移动。它使用transform属性并将其沿所需方向移动25％。

我想做的是养成对这样的简单事情不使用全局变量的习惯。以下是我所拥有的东西，它工作正常，但是希望您对它进行一些清洁工作。

var wildlifeSlideLeft = document.querySelector('.wildlife__btn--previous');
var wildlifeSlideRight = document.querySelector('.wildlife__btn--next');
var wildlifeSlider = document.querySelector('.wildlife__images__slider');
var wildlifeCurrentPosition = 0

//Wildlife slide left
wildlifeSlideLeft.addEventListener('click', function () {
    slideLeft();
});

//Wildlife slide right
wildlifeSlideRight.addEventListener('click', function () {
    slideRight();
});

function slideLeft() {
    if(!(wildlifeCurrentPosition === 0)) {
        wildlifeCurrentPosition = wildlifeCurrentPosition + 25;
        wildlifeSlider.style.transform = "translateX(" + wildlifeCurrentPosition + "%)";
    }
}

function slideRight() {
    if(!(wildlifeCurrentPosition === -100)) {
        wildlifeCurrentPosition = wildlifeCurrentPosition - 25;
        wildlifeSlider.style.transform = "translateX(" + wildlifeCurrentPosition + "%)";
    }   
}

Answer 1

最简单的方法（最小的代码更改）是将代码包装在匿名闭包中。

即：

(function (){

    //Your code goes here.

})();

这会将这些变量保留在闭包的范围内，而不是将其附加到全局范围。

或者是为了提高可读性甚至是可测试性。您可以命名该函数并调用它。

function attachSliderEvents() {
    //Your code goes here.
}

attachSliderEvents();

Answer 2

如果您只想将变量保留在window外，则可以使用IIFE。

(function () {
  let wildlifeSlideLeft = document.querySelector('.wildlife__btn--previous');
  let wildlifeSlideRight = document.querySelector('.wildlife__btn--next');
  let wildlifeSlider = document.querySelector('.wildlife__images__slider');
  let wildlifeCurrentPosition = 0;

  // Wildlife slide left
  wildlifeSlideLeft.addEventListener('click', function () {
    slideLeft();
  });

  // Wildlife slide right
  wildlifeSlideRight.addEventListener('click', function () {
    slideRight();
  });

  function slideLeft () {
    if (!(wildlifeCurrentPosition === 0)) {
      wildlifeCurrentPosition = wildlifeCurrentPosition + 25;
      wildlifeSlider.style.transform = 'translateX(' + wildlifeCurrentPosition + '%)';
    }
  }

  function slideRight () {
    if (!(wildlifeCurrentPosition === -100)) {
      wildlifeCurrentPosition = wildlifeCurrentPosition - 25;
      wildlifeSlider.style.transform = 'translateX(' + wildlifeCurrentPosition + '%)';
    }
  }
})();

Answer 3

答案

您可以使用Self-Executing Anonymous Function将与Slider相关的所有内容包装在名为Slider的变量中。

工作示例：

var Person = (function(){

  var personName = 'Johnny';
  
  var getName = () => personName;
  
  return {
    getName: getName
  }  
})();

console.log(Person.getName()); //Johnny

进一步的解释

通过这种方式，Person拥有自己的Scope（包含变量，函数等），您可以使用变量上的点来访问。例如。 Slider.slideLeft()

Answer 4

一个简单的解决方案是将其包装在一个自调用匿名函数中。

(function() {
  //insert code here
})();

然后，您可以将诸如文档之类的参数传递给它。

(function(d){
    var wildlifeSlideLeft = d.querySelector('.wildlife__btn--previous');
    //...
 })(document);

如何避免在JavaScript滑块中使用全局变量

4 个答案:

答案

工作示例：

进一步的解释