Méthodes d'effet Vanilla JS

Dans le passé, j'ai beaucoup travaillé avec jQuery et ce que j'aime chez jQuery, c'est qu'il fournit de nombreuses méthodes utiles avec une syntaxe simple et légère. L'une des méthodes jQuery les plus utilisées est la méthode des effets, qui est utilisée pour créer des effets d'animation pour un site Web.

Par exemple :

• masquer() / afficher()
• basculer()
• fonduIn()
• fadeOut()
• ...

W3schools a répertorié ici toutes les méthodes d'effet JQuery

Mais maintenant, avec la croissance de tonnes de bibliothèques JS, jQuery semble être obsolète, et dans certains projets, les développeurs doivent remplacer le code jQuery par du JS pur.

Il est facile de créer la fonction de la même manière que hide() / show(), il suffit de modifier le style d'affichage

element.style.display = 'block' // or none

mais avec des effets plus complexes comme fadeIn()/fadeOut(), nous devons écrire plus de code.

Un autre problème avec la méthode d'effet d'écriture dans Vanilla JS est la syntaxe verbeuse. Vous pouvez le voir avec la méthode jQuery :

$(".myClass").slideDown();

C'est très lisible et intuitif, vous trouvez l'élément avec le sélecteur jQuery, puis appelez la méthode slideDown comme méthode de l'élément.
Le code implémente la même fonctionnalité dans Vanilla JS si vous définissez la méthode slideToggle avant :

const element = document.querySelector(".myClass");
slideToggle(element);

Vous interrogez l'élément puis le transmettez à la fonction slideToggle(), il semble moins natif et moins lisible que l'exemple avec jQuery.

L'astuce ici est d'utiliser HTMLElement.prototype pour ajouter une méthode à l'élément HTML et vous pouvez utiliser la fonction d'effet comme méthode de l'élément HTML. Pour plus de simplicité, définissons la méthode hide() :

HTMLElement.prototype.hide = function() {
  this.style.display = 'none'
}

document.querySelector(".myClass").hide()

À des fins de réutilisation, j'ai créé ici quelques méthodes Vanilla JS pour les effets. Placez-le simplement quelque part dans votre base de code et utilisez-le comme méthode native de l'élément HTML.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!