Programme de compteur simple
C'est mon premier programme en Javascript. Y a-t-il un manque ou une chose à améliorer? Il augmente, diminue ou réinitialise simplement le compteur à l'aide de boutons ou de touches fléchées.
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)
Réponses
Mon premier conseil serait de reformater votre code avec un linter. Je n'entrerai pas dans cela plus en détail car je suppose que vous recherchez principalement des conseils d'implémentation, mais comme c'est assez discordant à lire, similaire à un texte écrit dans votre propre langue mais avec des majuscules et des ponctuations étrangères.
Certaines de vos fonctions pourraient utiliser la déstructuration pour rendre leur corps plus laconique.
Par exemple, ceci:
document.addEventListener(`keyup`, function (e) {
if (e.code === `ArrowRight` || e.code === `ArrowLeft`) {
resetFunc()
}
})
Pourrait être réécrit comme ceci, puisque vous n'utilisez que la codepropriété de l'argument:
document.addEventListener(`keyup`, function ({ code }) {
if (code === `ArrowRight` || code === `ArrowLeft`) {
resetFunc()
}
})
Un conseil plus controversé pourrait être d'écrire ceci en haut de votre script:
const $ = document.querySelector.bind(document);
Cela vous permet de remplacer ceci:
const getNumber = document.getElementById(`number`)
const incrButton = document.getElementById(`incr`)
const decrButton = document.getElementById(`decr`)
const resetButton = document.getElementById(`reset`)
Avec quelque chose de beaucoup moins verbeux:
const getNumber = $(`#number`)
const incrButton = $(`#incr`) const decrButton = $(`#decr`)
const resetButton = $(`#reset`)
Vous devriez utiliser un point-virgule à la fin des lignes.
Il n'est pas nécessaire d'avoir un événement keyup sur les boutons, le document capturera l'événement. Vous n'avez également besoin que d'un seul écouteur d'événements sur le document.
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();
}
})
Vos fonctions d'augmentation, de diminution et de réinitialisation sont suffisamment similaires pour pouvoir être combinées, vous n'avez donc pas à répéter le même code. De cette façon, vous avez également un moyen de définir le nombre sur n'importe quelle valeur ou de le modifier de n'importe quel montant si vous en avez besoin plus tard.
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);
}
Vous pouvez définir les écouteurs d'événements avec des arguments prédéfinis avec bind . Le premier argument est de définir le thismot - clé, que nous n'utilisons pas, donc nous pouvons simplement le définir sur null.
incr.addEventListener(`click`, changeNumber.bind(null, 1));
reset.addEventListener(`click`, setNumber.bind(null, 0));
decr.addEventListener(`click`, changeNumber.bind(null, -1));
Bien que l'enregistrement d'un élément dans une variable lorsqu'il est référencé plusieurs fois est une bonne pratique, il n'est pas nécessaire de le faire lorsqu'il n'est utilisé qu'une seule fois.
Enfin, ce getNumbern'est pas un bon nom descriptif.
Le code final.
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>Peut-être que vous pourriez mapper chaque code clé avec une fonction et éviter de vérifier le keyCode plusieurs fois
const map = {
'ArrowUp': incrFunc,
'ArrowRight': resetFunc,
'ArrowLeft': resetFunc,
'ArrowDown': decrFunc,
}
document.addEventListener(`keyup`, function (e) {
if(map[e.code]) {
map[e.code]();
}
})N'utilisez pas de chaînes de modèles ( `number`) si vous n'utilisez pas réellement de modèles. Utilisez des guillemets simples ou doubles normaux: 'number'ou "number".