Plus de J(ean)Query sur nos projets ?

par Pilulu



ça dépend (ça dépasse)

Plus de jQuery D11 ?

  • Rien de précis à ce sujet
  • Volonté de limiter sa dépendence
  • $.once() => once()

Comparaisons

Source velog.io
Fonctionnalité JavaScript pur jQuery
Performance Généralement plus rapide en raison des API natives optimisées Plus lent en raison de l'abstraction et de la simplification
Taille du fichier et temps de chargement Aucune bibliothèque supplémentaire requise, ce qui réduit la taille Nécessite une bibliothèque supplémentaire, augmentant la taille
Compatibilité des navigateurs Amélioration de la prise en charge dans les navigateurs modernes ; Nécessite d'utiliser un détection des fonctions et des polyfills en cas de besoin Développée à l'origine pour la compatibilité multi-navigateurs ; toujours utile pour les anciens navigateurs
Syntaxe Syntaxe JavaScript native Syntaxe simplifiée fournie par jQuery
Courbe d'apprentissage Une compréhension solide est requise ; de nombreuses ressources sont disponibles Plus facile à apprendre, documentation extensive
Support communautaire Communauté croissante, nombreux tutoriels et ressources Communauté importante, ressources bien établies

Once

            
              $(once(identifiant, selecteur, contexte)).each(
                () => console.log(this)
              );
            
          
            
              once(identifiant, selecteur, contexte).forEach(
                (element) => console.log(element)
              );

Accès aux éléments enfants

            
              $(element).find('label');
            
          
            
              $(element).querySelectorAll('label');

Accès aux éléments parents

            
              $(element).parent('label');
            
          
            
              element.closest('label');

Accès aux data attributes

            
              $(element).data('toto');
            
          
            
              element.dataset.toto;

Accès au formulaire parent

            
              $(mon_input).parent('form');
            
          
            
              mon_input.form

Selecteurs

              
                $('label[data-attribute]').each(
                  () => console.log(this)
                );
              
            
              
                document.querySelectorAll('label[data-attribute]').forEach(
                  (element) => console.log(element)
                );

Et pour quelques milliers de dollars de plus ?

Si c'est trop long 
            
              $ = function (sel){
                return document.querySelectorAll(sel);
              }

Plus d'exemples

https://youmightnotneedjquery.com/

Retour d'experience sur Apprentis d'Auteuil

  • Volonté d'appliquer la couleur au clic sur la page suivante
  • Les couleurs de fond dépendent de la position de l'élément dans la liste
  • Rendre visible le moins poissible un changement de couleur
  • Charger le script avant jQuery et le core autres libraries
  • Code entièrement en vanilla

Conclusion

JQuery reste utile, mais ne doit pas être un reflexe pour les choses les plus simples.
Moins il y a de dépendence plus vous assurez une maintenabilité.