Program Penghitung Sederhana

Question

Ini adalah program pertama saya di Javascript. Apakah ada kekurangan atau sesuatu yang perlu ditingkatkan? Ini hanya menambah, mengurangi, atau mengatur ulang penghitung baik dengan tombol atau tombol panah.

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

Saran pertama saya adalah memformat ulang kode Anda dengan linter. Saya tidak akan membahas ini lebih detail karena saya berasumsi Anda sebagian besar setelah saran implementasi, tetapi karena ini cukup menggelikan untuk dibaca, mirip dengan teks yang ditulis dalam bahasa Anda sendiri tetapi dengan kapitalisasi dan tanda baca asing.

Beberapa fungsi Anda dapat menggunakan penghancuran untuk membuat tubuh mereka lebih kaku.

Misalnya, ini:

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

Bisa ditulis ulang seperti ini, karena Anda hanya menggunakan codeproperti dari argumen:

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

Saran yang lebih kontroversial mungkin menulis ini di bagian atas skrip Anda:

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

Ini memungkinkan Anda untuk mengganti ini:

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

Dengan sesuatu yang tidak terlalu bertele-tele:

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

Answer 2

Anda harus menggunakan titik koma di akhir baris.

Tidak perlu ada acara keyup pada tombol, dokumen akan menangkap acara tersebut. Anda juga hanya memerlukan satu event listener di dokumen.

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

Fungsi Anda untuk meningkatkan, menghilangkan, dan mengatur ulang cukup mirip sehingga bisa digabungkan, jadi Anda tidak perlu mengulangi kode yang sama. Dengan cara ini Anda juga memiliki cara mengatur nomor ke nilai apa pun atau mengubahnya dengan jumlah berapa pun jika Anda membutuhkannya nanti.

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

Anda dapat menyetel event listener dengan argumen yang telah ditetapkan sebelumnya dengan bind . Argumen pertama adalah mengatur thiskata kunci, yang tidak kita gunakan, jadi kita bisa mengaturnya ke null.

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

Meskipun menyimpan elemen ke variabel saat direferensikan beberapa kali adalah praktik yang baik, tidak perlu jika hanya digunakan sekali.

Terakhir, getNumberbukan nama deskriptif yang bagus.

Kode terakhir.

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

Mungkin Anda bisa memetakan setiap kode kunci dengan sebuah fungsi dan menghindari untuk memeriksa keyCode beberapa kali

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

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

Answer 4

Jangan gunakan template strings ( `number`) jika Anda tidak benar-benar menggunakan template. Gunakan tanda kutip tunggal atau ganda biasa: 'number'atau "number".