C'est le troisième d'un petit trio d'articles dans lesquels je montre avec quelle rapidité et quelle facilité vous pouvez implémenter des fonctionnalités Web courantes sans compter sur des bibliothèques lourdes ou des frameworks compliqués. Cette fois, j'ai travaillé sur un bouton "lire la suite" pour les contenus extraits - avec une automatisation maximale.
Le code est simple, juste du JavaScript vanille : pas de bibliothèques, pas de magie. C’est super léger et facile à intégrer. Il utilise IntersectionObserver, de sorte qu'il ne s'exécute même pas sur les éléments tant qu'ils ne sont pas visibles, ce qui permet d'économiser des performances (même si vous souhaiterez peut-être supprimer cette optimisation pour les pages Web plus petites).
https://gist.github.com/TomJPro/39e96d2cd6cbfcf908ad99273b2211a5
J'ai supposé que des bibliothèques existaient pour cela car le problème semblait complexe. Mais quand j’ai essayé de l’écrire moi-même, ma tête était coincée dans l’idée qu’il fallait une solution compliquée – mon esprit m’a menti ! Maintenant, je suis convaincu que ces bibliothèques existent parce que d'autres développeurs réfléchissent également trop au problème ou tentent de résoudre tous les scénarios possibles avec une seule solution énorme. Cela ne pourra jamais vraiment fonctionner dans un monde où nous comptons les millisecondes.
Quand j'ai écrit mon premier morceau de code simple qui faisait le travail, il ne faisait que 20 lignes contre 100 Ko d'une bibliothèque, et il était encore plus facile à personnaliser pour chaque projet. Honnêtement, c’était comme découvrir un nouveau monde.
Je m'amuse avec les diffusions en direct. Viens discuter avec moi la prochaine fois !
Regardez la diffusion en direct
Après avoir vu trois fonctionnalités communes (comme un carrousel, un découpage de ligne avec un "lire la suite" et des scripts similaires) codées en quelques minutes seulement (y compris JS, HTML et CSS), j'espère qu'il est clair que vous ne le faites souvent pas. Je n'ai pas besoin de bibliothèques lourdes. Parfois, du bon vieux JavaScript et une pincée de CSS suffisent pour obtenir des résultats fluides et performants.
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!