Basit Sayaç Programı

Question

Javascript'teki ilk programım. Herhangi bir eksiklik veya iyileştirilmesi gereken bir şey var mı? Sayacı düğmelerle veya ok tuşlarıyla basitçe artırır, azaltır veya sıfırlar.

HTML,

<h1 id="number"></h1>
<button class="btn" id="incr">Increase</button>
<button class="btn" id="reset">Reset</button>
<button class="btn" id="decr">Decrease</button>

JS,

let number = 0

const getNumber = document.getElementById(`number`)
const incrButton = document.getElementById(`incr`)
const decrButton = document.getElementById(`decr`)
const resetButton = document.getElementById(`reset`)

getNumber.textContent = number

const incrFunc = function () {
  ++number
  getNumber.textContent = number
  if (number > 0) {
    getNumber.style.color = `green`
  }
}

const resetFunc = function () {
  number = 0
  getNumber.textContent = number
  getNumber.style.color = `gray`
}

const decrFunc = function () {
  --number
  getNumber.textContent = number
  if (number < 0) {
    getNumber.style.color = `red`
  }
}

incrButton.addEventListener(`keyup`, function (e) {
  e.stopPropagation()
  //console.log(e.target === document.body)
  if (e.code === `ArrowUp`) {
    incrFunc()
  }
})

document.addEventListener(`keyup`, function (e) {
  //console.log(e.target === document.body)
  if (e.code === `ArrowUp`) {
    incrFunc()
  }
})

document.addEventListener(`keyup`, function (e) {
  if (e.code === `ArrowRight` || e.code === `ArrowLeft`) {
    resetFunc()
  }
})

resetButton.addEventListener(`keyup`, function (e) {
  if (e.code === `ArrowRight` || e.code === `ArrowLeft`) {
    resetFunc()
  }
})

document.addEventListener(`keyup`, function (e) {
  if (e.code === `ArrowDown`) {
    decrFunc()
  }
})

decr.addEventListener(`keyup`, function (e) {
  if (e.code === `ArrowDown`) {
    decrFunc()
  }
})

incrButton.addEventListener(`click`, incrFunc)

resetButton.addEventListener(`click`, resetFunc)

decrButton.addEventListener(`click`, decrFunc)

Answer 1

İlk tavsiyem, kodunuzu bir linter ile yeniden biçimlendirmeniz olacaktır. Buna daha ayrıntılı olarak girmeyeceğim çünkü çoğunlukla uygulama tavsiyesinin peşinde olduğunuzu varsayıyorum, ancak kendi dilinizde yazılmış metne benzer şekilde, ancak yabancı büyük harf ve noktalama işaretleriyle okumak oldukça zordur.

Bazı işlevleriniz, vücutlarını daha özlü hale getirmek için yıkımı kullanabilir.

Örneğin, bu:

document.addEventListener(`keyup`, function (e) {
  if (e.code === `ArrowRight` || e.code === `ArrowLeft`) {
    resetFunc()
  }
})

Yalnızca codeargümanın özelliğini kullandığınız için bu şekilde yeniden yazılabilir :

document.addEventListener(`keyup`, function ({ code }) {
  if (code === `ArrowRight` || code === `ArrowLeft`) {
    resetFunc()
  }
})

Daha tartışmalı bir tavsiye, bunu senaryonuzun en üstüne yazmak olabilir:

const $ = document.querySelector.bind(document);

Bu, bunu değiştirmenize izin verir:

const getNumber = document.getElementById(`number`)
const incrButton = document.getElementById(`incr`)
const decrButton = document.getElementById(`decr`)
const resetButton = document.getElementById(`reset`)

Çok daha az ayrıntılı bir şeyle:

const getNumber = $(`#number`)
const incrButton = $(`#incr`) const decrButton = $(`#decr`)
const resetButton = $(`#reset`)

Answer 2

Satırın sonunda noktalı virgül kullanmalısınız.

