Bonjour à tous,
Je suis pas expert mais je compte bien m'améliorer.J'ai une petite question à mon avis simplissime à répondre sauf que je n'y arrive pas.
Je voudrais réduire la taille, donc simplifier ce jquery qui fonctionne mais me sembe bien basique :

$(document).ready(function(){
	$('.chateauroux').click(function(){
		$('.map-chateauroux').toggleClass('active')
		$('.map-aigurande').removeClass('active')
		$('.map-clion').removeClass('active')
	})
});

Merci de votre aide !

Salut !

La seule chose que tu pourrais "simplifier" à mon avis, c'est d'avoir $('.map-augurande, .map-clion').removeClass('active'); au lieu des deux lignes.

Ah ouais c'est déjà pas mal ! Merci Ymox
Je sais jamais non plus "où" et "si" il faut placer des "," ou des ";" après les lignes 3, 4, 5 !

-
Edité par krisken 6 février 2019 à 14:51:46

Sans devoir entrer dans un cours théorique, il faut des ; à la fin des lignes 3 et 4, et c'est optionnel à la fin des lignes 5 et 6.

J'ai l'essentiel de ma réponse ! MERCI !!!

Salut,

Ymox a écrit:

Sans devoir entrer dans un cours théorique, il faut des ; à la fin des lignes 3 et 4, et c'est optionnel à la fin des lignes 5 et 6.

Non, ce n'est nécessaire sur aucune ligne.

Sinon, le code est déjà réduit à une expression très simple, tu peux gagner quelques caractères comme suit, mais ça n'optimise pas spécialement (à part l'utilisation de la méthode "on()" qui est un peu mieux que click()).

$(function(){
    $('.chateauroux').on('click', () => {
        $('.map-chateauroux').toggleClass('active')
        $('.map-aigurande, .map-clion').removeClass('active')
    })
})

Pour optimiser un peu le code, il faudrait plutôt se passer de jQuery, qui ne sert pas à grand chose ici, et ajouter quelques vérifications pour que ce soit plus safe. Mais ce n'est pas forcément nécessaire de t'embêter avec ça. Ton code n'est pas lourd.

-
Edité par EmmanuelBeziat 6 février 2019 à 15:33:14

$(function(){
    $('.chateauroux').on('click', () => {
        $('.map-chateauroux').toggleClass('active')
        $('.map-aigurande, .map-clion').removeClass('active')
    })
})

Mais pour qu'il utilise une fonction fléchée il faut qu'il utilise un transpiler sinon le navigateur ne saura pas le lire non ?

-
Edité par withPleasure 6 février 2019 à 16:48:03

Non, pas de souci avec ça ; sauf si le site doit absolument être compatible avec de vieux navigateurs, ce qui n'est que rarement le cas.

Bonjour,

Je pose ça là. Ca pourrait vous intéresser

https://jeremymouzin.com/blog/les-points-virgules-en-javascript-le-guide-definitif/

Très bon, merci Thomas D! C'est vraiment dommage qu'il n'y ait pas davantage d'articles sur ce blog...

-
Edité par EmmanuelBeziat 7 février 2019 à 12:49:21

rhooManu a écrit:

Non, pas de souci avec ça ; sauf si le site doit absolument être compatible avec de vieux navigateurs, ce qui n'est que rarement le cas.

Je pense qu'il est préférable d'utiliser un transpiler comme il indique sur ce http://www.mariadcampbell.com/2018/07/11/implementing-es6-modules-without-webpack-or-babel/
Histoire d'étre tranquille et d'étre sur que tout fonctionne

-
Edité par withPleasure 7 février 2019 à 15:14:09

Oui mais ton exemple c'est pour les modules, c'est un cas spécifique car son support est encore faible nativement.

Pas de rapport avec l'utilisation des fonctions fléchées, ou d'autres nouvelles fonctionnalités qui sont, elles, très bien supportées

Bien : merci de tous ces conseils.
Le ";" c'est une règle école semble-t*il !
Allons y comme ça !

Ouais non, le transpileur pour () => c'est overkill. L'unique raison pour laquelle j'utiliserais un transpileur à l'heure actuelle, c'est s'il faut absolument supporter IE ou qu'on cherche à utiliser une feature très récente et mal supportée. Les arrow methods sont dans ES6, qui est considéré comme standard en production depuis un moment déjà.

Ah et oui on peut totalement se passer de JQuery ici pour à peu près le même nombre de lignes, histoire de pas défoncer la performance d'un code au comportement aussi simple. 

-
Edité par Genroa 18 février 2019 à 10:36:11

La perf et le poids de la page aussi xd