Affichage des API Web sur un écran LCD Arduino à l'aide de Node.js
Feb 20, 2025 am 08:24 AM
Les plats clés
- L'article décrit comment afficher les données d'une API Web sur l'écran LCD d'un Arduino à l'aide de Node.js. L'auteur utilise l'exemple d'un tirage au sort aléatoire lors d'une rencontre IoT Sydney, où la configuration de l'écran LCD Arduino attire les informations RSVP de l'événement Meetup.com et sélectionne au hasard un membre.
- L'auteur utilise Node.js pour créer un script qui fait une demande HTTP à l'API Meetup, analyse les données JSON renvoyées et affiche le nom d'un membre sélectionné au hasard sur l'écran LCD d'Arduino. L'auteur fournit également un guide étape par étape sur la fa?on de configurer le serveur Node.js, de faire la demande HTTP et de gérer les données renvoyées.
- L'auteur mentionne que la bibliothèque Johnny-Five est utilisée pour contr?ler l'Arduino via Node.js, et le module de demande est utilisé pour faire des demandes HTTP du serveur Node.js à l'API Meetup. La bibliothèque de traits de soumission est utilisée pour analyser les données JSON renvoyées.
- L'auteur conclut en suggérant d'autres utilisations potentielles pour cette configuration, comme afficher des messages effrayants, en gardant des onglets sur les scores NBA Playoff, ou toute autre données obtenue à partir d'une API Web. L'auteur encourage également les lecteurs à partager leurs propres projets en fonction de ce code.
LCDS. Ils sont amusants. C’est l’une des fa?ons les plus cool d’apporter une voix à votre Arduino alors qu’il parle à travers du texte brillant. Dans cet article, nous allons explorer comment apporter des données d'une API Web et l'afficher sur l'écran LCD de votre Arduino en utilisant Node.js.
Ma rencontre préférée de chaque mois ici à Sydney est la rencontre IoT Sydney. C’est une grande rencontre (vous devriez venir!). à la fin de chaque Meetup, il y a un tirage au sort aléatoire pour ceux qui ont RSVPED. Je pensais qu'il était temps que cela ait été fait dans le véritable style IoT, alors j'ai mis en place une configuration rapide d'écran LCD Arduino qui récupère les informations de RSVP de l'événement MeetUp.com, puis sélectionne au hasard un membre chanceux. J'ai pensé que cela pourrait être une belle surprise et bien plus facile que de tirer des noms d'un chapeau!
Il tombe également parfaitement avec la série actuelle d'articles de l'Internet des objets que j'écris ici à SitePoint. J'explore les nombreuses possibilités IoT différentes avec divers appareils. La semaine dernière, j'ai examiné l'utilisation de données IoT dans le moteur Unity Game et avant cela, j'ai regardé comment tirer les données de la machoire.
Commen?ons!
Votre croquis Arduino
Le croquis que nous utiliserons pour cet exemple ressemble à ainsi:
Il s'agit d'une version légèrement modifiée de celle que vous trouverez dans le kit Inventeurs SparkFun. Il existe d'autres variations de croquis LCD que vous trouverez en ligne qui réorganisent la fa?on dont les choses sont connectées mais fonctionneront de la même manière. Vous devrez peut-être simplement ajuster les broches que vous définissez dans le javascript ci-dessous.
notre code javascript
Dans notre fichier javascript node.js, nous incluons les éléments suivants:
<span>var express = require('express'),
</span> app <span>= express(),
</span> server <span>= require('http').<span>Server</span>(app),
</span> port <span>= 5000,
</span> five <span>= require('johnny-five'),
</span> request <span>= require('request'),
</span> _ <span>= require('underscore'),
</span> board <span>= new five<span>.Board</span>(),
</span> lcd<span>;
</span>
board<span>.on('ready', function() {
</span> lcd <span>= new five<span>.LCD</span>({
</span> <span>pins: [12, 11, 5, 4, 3, 2],
</span> <span>rows: 2,
</span> <span>cols: 16
</span> <span>});
</span>
<span>this.repl.inject({
</span> <span>lcd: lcd
</span> <span>});
</span><span>});
</span>
app<span>.get('/chooseMember/:event_id', function(req<span>, resp</span>) {
</span> <span>request({
</span> <span>url: 'https://api.meetup.com/2/rsvps?key=474cc9332345ea7d7e135f50653c&event_id='+req.params.event_id,
</span> <span>json: true
</span> <span>}, function(error<span>, response, body</span>) {
</span> <span>var members = _.pluck(body.results, 'member'),
</span> randomMember <span>= members[_.random(members.length - 1)];
</span>
resp<span>.json(randomMember);
</span>
<span>console.log(randomMember.name);
</span>
lcd<span>.clear().print(randomMember.name);
</span> <span>});
</span><span>});
</span>
server<span>.listen(port, function() {
</span> <span>console.log('Listening on ' + port);
</span><span>});</span>
Configuration de ceci étape par étape
Si vous êtes assez collé dans Node.js, une grande partie de ce code aura déjà un sens pour vous. Je vais expliquer chaque bit juste pour m'assurer que tout le monde est sur la même longueur d'onde et fournir des conseils en cours de route sur tout ce que nous devrons mettre en place.
Pour commencer, nous configurons nos variables de serveur express en préparation pour exécuter un serveur local sur le port 5000:
<span>var express = require('express'),
</span> app <span>= express(),
</span> server <span>= require('http').<span>Server</span>(app),
</span> port <span>= 5000,</span>
Nous avons alors une chose assez importante à inclure, Johnny-Five. Il s'agit de la bibliothèque NPM qui nous donne accès aux fonctions dont nous aurons besoin pour contr?ler notre arduino via node.js.
five <span>= require('johnny-five'),</span>
Après cela, nous incluons le module de demande. Nous l'utiliserons pour faire des demandes HTTP de notre serveur Node.js à l'API Meetup.
request <span>= require('request'),</span>
Pour garder les choses très propres et simples, nous utiliserons un soulignement pour parcourir les tableaux de données.
_ <span>= require('underscore'),</span>
Les deux dernières variables sont les variables de la carte et de l'écran LCD que nous utiliserons pour stocker les objets Arduino que Johnny-Five crée.
board <span>= new five<span>.Board</span>(), </span> lcd<span>;</span>
Nous commen?ons par attendre que notre carte Arduino soit prête à accéder, Johnny-Five envoie un événement ?prêt? lorsque notre planche sera prête à partir.
board<span>.on('ready', function() {</span>
Une fois que notre carte est prête à partir, nous avons fait savoir à Johnny-Five quel type d'écran LCD nous avons connecté. Nous définissons les broches de haut en bas dans un tableau:
Nous définissons également le nombre de lignes et de colonnes que notre LCD a. Dans mon cas, c'est un LCD 2 × 16. Tout cela ressemble à:
lcd <span>= new five<span>.LCD</span>({
</span> <span>pins: [12, 11, 5, 4, 3, 2],
</span> <span>rows: 2,
</span> <span>cols: 16
</span><span>});</span>
Ensuite, nous avons du code qui est facultatif (mais pratique à inclure) qui nous permettra d'accéder aux fonctions LCD à partir de notre ligne de commande lors de son exécution (je le montrerai en action plus tard dans l'article):
<span>this.repl.inject({
</span> <span>lcd: lcd
</span><span>});</span>
Ensuite, nous avons notre seul et obtenons la demande que nous avons configurée. Dans cette demande, nous nous attendons à un ID d'événement dans l'URL. Par exemple: http: // localhost: 5000 / choosemember / 221960710. L'ID de l'événement est celui que vous trouverez dans la barre d'adresse lorsque vous visitez la page de l'événement:
Notre demande de GET à la recherche de cet identifiant ressemble à:
app<span>.get('/chooseMember/:event_id', function(req<span>, resp</span>) {</span>
Ensuite, nous arrivons au bit complexe du code! Notre demande HTTP réelle à l'API Meetup. Nous y accédons via la fonction de demande. Nous passons dans deux choses ici, nos options HTTP pour la demande et notre fonction de rappel.
Les options de notre appel HTTP contiennent notre URL et un booléen pour faire savoir à la demande que nous attendons un objet JSON. Cela ressemble à:
<span>request({
</span> <span>url: 'https://api.meetup.com/2/rsvps?key=089cc9874628ealkjh27dkb50653s&event_id='+req.params.event_id,
</span> <span>json: true
</span><span>}</span>
Les observateurs Keen auront remarqué que nous passons dans notre ID d'événement de la cha?ne d'URL dans l'URL de demande à l'aide de req.params.event_id. Cependant, il y a une autre série de caractères là-bas que je n'ai pas expliquée. Afin d'accéder à l'API Meetup, vous aurez besoin d'une clé API. Vous pouvez en trouver un sur https://secure.meetup.com/meetup_api/key/:
Enfin, nous avons notre fonction de rappel qui utilise les données JSON renvoyées. J'ai gardé les choses simples et sans gestion des erreurs, mais s'il s'agit d'une grave création de niveau de production - ajoutez une vérification de la variable d'erreur.
La sortie JSON que le rappel renvoie dans notre variable corporelle ressemble ainsi:
<span>var express = require('express'),
</span> app <span>= express(),
</span> server <span>= require('http').<span>Server</span>(app),
</span> port <span>= 5000,
</span> five <span>= require('johnny-five'),
</span> request <span>= require('request'),
</span> _ <span>= require('underscore'),
</span> board <span>= new five<span>.Board</span>(),
</span> lcd<span>;
</span>
board<span>.on('ready', function() {
</span> lcd <span>= new five<span>.LCD</span>({
</span> <span>pins: [12, 11, 5, 4, 3, 2],
</span> <span>rows: 2,
</span> <span>cols: 16
</span> <span>});
</span>
<span>this.repl.inject({
</span> <span>lcd: lcd
</span> <span>});
</span><span>});
</span>
app<span>.get('/chooseMember/:event_id', function(req<span>, resp</span>) {
</span> <span>request({
</span> <span>url: 'https://api.meetup.com/2/rsvps?key=474cc9332345ea7d7e135f50653c&event_id='+req.params.event_id,
</span> <span>json: true
</span> <span>}, function(error<span>, response, body</span>) {
</span> <span>var members = _.pluck(body.results, 'member'),
</span> randomMember <span>= members[_.random(members.length - 1)];
</span>
resp<span>.json(randomMember);
</span>
<span>console.log(randomMember.name);
</span>
lcd<span>.clear().print(randomMember.name);
</span> <span>});
</span><span>});
</span>
server<span>.listen(port, function() {
</span> <span>console.log('Listening on ' + port);
</span><span>});</span>
Nous filtrons une grande partie de cela en utilisant la fonction _.Pluck () dans le soulignement. Cela nous aidera à nous concentrer sur la partie importante de notre API - les membres qui ont renommé. La fonction _.luck () passe par le tableau des résultats et ne prend que les informations des membres de chacun.
<span>var express = require('express'),
</span> app <span>= express(),
</span> server <span>= require('http').<span>Server</span>(app),
</span> port <span>= 5000,</span>
Ensuite, nous utilisons la fonction de soulignement _.Members () pour sélectionner au hasard un membre dans le tableau résultant.
five <span>= require('johnny-five'),</span>
Nous renvoyons ces données via notre serveur express en tant que réponse JSON à la demande GET et enregistrons le nom dans notre console afin que nous puissions voir qui a été choisi:
request <span>= require('request'),</span>
Ensuite, nous utilisons l'objet LCD Johnny-Five que nous avons configuré plus t?t pour imprimer le nom du membre sur notre LCD. Nous commen?ons par utiliser LCD.Clear () pour effacer le LCD de quoi que ce soit actuellement dessus, puis utiliser LCD.print () pour imprimer les caractères de nom.
_ <span>= require('underscore'),</span>
Vous remarquerez que lorsque vous exécutez ceci, certains noms longs seront coupés, plut?t que de s'enrouler vers l'autre ligne. Si vous souhaitez envelopper les choses sur une deuxième ligne, essayez de séparer votre Randommbember.Nom en deux cha?nes de 16 caractères, imprimez la première cha?ne, puis utilisez LCD.Cursor (1, 0); pour passer à la deuxième ligne avant d'imprimer le second. Dans mon cas, il n'était pas nécessaire car tout ce dont nous avons vraiment besoin est de pouvoir dire à qui le nom a été dessiné - quelques personnages manquants ne causeront généralement pas de problèmes ici.
faire fonctionner cela sur votre arduino
Nous avons prêt notre code Node.js. Maintenant, connectez votre Arduino et assurez-vous que vous avez le croquis StandardFirmata téléchargé dessus:
Nous devrons également nous assurer que toutes les dépendances ont réglée. Mon fichier package.json ressemble à:
board <span>= new five<span>.Board</span>(), </span> lcd<span>;</span>
N'hésitez pas à adapter cela à votre propre projet, la principale chose que vous voudrez, ce sont ces dépendances.
Ensuite, une fois que vous avez un fichier package.json trié, ouvrez votre console et accédez à l'emplacement de votre code. Exécutez cette merveilleuse commande:
board<span>.on('ready', function() {</span>
suivi de celui-ci:
lcd <span>= new five<span>.LCD</span>({
</span> <span>pins: [12, 11, 5, 4, 3, 2],
</span> <span>rows: 2,
</span> <span>cols: 16
</span><span>});</span>
Avec cette course, vous devriez maintenant pouvoir aller sur http: // localhost: 5000 / chooseMember / 221960710 (remplacer votre propre identifiant d'événement bien s?r) et vous aurez un RSVP aléatoire par conséquent:
Si vous l'exécutez à nouveau, un nouveau RSVP appara?tra. Si tout se passe bien, ces noms devraient appara?tre sur l'écran LCD de votre Arduino!
cette chose de remplacement que nous avons mentionnée
Nous avons inclus un peu de code qui disait ce.repl.inject dans notre serveur Node.js plus t?t. Ce que cela fait, c'est vous permettre d'exécuter des commandes à partir du terminal tandis que votre serveur Node.js s'exécute pour définir ce qui est affiché sur l'écran LCD:
Si nous tapons un LCD.print (), nous pouvons faire passer de la magie:
eh bien… notre message a presque adapté au moins!
Conclusion
Nous avons réussi un membre sélectionné au hasard du groupe d'événements apparaissant sur notre LCD! Cette même idée pourrait être appliquée à n'importe quel nombre d'autres API, ajustez simplement l'appel de demande et la fa?on dont vous gérez les données. Laissez les messages effrayants sur un écran LCD pour les colocataires, gardez un ?il sur les derniers scores des éliminatoires de la NBA ou tout ce qui vous pla?t!
faire quelque chose de amusant en fonction de ce code? Laissez une note dans les commentaires et partagez-le, j'adorerais le voir!
Questions fréquemment posées (FAQ) sur les API Web sur Arduino LCD
Comment puis-je connecter mon écran LCD Arduino à Internet?
Connecter votre écran LCD Arduino à Internet nécessite un module Wi-Fi comme l'ESP8266. Ce module permet à votre Arduino de se connecter à un réseau Wi-Fi et de faire des demandes de données simples à l'aide de HTTP. Vous devrez connecter l'ESP8266 à votre carte Arduino à l'aide de l'interface SPI. Une fois connecté, vous pouvez utiliser la bibliothèque ESP8266WIFI pour gérer la connexion Wi-Fi et la bibliothèque ESP8266HTTPCLIENT pour faire des demandes HTTP.
Quel est le r?le d'une API dans Arduino LCD?
Une API API dans Arduino LCD?
(Interface de programmation d'applications) est un ensemble de règles qui permet à différentes applications logicielles de communiquer entre elles. Dans le contexte de l'écran LCD Arduino, les API sont utilisées pour récupérer les données d'Internet. Ces données peuvent provenir des mises à jour météorologiques, des cours des actions ou même de vos propres données personnalisées. L'API récupère ces données et les envoie à votre carte Arduino, qui l'affiche ensuite sur le LCD.
Comment puis-je afficher des données d'une API sur mon écran LCD Arduino?
Affichage des données à partir d'un L'API sur votre LCD Arduino comprend quelques étapes. Tout d'abord, vous devez connecter votre Arduino à Internet à l'aide d'un module Wi-Fi. Ensuite, vous devez faire une demande à l'API à l'aide du protocole HTTP. L'API répondra avec les données demandées, que vous pouvez ensuite analyser et afficher sur votre écran LCD. La bibliothèque LiquidCrystal peut être utilisée pour gérer l'écran LCD.Puis-je utiliser une API avec mon écran LCD Arduino?
Oui, vous pouvez utiliser n'importe quelle API avec votre écran LCD Arduino tant qu'il prend en charge le protocole HTTP. Cependant, gardez à l'esprit que certaines API peuvent nécessiter une authentification, qui peut être un peu plus complexe à configurer. De plus, les données renvoyées par l'API doivent être dans un format que votre Arduino peut comprendre, généralement JSON ou XML.
Comment puis-je mettre à jour les données sur mon LCD Arduino en temps réel?
La mise à jour des données de votre écran LCD Arduino en temps réel nécessite de faire des demandes régulières à l'API. Vous pouvez utiliser la fonction de retard () pour suspendre l'exécution de votre programme pendant un certain temps. Par exemple, si vous souhaitez mettre à jour les données à chaque minute, vous pouvez ajouter du retard (60000) à la fin de votre fonction Loop (). Cela fera une pause pour 60000 millisecondes, ou une minute, avant la prochaine itération de la boucle.
Quelles sont les limites de l'utilisation d'API avec Arduino?
Alors que l'utilisation d'API avec Arduino s'ouvre Beaucoup de possibilités, il y a certaines limites. Premièrement, les cartes Arduino ont une mémoire limitée, ce qui peut être un problème lorsqu'il s'agit de grandes quantités de données. Deuxièmement, toutes les API ne sont pas libres à utiliser, et certaines peuvent avoir des limites d'utilisation. Enfin, faire des demandes HTTP et des données d'analyse peut être complexe et nécessiter une bonne compréhension de la programmation et du réseautage.
Puis-je utiliser des API avec d'autres composants Arduino?
Oui, les API peuvent être utilisées avec n'importe quel autre avec n'importe quel Composant Arduino qui peut se connecter à Internet. Cela inclut non seulement les écrans LCD, mais aussi les LED, les moteurs et autres capteurs. Le processus est le même: l'Arduino fait une demande à l'API, re?oit des données et utilise ces données pour contr?ler le composant.
Comment puis-je résoudre les problèmes avec mon Arduino LCD et API?
Le dépannage des problèmes avec votre écran LCD et API Arduino peut être difficile, mais il y a quelques choses que vous pouvez faire. Tout d'abord, vérifiez votre cablage et assurez-vous que votre Arduino est correctement connecté à Internet. Deuxièmement, utilisez le moniteur série pour déboguer votre code et voir les réponses de l'API. Enfin, vérifiez la documentation de l'API pour toutes les exigences ou limitations spécifiques.
Puis-je utiliser Arduino LCD et API pour créer mes propres projets?
Absolument! En utilisant Arduino LCD et API, vous pouvez créer un large éventail de projets. Par exemple, vous pouvez créer une station météorologique qui affiche des données météorologiques en temps réel, un ticker d'origine qui affiche les derniers cours des actions, ou un système domestique qui contr?le vos appareils en fonction des données d'Internet.
Quelles sont les bonnes ressources pour en savoir plus sur l'utilisation d'API avec Arduino?
Il existe de nombreuses ressources disponibles pour en savoir plus sur l'utilisation d'API avec Arduino. Le site officiel et les forums officiels d'Arduino sont un excellent point de départ. Il existe également de nombreux tutoriels et cours en ligne disponibles sur des sites Web comme YouTube, Udacity et Coursera. Enfin, des livres comme ?Programmation Arduino: Getting Starking with Sketches? de Simon Monk fournissent une introduction complète à la programmation Arduino, y compris l'utilisation d'API.
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!
Outils d'IA chauds
Undress AI Tool
Images de déshabillage gratuites
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
échangez les visages dans n'importe quelle vidéo sans effort grace à notre outil d'échange de visage AI entièrement gratuit?!
Article chaud
Outils chauds
Bloc-notes++7.3.1
éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Comment faire une demande HTTP dans Node.js?
Jul 13, 2025 am 02:18 AM
Il existe trois fa?ons courantes d'initier des demandes HTTP dans Node.js: utilisez des modules intégrés, Axios et Node-Fetch. 1. Utilisez le module HTTP / HTTPS intégré sans dépendances, ce qui convient aux scénarios de base, mais nécessite un traitement manuel de la couture des données et de la surveillance des erreurs, tels que l'utilisation de https.get () pour obtenir des données ou envoyer des demandes de post via .write (); 2.AXIOS est une bibliothèque tierce basée sur la promesse. Il a une syntaxe concise et des fonctions puissantes, prend en charge l'async / attendre, la conversion JSON automatique, l'intercepteur, etc. Il est recommandé de simplifier les opérations de demande asynchrones; 3.Node-Fetch fournit un style similaire à la récupération du navigateur, basé sur la promesse et la syntaxe simple
Types de données JavaScript: référence primitive vs
Jul 13, 2025 am 02:43 AM
Les types de données JavaScript sont divisés en types primitifs et types de référence. Les types primitifs incluent la cha?ne, le nombre, le booléen, le nul, un non défini et le symbole. Les valeurs sont immuables et les copies sont copiées lors de l'attribution des valeurs, de sorte qu'elles ne se affectent pas; Les types de référence tels que les objets, les tableaux et les fonctions stockent les adresses de mémoire, et les variables pointant vers le même objet s'afferchent mutuellement. Le typeof et l'instance de OFF peuvent être utilisés pour déterminer les types, mais prêtent attention aux problèmes historiques de typeofnull. Comprendre ces deux types de différences peut aider à écrire un code plus stable et fiable.
Objet JavaScript Time, quelqu'un construit un site Web Eactexe, plus rapide sur Google Chrome, etc.
Jul 08, 2025 pm 02:27 PM
Bonjour, développeurs JavaScript! Bienvenue dans JavaScript News de cette semaine! Cette semaine, nous nous concentrerons sur: le différend de marque d'Oracle avec Deno, les nouveaux objets Time JavaScript sont pris en charge par les navigateurs, les mises à jour Google Chrome et certains outils de développeurs puissants. Commen?ons! Le différend de marque d'Oracle avec la tentative de Deno Oracle d'enregistrer une marque "JavaScript" a provoqué la controverse. Ryan Dahl, le créateur de Node.js et Deno, a déposé une pétition pour annuler la marque, et il pense que JavaScript est un niveau ouvert et ne devrait pas être utilisé par Oracle
Gestion des promesses: cha?nage, gestion des erreurs et combinateurs de promesses en javascript
Jul 08, 2025 am 02:40 AM
La promesse est le mécanisme central pour gérer les opérations asynchrones en JavaScript. Comprendre les appels de cha?ne, la gestion des erreurs et les combinants est la clé pour ma?triser leurs applications. 1. L'appel de la cha?ne renvoie une nouvelle promesse à travers. Puis () pour réaliser la concaténation des processus asynchrones. Chaque .then () re?oit le résultat précédent et peut renvoyer une valeur ou une promesse; 2. La gestion des erreurs doit utiliser .catch () pour attraper des exceptions pour éviter les défaillances silencieuses, et peut renvoyer la valeur par défaut dans Catch pour continuer le processus; 3. Combinateurs tels que promesse.all () (réussi avec succès uniquement après tout succès), promesse.race () (le premier achèvement est retourné) et promesse.allsetTled () (en attente de toutes les achèvements)
Qu'est-ce que l'API Cache et comment est-elle utilisée avec les travailleurs du service?
Jul 08, 2025 am 02:43 AM
Cacheapi est un outil fourni par le navigateur pour mettre en cache les demandes de réseau, qui est souvent utilisée en conjonction avec travailleur de service pour améliorer les performances du site Web et l'expérience hors ligne. 1. Il permet aux développeurs de stocker manuellement des ressources telles que des scripts, des feuilles de style, des photos, etc.; 2. Il peut faire correspondre les réponses du cache en fonction des demandes; 3. Il prend en charge la suppression des caches spécifiques ou la nettoyage du cache entier; 4. Il peut mettre en ?uvre des stratégies de priorité de cache ou de priorité de réseau grace à l'écoute des événements Fetch; 5. Il est souvent utilisé pour le support hors ligne, accélérez la vitesse d'accès répétée, préchargement des ressources clés et du contenu de mise à jour des antécédents; 6. Lorsque vous l'utilisez, vous devez faire attention au contr?le de la version du cache, aux restrictions de stockage et à la différence entre le mécanisme de mise en cache HTTP.
JS Roundup: une plongée profonde dans la boucle d'événement JavaScript
Jul 08, 2025 am 02:24 AM
La boucle d'événement de JavaScript gère les opérations asynchrones en coordonnant les piles d'appels, les webapis et les files d'attente de taches. 1. La pile d'appels exécute du code synchrone, et lors de la rencontre de taches asynchrones, il est remis à WebAPI pour le traitement; 2. Une fois que le WebAPI a terminé la tache en arrière-plan, il met le rappel dans la file d'attente correspondante (macro tache ou micro tache); 3. La boucle d'événement vérifie si la pile d'appels est vide. S'il est vide, le rappel est retiré de la file d'attente et poussé dans la pile d'appels pour l'exécution; 4. Micro taches (comme Promise. puis) ??prendre la priorité sur les taches macro (telles que Settimeout); 5. Comprendre la boucle d'événements permet d'éviter de bloquer le thread principal et d'optimiser l'ordre d'exécution du code.
Comprendre l'événement bouillonnant et capturer dans les événements JavaScript DOM
Jul 08, 2025 am 02:36 AM
Les bulles d'événements se propagent de l'élément cible vers l'extérieur vers le n?ud d'ancêtre, tandis que la capture d'événements se propage de la couche externe vers l'intérieur vers l'élément cible. 1. événements Bubbles: Après avoir cliqué sur l'élément enfant, l'événement déclenche l'auditeur de l'élément parent vers le haut. Par exemple, après avoir cliqué sur le bouton, il sortira d'abord cliqué sur l'enfant, puis parent. 2. Capture d'événement: définissez le troisième paramètre sur true, afin que l'auditeur soit exécuté dans l'étape de capture, tels que le déclenchement de l'écouteur de capture de l'élément parent avant de cliquer sur le bouton. 3. Les utilisations pratiques incluent la gestion unifiée des événements d'éléments enfants, le prétraitement d'interception et l'optimisation des performances. 4. Le flux d'événements DOM est divisé en trois étapes: capture, cible et bulle, et l'écouteur par défaut est exécuté dans l'étape de la bulle.
Un tour d'horizon des fonctions d'ordre supérieur au-delà de la carte et du filtre
Jul 10, 2025 am 11:41 AM
Dans les tableaux JavaScript, en plus de la carte et du filtre, il existe d'autres méthodes puissantes et rarement utilisées. 1. La réduction peut non seulement résumer, mais également compter, se regrouper, aplatir les tableaux et construire de nouvelles structures; 2. Find et FindIndex sont utilisés pour trouver des éléments ou des index individuels; 3.Il et tout sont utilisés pour déterminer si les conditions existent ou que toutes les personnes se rencontrent; 4.Sort peut être trié mais changera le tableau d'origine; 5. Faites attention à la copie du tableau lorsque vous l'utilisez pour éviter les effets secondaires. Ces méthodes rendent le code plus concis et efficace.