Düğmelerde keyup olayı olmasına gerek yoktur, belge olayı yakalayacaktır. Ayrıca, belgede yalnızca tek bir olay dinleyicisine ihtiyacınız vardır.

document.addEventListener(`keyup`, function (e) {
  if (e.code === `ArrowUp`) {
    incrFunc();
  }
  else if (e.code === `ArrowDown`) {
    decrFunc();
  }
  else if (e.code === `ArrowRight` || e.code === `ArrowLeft`) {
    resetFunc();
  }
})

Artırma, azaltma ve sıfırlama işlevleriniz, birleştirilebilecekleri kadar benzerdir, böylece aynı kodu tekrarlamanız gerekmez. Bu şekilde, numarayı herhangi bir değere ayarlamanın veya daha sonra ihtiyacınız olursa herhangi bir miktarda değiştirmenin bir yolunu da elde edebilirsiniz.

function setNumber(value) {
  number = value;
  getNumber.textContent = number
  if (number < 0) {
    getNumber.style.color = `red`
  }
  else if (number > 0) {
    getNumber.style.color = `green`
  }
  else {
    getNumber.style.color = `gray`
  }
}

function changeNumber(change) {
    setNumber(number + change);
}

Olay dinleyicilerini bind ile önceden ayarlanmış bağımsız değişkenlerle ayarlayabilirsiniz . İlk argüman, kullanmadığımız thisanahtar kelimeyi ayarlamaktır , böylece onu sadece olarak ayarlayabiliriz null.

incr.addEventListener(`click`, changeNumber.bind(null, 1));
reset.addEventListener(`click`, setNumber.bind(null, 0));
decr.addEventListener(`click`, changeNumber.bind(null, -1));

Bir öğeyi birden çok kez referans aldığında bir değişkene kaydetmek iyi bir uygulama olsa da, yalnızca bir kez kullanıldığında buna gerek yoktur.

Son olarak, getNumberiyi bir tanımlayıcı isim değildir.

Nihai kod.

const numberDisplay = document.getElementById(`number`);
let number = 0;
setNumber(number);

function setNumber(value) {
    number = value;
    numberDisplay.textContent = number;
    if (number < 0) {
      numberDisplay.style.color = `red`;
    }
    else if (number > 0) {
      numberDisplay.style.color = `green`;
    }
    else {
      numberDisplay.style.color = `gray`;
    }
}

function changeNumber(change) {
    setNumber(number + change);
}

document.addEventListener(`keyup`, function (e) {
  if (e.code === `ArrowUp`) {
    changeNumber(1);
  }
  else if (e.code === `ArrowDown`) {
    changeNumber(-1);
  }
  else if (e.code === `ArrowRight` || e.code === `ArrowLeft`) {
    setNumber(0);
  }
})

document.getElementById(`incr`).addEventListener(`click`, changeNumber.bind(null, 1));
document.getElementById(`reset`).addEventListener(`click`, setNumber.bind(null, 0));
document.getElementById(`decr`).addEventListener(`click`, changeNumber.bind(null, -1));

<h1 id="number"></h1>
<button class="btn" id="incr">Increase</button>
<button class="btn" id="reset">Reset</button>
<button class="btn" id="decr">Decrease</button>

Answer 3

Belki her anahtar kodunu bir işlevle eşleyebilir ve keyCode'u birden çok kez kontrol etmekten kaçınabilirsiniz.

const map = {
  'ArrowUp': incrFunc,
  'ArrowRight': resetFunc,
  'ArrowLeft': resetFunc,
  'ArrowDown': decrFunc,
}

document.addEventListener(`keyup`, function (e) {
  if(map[e.code]) {
    map[e.code]();
  }
})

Answer 4

`number`Aslında şablon kullanmıyorsanız şablon dizelerini ( ) kullanmayın. Normal tek veya çift tırnak kullanın: 'number'veya "number".