Программа простого счетчика
Это моя первая программа на Javascript. Есть ли какие-то недостатки или что-то, что нужно улучшить? Он просто увеличивает, уменьшает или сбрасывает счетчик кнопками или клавишами со стрелками.
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)
Ответы
Мой первый совет - переформатировать код с помощью линтера. Я не буду вдаваться в подробности, потому что полагаю, что вы в основном следите за советом по реализации, но, поскольку он довольно неприятен для чтения, он похож на текст, написанный на вашем родном языке, но с иностранными заглавными буквами и пунктуацией.
Некоторые из ваших функций могут использовать деструктуризацию, чтобы сделать их тела более сжатыми.
Например, это:
document.addEventListener(`keyup`, function (e) {
if (e.code === `ArrowRight` || e.code === `ArrowLeft`) {
resetFunc()
}
})
Можно переписать так, поскольку вы используете только codeсвойство аргумента:
document.addEventListener(`keyup`, function ({ code }) {
if (code === `ArrowRight` || code === `ArrowLeft`) {
resetFunc()
}
})
Более спорным советом может быть напишите это в верхней части вашего скрипта:
const $ = document.querySelector.bind(document);
Это позволяет заменить это:
const getNumber = document.getElementById(`number`)
const incrButton = document.getElementById(`incr`)
const decrButton = document.getElementById(`decr`)
const resetButton = document.getElementById(`reset`)
Что-то гораздо менее подробное:
const getNumber = $(`#number`)
const incrButton = $(`#incr`) const decrButton = $(`#decr`)
const resetButton = $(`#reset`)
Вы должны использовать точку с запятой в конце строк.
Нет необходимости иметь событие keyup на кнопках, документ перехватит это событие. Вам также нужен только один прослушиватель событий в документе.
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();
}
})
Ваши функции для увеличения, уменьшения и сброса достаточно похожи, чтобы их можно было комбинировать, поэтому вам не нужно повторять один и тот же код. Таким образом, у вас также есть возможность установить любое значение числа или изменить его на любое значение, если оно вам понадобится позже.
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);
}
Вы можете установить слушателей событий с предварительно заданными аргументами с помощью bind . Первый аргумент - установить thisключевое слово, которое мы не используем, поэтому мы можем просто установить его null.
incr.addEventListener(`click`, changeNumber.bind(null, 1));
reset.addEventListener(`click`, setNumber.bind(null, 0));
decr.addEventListener(`click`, changeNumber.bind(null, -1));
Хотя сохранение элемента в переменной при многократной ссылке на него является хорошей практикой, в этом нет необходимости, если он используется только один раз.
И наконец, имя getNumberне подходит для описания.
Окончательный код.
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>Возможно, вы могли бы сопоставить каждый ключевой код с функцией и не проверять keyCode несколько раз
const map = {
'ArrowUp': incrFunc,
'ArrowRight': resetFunc,
'ArrowLeft': resetFunc,
'ArrowDown': decrFunc,
}
document.addEventListener(`keyup`, function (e) {
if(map[e.code]) {
map[e.code]();
}
})Не используйте template strings ( `number`), если вы фактически не используете шаблоны. Используйте обычные одинарные или двойные кавычки: 'number'или "number".