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

Question

Bear with me as I am still learning javascript. I have created a simple slider that moves left and right on click. It uses the transform property and moves it 25% in the desired direction.

What I want to do is get into the habit of not using global variables for simple things like this. Below is what I have and it works fine but would appreciate any advice on cleaning it up a little.

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

The simplest approach (minimal code change) would be to wrap your code in an anonymous closure.

Ie:

(function (){

    //Your code goes here.

})();

This keeps those variable within the scope of the closure rather than attaching them to global scope.

Or for even more readability and maybe even testability. You could name the function and invoke it.

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

attachSliderEvents();

Answer 2

If all you want to do is keep the variables out of window , you could use an 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

Answer

You could use a Self-Executing Anonymous Function to wrap everything related to your Slider in a variable named Slider .

Working Example:

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

Further explanation

This way, Person has its own Scope ( that contains variables, functions etc ) which you can access using a dot on your variable. Eg. Slider.slideLeft()

Answer 4

A simple solution would be to wrap this in a self invoking anonymous function.

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

Then you can pass arguments such as the document to it.

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