Partage

Possible de réduire ce petit script?

3 janvier 2018 à 20:26:33

Bonjour, je souhaiterais connaître si c'est possible de factoriser ce script? Merci d'avance. Smiley smile

(function() {
	var 	dropDowm = document.querySelector('#dropdown'),
		dropDownLink = document.querySelector('#dropdownLink'),
		burgerIcon = document.querySelector('#burger-icon'),
		navBar = document.querySelector('#navbar');

	dropDowm.addEventListener('click', function() {
		dropDowm.classList.toggle('active');
		dropDownLink.classList.toggle('active');
	});
	burgerIcon.addEventListener('click', function() {
		burgerIcon.classList.toggle('active');
		navBar.classList.toggle('active');
		dropDownLink.classList.toggle('active', false);
	});
	document.body.addEventListener('click', function() {
		dropDowm.classList.toggle('active', false);
		dropDownLink.classList.toggle('active', false);
		burgerIcon.classList.toggle('active', false);
		navBar.classList.toggle('active', false);
	});
})();


4 janvier 2018 à 9:41:57

Possiblement.

[Convertir une table en UTF8, mysql](https://gist.github.com/julp/4726120)
4 janvier 2018 à 13:32:19

Artemix a écrit:

Possiblement.


Toujours aussi pragmatique Artemix :ange:

Sinon pour une réponse utile:

Oui tu peux améliorer ton code par exemple en respectant un peu plus le dogma: DRY Dont Repeat Yourself

* On peut observer plusieurs répétitions de "active" le problème c'est que si tu veux renommer active en enabled pour une raison qui nous échappe aujourd'hui mais qui aura peut-être tout son sens dans 1 mois tu va devoir intervenir à plusieurs endroits de ton code. Une constante serait bienvenue

* ensuite on observe également que tu ajoute 3 listeners sur l'évènement click. Une méthode addClickListener(domElement, callback) pourrait centraliser cette logique en un seul point central par exemple.

* encore un élément que j'ai pu observé mais j'ai lu en vitesse: tu toggles la class active sur plusieurs éléments depuis plusieurs listeners. Pourquoi ne pas centraliser cette logique pour tous les éléments ?

je pense à ceci :

link.addListener('click', toggle())
navbar.addListener('click', toggle())

toggle(){

 // toggle et la navbar et le lien mais ca dépend de tes besoins comme dit plus haut :)
}

Voilà j'espère avoir pu t'aider un peu

Besoin d'aide ? Rejoins une équipe de dev pro et amateurs qui te répondra rapidement sur slack : http://slackin.tavernedudev.fr/
4 janvier 2018 à 13:42:07

Hello,

merci pour ta réponse. Est-ce que tu pourras me montrer en exemple s'il te plaît, je n'y arrive pas avec ce que tu m'as dit.

-
Edité par Hergé-btb 4 janvier 2018 à 14:31:38

Possible de réduire ce petit script?

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown