Pourquoi utiliser Mini-Js
La philosophie du Framework
Mini-Js a été créé pour permettre l'utilisation de concepts populaires provenant de frameworks tels que React et Angular sur des projets plus anciens. Ce micro-framework peut être facilement intégré à des projets existants en utilisant une simple instruction d'importation, sans interférer avec le code existant.
Mini-Js utilise une approche basée sur les fonctions, permettant aux développeurs de créer des composants réutilisables qui peuvent être facilement intégrés dans des projets existants. Les fonctions de Mini-Js sont conçues pour être simples à comprendre et à utiliser, ce qui facilite la transition pour les développeurs qui ne sont pas familiers avec React ou Angular.
En résumé, Mini-Js est un micro-framework JavaScript qui permet aux développeurs de moderniser des applications existantes en utilisant des concepts populaires de React et Angular. Il est facile à intégrer et offre une gestion simplifiée de l'état, ce qui peut aider à réduire la complexité du code.
Les avantages
- Simplifie la manipulation du DOM d'une page web.
- Permet de créer des interactions utilisateur plus facilement.
- Fournit une méthode pour injecter du HTML dans une page web, ce qui est utile pour créer des widgets et des composants réutilisables.
- Offre un moyen facile de mettre à jour le contenu d'une page web en temps réel.
Démarrer avec Mini-Js
Integrer Mini-Js avec un CDN
Dans votre script, importez Mini-Js de cette façon :
import {Mini} from "https://mini-js.netlify.app/mini-minified.js";let mini = new Mini();
Documentation
Masquer ou afficher dynamiquement un élément du DOM
La méthode toggleHide permet de cacher ou afficher des éléments du DOM en fonction
de l'état d'une variable. Elle prend en entrée un tableau de sélecteurs CSS et une fonction
callback qui doit retourner un booléen.
Ajouter/Retirer une class selon une variable
La méthode toggleClass permet d'ajouter ou de supprimer des classes CSS à des
éléments du DOM en fonction d'une fonction callback
Injecter un composant
La méthode injectComposant vous permet d'injecter des composants dans le DOM.
Lorsqu'une variable est modifiée dans le composant, celui-ci est automatiquement rafraîchi
pour refléter les changements. Cela vous permet de maintenir une interface utilisateur
dynamique et réactive en temps réel.
Gestion des événements
La méthode listenerEvent permet d'ajouter des écouteurs d'événements à des
éléments du DOM en utilisant des sélecteurs CSS. Cette fonction prend trois paramètres : le
type d'événement à écouter, un ou plusieurs sélecteurs CSS, et une fonction de rappel à
exécuter lors de l'événement.
