Javascript重構代碼

Question

我有一個工作代碼，將所有內容包裝在匿名函數中，以避免污染全局名稱空間。 但是它仍然包含太多全局變量，因此，我正在嘗試以某種方式對其進行清理。 現在是：

(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
  }


})();

在draw()函數“ Main”中，我有一個條件語句來檢查槳的相對運動：

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

}

我曾嘗試將所有內容移到一個class （這是添加MyclassPaddle的編輯）。 相關功能有：

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

現在的問題是，當我嘗試不將if移至隔離的函數時，“全局”變量不會更新，因此槳無法移動。 我想移動所有相關的變量，但是找不到正確的方法。

Answer 1

您可以嘗試在窗口上制作單個對象來解決此問題。

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;
      }
    }
  }
})();

然后，您可以通過新的window.myThing對象訪問所有內容，您應該一切順利。

代碼未經測試，只是盲目地編寫，因此在某些方面可能是錯誤的，這只是作為示例，而不是您可以復制粘貼的內容。