Il suffit de deux questions simples,
q (1) Le code ci-dessous a plusieurs instructions si l'instruction que je veux savoir s'il existe un moyen de simplifier cela en utilisant une matrice ou autre chose. p>
q (2) est là un moyen de modifier plus rapidement BGIMG.SRC, car il faut un peu plus longtemps pour changer le SRC. P>
const bgImg = document.querySelector('#element-body img');
let icon = "";
if(weatherName.includes("rain")){
icon = "./images/rain.jpg";
}
else if(weatherName.includes("clouds")){
icon = "./images/clouds.jpg";
}
else if(weatherName.includes("snow")){
icon = "./images/snow.jpg";
}
else if(weatherName === "mist"){
icon = "./images/mist.jpg";
}
else if(weatherName === "clear sky"){
icon = "./images/clear-sky.jpg";
}
else if(weatherName === "smoke"){
icon = "./images/smoke.jpg";
}
else if(weatherName === "dust"){
icon = "./images/dust.jpg";
}
else if(weatherName === "drizzle"){
icon = "./images/rain.jpg";
}
else if(weatherName === "haze"){
icon = "./images/haze.jpg";
}
else if(weatherName === "fog"){
icon = "./images/foggy.jpg";
}
else if(weatherName === "thunderstorm"){
icon = "./images/thunderstorm.jpg";
}
else{
icon = "./images/pexels-photo-39811.jpg";
}
}
bgImg.src = icon;
}
4 Réponses :
Utiliser des tableaux séparés par la méthode dont vous avez besoin pour comparer la chaîne et la boucle via les listes d'icônes. Si vous devez modifier les listes, vous pouvez simplement le faire dans les tableaux.
const bgImg = document.querySelector('#element-body img');
const iconListInclude = [
'rain',
'clouds',
'snow',
]
const iconListEqual = [
'mist',
'clear sky',
'smoke',
'dust',
'drizzle',
'haze',
'fog',
'thunderstorm',
]
let icon = "./images/pexels-photo-39811.jpg"
iconListInclude.forEach(i => {
if (weatherName.includes(i)) icon = "./images/"+i+".jpg"
})
iconListEqual.forEach(i => {
if (weatherName === i) icon = "./images/"+i+".jpg"
})
bgImg.src = icon
Remarque: cela ne sera en aucun cas «plus rapide» que ce que l'OP a déjà
Cela correspondrait à fumez quelque chose mais la condition dans le code donné est weathername === "fumée" il doit donc être une correspondance exacte.
@ T.Niese Ici, je l'ai édité pour vérifier correctement les conditions et donner le résultat correct.
Je pense que c'est une solution plus complexe et certainement pas plus rapide
Vous pouvez prendre des matrices de remorquage pour la vérification de la chaîne de pièce avec inclut et pour une vérification exacte et renvoyer une trouvaille avec des espaces remplacés.
p>
const getIcon = weather => {
var includes = ['rain', 'clouds'],
exact = ['snow', 'mist', 'clear sky', 'smoke', 'dust', 'drizzle', 'haze', 'fog', 'thunderstorm'],
type = includes.find(w => weather.includes(w)) ||
exact.includes(weather) && weather ||
'pexels-photo-39811';
return `./images/${type.replace(/\s/g, '-')}.jpg`;
};
console.log(getIcon('some rain'));
console.log(getIcon('clear sky'));
console.log(getIcon('foo'));Vous pouvez utiliser un tableau associatif et itérale à travers les clés pour trouver un match. Trier les touches dans l'ordre de la fréquence du modèle météo peut accélérer mais pas de manière significative.
Cet extrait remplace les espaces dans p> Weathername code> avec code> et modifie la chaîne à minuscule juste pour être sûr. p>
<div id="element-body">
<img id="weather-icon" src="" title="Local weather" />
</div>
Les détails sont commentés sur toutes les lignes de la démo.
Démo strong> p> p>
<main class='bkg'></main>
Ne posez pas deux questions différentes en une. Et écrit
J'ai déjà posé cette question avant que le code répondu ne fonctionne pas avec moi sans mentionner quelle question c'était une bonne idée, n'est-ce pas une bonne idée, pourquoi devrais-je prendre le temps de répondre à cette question si je n'ai pas 't sais quelles ont été les autres réponses.Cela ne semble pas que compliqué. Pourquoi pensez-vous qu'il a besoin de simplifier? Cela semble assez "simple" tel qu'il est. Qu'est-ce qui vous fait penser que ce bloc de code est "inefficace"? Cela va prendre une minuscule fraction minuscule d'une seconde pour calculer avec pratiquement aucun processeur. Il n'est vraiment pas clair pourquoi vous êtes donc contre ce morceau de code?
@Liam je ne suis pas contre ce code je veux juste savoir s'il y a une meilleure façon de faire la même opération avec moins de code
@ t.nyse merci pour le conseil
Probablement pas. Citer Donald Kuth "Les programmeurs gaspillent énormes quantité de temps à réfléchir ou à se préoccuper de la rapidité des parties non critiques de leurs programmes, et ces tentatives d'efficacité ont effectivement un impact négatif fort lors du débogage et de la maintenance. Nous devrions Oubliez les petites gains d'efficacité, disons environ 97% du temps: l'optimisation prématurée est la racine de tout mal. Pourtant, nous ne devrions pas transmettre nos opportunités dans ce critique 3%. " Arrête de perdre du temps sur une partie non critique de votre système
@Liam Le problème n'est pas une vitesse d'exécution, le problème est du code dupliqué.
@Bergi op demande
existe-t-il un moyen de changer de bgimg.src plus rapidement@Liam ah, j'ai ignoré la deuxième question ...
@ Liam La raison pour laquelle j'ai demandé comment charger BGIMG plus rapidement est que lorsque API fait une nouvelle demande, l'image ne se charge pas plus vite, il faut 1 ou 2 secondes pour changer l'image SRC et je pense que ce n'est pas une bonne performance qui est pourquoi je demande pourquoi .
Ce n'est rien à voir avec ce code. C'est combien de temps l'image prend pour être téléchargée