Javascript Refactoring code

Question

I have a working code that wraps all the stuff in anonymous function, to avoid pollute global namespace. But it still containing too many global variables, so, i am trying to clean it in some way. This is now:

(function() {
  ...
  var paddleHeight = 10;
  var paddleWidth = 75;
  var paddleX = (canvas.width-paddleWidth)/2;
  var rightPressed = false;
  var leftPressed = false;

  document.addEventListener("keydown", keyDownHandler, false);
  document.addEventListener("keyup", keyUpHandler, false);


  function keyDownHandler(e) {

    if(e.keyCode == 39) {
      rightPressed = true;
    }
    else if(e.keyCode == 37) {
      leftPressed = true;
    }
  }

  function keyUpHandler(e) {

    if(e.keyCode == 39) {
      rightPressed = false;
    }
    else if(e.keyCode == 37) {
      leftPressed = false;
    }
  }


  function drawPaddle() {
    ctx.beginPath();        // Draw paddle    
    ctx.rect(paddleX, canvas.height-paddleHeight, paddleWidth, paddleHeight);
    ctx.fillStyle = "#0095DD";
    ctx.fill();
    ctx.closePath();        // end draw
  }


})();

In the draw() function"Main", i have a conditional statement to check the relative movement of the paddle:

function draw() {
  ...
  // here i'm clearing canvas after each frame draw
  //here are calls to other functions.

if(rightPressed && paddleX < canvas.width-paddleWidth) {
      paddleX += 7;
    }
    else if(leftPressed && paddleX > 0) {
      paddleX -= 7;
    }

}

I had try to move all the stuff on a class(this will be a edit to add MyclassPaddle). Related functions are:

keyDownHandler();
KeyUpHandler();
drawPaddle();
// the if statement to check movement of paddle.

The problem now is when i try no move the if to an isolated function the 'global' variables isn't updated, so the paddle can't move. I want to move all related variables but i'm not finding the right way.

Instead of having an anonymous function you could put all your code into a namepsace, an object that wraps all the above code. Then you will be able to access the variables using namespace.variable — Craicerjack
– Craicerjack, Commented Dec 5, 2016 at 11:56

darryn.ten · Accepted Answer · 2016-12-05 12:17:22Z

1

You could try making a single object on the window to solve this problem.

window.myThing = (function() {
  return {
    paddleHeight: 200,
    paddleWidth: 100,
    leftPressed: false,
    rightPressed: false,
    paddleX: 0,
    paddleY: 0,
    canvas: null,
    // etc
    init: function(options) {
      // pass in { canvasElement: '.my-canvas-class' }
      this.canvas = document.querySelector(options.canvasElement);
      this.bindEvents(); // can use `this`
    },
    keyDownHandler: function(event) {
      if (event.keyCode === 39) {
        // can't use `this` but can access directly
        window.myThing.rightPressed = true;
      } else if(event.keyCode === 37) {
        window.myThing.leftPressed = true;
      }
    },
    keyUpHandler: function(event) {
      if (event.keyCode === 39) { // notice the `===` instead of `==`
        window.myThing.rightPressed = false;
      } else if(event.keyCode === 37) {
        window.myThing.leftPressed = false;
      }
    },
    // etc
    bindEvents: function() {
      document.addEventListener("keydown", this.keyDownHandler, false);
      document.addEventListener("keyup", this.keyUpHandler, false);
    },
    draw: function() {
      // can use `this`
      if (this.rightPressed && this.paddleX < this.canvas.width - this.paddleWidth) {
        this.paddleX += 7;
      } else if(this.leftPressed && this.paddleX) { // don't need `> 0`
        this.paddleX -= 7;
      }
    }
  }
})();

You can then access everything through the new window.myThing object and you should be good to go.

Code is untested, just wrote it blindly so it's probably wrong in some ways, it's meant to just be an example, not something you can copy-paste.

answered Dec 5, 2016 at 12:17

darryn.ten

6,9933 gold badges50 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Alnitak Over a year ago

Alnitak's 5th law of JS - "No object should ever refer to itself by the name of any variables to which it is bound"

darryn.ten Over a year ago

100%, the context inside the event handlers is a little tricky. Fat arrows make this a non-issue but in this instance... What do you suggest?

Hell0 Over a year ago

Thank you for your quick response. i'm testing and making it to work with other stuff. I must read it in detail, thanks again...

Hell0 Over a year ago

@darryn.ten i tryed your sugestion but i can't make it to run. Here is a kopy.io link kopy.io/jznY1

Collectives™ on Stack Overflow

Javascript Refactoring code

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related