Как избавиться от глобальной переменной?

Question

[zlodiak]

Написал небольшой скриптик, в котором по canvas при помощи кнопок курсора движется квадрат. Демо здесь

Проблема в том, что я использую глобальные переменные. У меня их два вида:

1. константы
2. изменяющаяся во время работы скрипта глобальная переменная

Первый вид не представляет из себя ничего страшного. Эти переменные можно вынести в конфиг. И это будет правильно и хорошо.
Но второй вид это нехорошая глобальная переменная, которая в будущем может нарушить работу скрипта в целом. Я хотел бы сделать её не глобальной.

Как видите, она нужна для того чтобы движущийся квадрат перед каждым перемещением стирался. Для этого используются переменные xCoordOld и yCoordOld, в которых хранятся координаты квадрата, существовавшие до очередного нажатия пользователем на клавишу курсора. На основе них рисуется бесцветный квадрат. Таким образом квадрат, перемещаясь, не оставляет следа.

Помогите пожалуйста избавиться от:

let xCoordOld;
let yCoordOld;

Answer 1

[Александр Таратин]

https://jsfiddle.net/b6sruud6/3/

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

document.body.appendChild(canvas);
canvas.width = 500;
canvas.height = 500;

class Square{
	constructor(color, position, size, speed){
  	this.color = color;
    this.x = position.x;
    this.y = position.y;
    this.speed = speed || {x:0,y:0};
    this.width = size.width;
    this.height = size.height    
  }
  render(ctx){
  	this.x += this.speed.x;
    this.y += this.speed.y;
    ctx.fillStyle = this.color;
    ctx.fillRect(this.x, this.y, this.width, this.height);
  }
}

const player = new Square('#f00', {x:100,y:100}, {width:16, height:16});


const deltaCoord = 5;
const canvasColor = '#fff';

Rx.Observable
	.fromEvent(document, 'keydown')
	.map(
		e => {
    	const s = {x:0,y:0}
			if (e.keyCode == 37) s.x -= deltaCoord;
			if (e.keyCode == 38) s.y -= deltaCoord;
			if (e.keyCode == 39) s.x += deltaCoord;
			if (e.keyCode == 40) s.y += deltaCoord; 
      console.log(s)
			return s;
		}
	)  
  .startWith({x:0,y:0})
  .subscribe(render);

function render(direction) {
	ctx.fillStyle = canvasColor;
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  player.speed = direction;
  player.render(ctx);
}

Comments

[Денис]

.keyCode - deprecated. Используйте свойство .which. Тем более, что в полный рост пишите синтаксисом ES6.

[zlodiak]

Александр Таратин
Скажите пожалуйста, а передача ctx в render() имеет важное значение? Или от неё можно отказаться?

[Александр Таратин]

zlodiak, Я бы сказал важное. Таким образом мы можем вынести класс Square в отдельный файл и не зависить от глобальной переменной ctx и при желании имеем возможность единственный экземпляр player рендерить в разные ctx (например хотим сделать уменьшенную миникарту)

Answer 2

[profesor08]

Ну так изолируй. Либо используй модули.

(function() {
 // your code there
})();

Comments

[Павел Корнилов]

Скорее, это нужно называть замыканием.