FEATHERS.JS: Un guide pour construire rapidement un serveur API RESTful
Points de base:
- plumes.js simplifie la création de serveurs API RESTful, gère la plupart des travaux de backend répétitifs et permet aux développeurs de se concentrer sur la personnalisation et la configuration du code.
- Ce framework est construit sur Express, prend en charge les bases de données SQL et NOSQL et utilise des services qui génèrent automatiquement le code nécessaire, permettant à des opérations de crud d'être facilement effectuées.
- Authentification in FEATHERS.js peut utiliser JSON Web Tokens (JWT) pour protéger les points de terminaison de l'API, garantissant que seuls les utilisateurs autorisés peuvent accéder ou modifier des données.
- Les crochets en plumes.js agissent comme des fonctions middleware qui manipulent les données avant ou après les données atteignent la base de données, ce qui est très utile pour les taches telles que la vérification, l'autorisation et l'ajout de champs dynamiquement.
- FEATHERS.js est con?u pour être facile à utiliser et à étendre, prend en charge les mises à jour en temps réel via les lignes Web et fournit une architecture flexible pour une variété de cadres frontaux.
Cet article vous guidera pour créer un serveur API RESTful dans Node.js à l'aide de FEATHERS.js.
API Server, également connu sous le nom d'application Server, est un programme qui fournit des données aux applications frontales. Il traite également la logique métier sur le backend et fournit un accès restreint à la base de données de l'organisation. Non seulement il empêche les personnes non autorisées d'accéder aux données;
Chaque application que vous créez doit fournir des services à l'utilisateur final. Pour ce faire, votre application doit traiter les données. Vous pouvez utiliser l'API distante pour créer un nouveau service. Cependant, pour la plupart des applications, vous devez gérer votre propre stockage de données. Une option populaire consiste à utiliser des services de stockage de données en ligne tels que Firebase. De cette fa?on, vous n'avez pas à faire face aux détails fastidieux de l'exécution d'un serveur de base de données distribué. Cependant, les exigences de votre projet peuvent nécessiter un système de gestion de base de données interne entièrement traduit, tel que MongoDB ou Oracle. Pour que votre application frontale accéde aux données stockées dans la base de données, vous avez besoin d'une application de serveur située entre la base de données et l'application frontale.
Comme indiqué dans l'image ci-dessus, le travail d'un serveur d'applications consiste à accéder aux données à partir d'une base de données à l'aide de commandes SQL ou NOSQL et de la convertir en un format qu'une application frontale (navigateur client) peut comprendre - comme JSON . De plus, les serveurs d'application peuvent utiliser divers protocoles de sécurité, comme le chiffrement HTTPS et l'autorisation de jeton - pour garantir que la communication entre la base de données et les applications client est sécurisée et fiable. L'un des principaux avantages de l'utilisation de cette architecture est que vous pouvez utiliser le même serveur d'applications pour déployer des applications pour différentes plates-formes - Desktop, mobile, Web, etc. De plus, il est également facile de mettre à l'échelle votre application horizontalement afin de fournir des services à davantage d'utilisateurs et d'obtenir des temps de réponse rapides.
Nous créerons un serveur API simple et démontrerons les différentes fonctionnalités fournies par Feathers.
Prérequis:
Avant de commencer ce tutoriel, vous devez avoir une base solide sur les sujets suivants:
- es6 javascript
- Créer une application express
- Créer une API RESTful en utilisant Express
Les plumes sont construites sur le dessus d'Express, un cadre Web minimaliste pour Node.js. Si vous terminez le tutoriel démontré dans le lien, vous trouverez très laborieux de construire l'API RESTFul en utilisant Express uniquement. Avec des plumes, la plupart du travail répétitif est fait pour vous. Il vous suffit de vous concentrer sur la configuration et la personnalisation de votre code. Faisons dans le code et découvrons comment fonctionne ce framework Web.
Création du projet:
Pour commencer à utiliser des plumes, vous devez installer son application de ligne de commande à l'échelle mondiale:
npm install -g @feathersjs/cli
Ensuite, créez un nouveau projet API en utilisant la commande suivante:
mkdir contacts-api cd contacts-api feathers generate app
Voici mes choix, vous pouvez choisir n'importe quel cadre de test que vous aimez. Malheureusement, le test n'est pas à l'occasion de cet article, il ne sera donc pas couvert ici. Personnellement, j'aime la simplicité, c'est pourquoi j'ai choisi la plaisanterie.
Une fois l'installation terminée, vous pouvez ouvrir votre éditeur de code préféré pour afficher le fichier du projet.
Si vous terminez le didacticiel express que j'ai répertorié dans la section Prérequis, le code généré ne doit pas vous effrayer. Voici un court résumé qui décrit les dossiers et les fichiers.
Maintenant, ne vous inquiétez pas trop du r?le de chaque fichier. Au fur et à mesure que vous parcourez ce tutoriel, vous en apprendrez plus sur la fa?on dont ils fonctionnent. Maintenant, confirmons que le test fonctionne correctement.
Vérification du style de code (libelting):
Pour vous assurer que notre projet est conforme aux règles Eslint définies, exécutez simplement la commande npm test
. Si vous utilisez une plate-forme UNIX ou Linux, cela devrait fonctionner correctement. Si vous utilisez Windows, vous devez modifier quelque chose pour exécuter le test avec succès.
Tout d'abord, accédez à package.json
et affichez la section scripts
. Changez la ligne test
en:
"scripts": { "test": "npm run eslint && SET NODE_ENV= npm run jest", },
Ensuite, si vous avez plus joli installé dans le code Visual Studio, vous devez modifier le paramètre de devis unique en true dans l'onglet Paramètres de l'espace de travail:
{ "prettier.singleQuote": true }
Enfin, assurez-vous que lors de la création ou de la modification d'un fichier, la nouvelle ligne est LF. Si vous utilisez Visual Studio Code ou des éditeurs similaires, vous pouvez vérifier le style Newline actuel dans la barre d'état. Si CRLF est affiché, passez à LF. Faire ces modifications vous aidera à réussir le test de vérification du style de code. Malheureusement, il faut plus de travail pour faire passer le test et ne sera pas introduit ici.
Voyons comment générer l'interface Crud Restful.
Générer le service:
Construire une interface API crud reposante dans Express nécessite un peu de travail. En plumes, vous pouvez générer du code en exécutant simplement une seule commande et en répondant à quelques questions:
npm install -g @feathersjs/cli
Dans ce tutoriel, nous utiliserons la base de données NEDB. Feathers prend en charge les bases de données SQL (telles que MySQL) et les bases de données NOSQL (telles que MongoDB). Cependant, l'installation d'un système de base de données - que ce soit sur votre machine ou sur un serveur cloud - prend un certain temps pour le configurer. NEDB, en revanche, est une base de données en mémoire entièrement écrite en JavaScript, prenant en charge un sous-ensemble de l'API MongoDB. Aucune configuration n'est requise; vous avez juste besoin de l'installer. Il est parfait pour le prototypage et le test de nouvelles applications. Il s'agit de la base de données que nous utiliserons dans ce tutoriel.
Jetons un bref aper?u de certains des fichiers générés à l'aide de cette commande:
-
services/contacts/contact.service.js
. Il s'agit d'un service de plumes qui fournit des points de terminaison API crud pour/contacts
. Très petit, n'est-ce pas? En effet, les plumes ont fait le gros levage pour nous. Il nous évite d'écrire du code crud à chaudières. -
services/contacts/contact.hooks.js
. Ici, nous personnalisons le comportement de Crud Logic. Nous avons la sectionbefore
où nous pouvons vérifier ou modifier les données avant que les plumes lisent ou écrivent dans la base de données. Nous avons également une sectionafter
où nous pouvons vérifier ou modifier les résultats dans la base de données avant de les envoyer à l'application client. Nous pouvons effectuer des opérations telles que la restriction de l'accès, la vérification des données, l'exécution des opérations de jointure et le calcul des valeurs de champs ou de colonnes supplémentaires. -
models/contacts.model.js
. Ici, nous définissons un modèle et l'ajoutons à la table de base de données. C'est également là que nous définissons un modèle qui peut être utilisé pour vérifier les champs lorsqu'un nouvel enregistrement est inséré ou mis à jour. Malheureusement, NEDB ne prend pas en charge le mode. Cependant, j'ai fourni un exemple de modèle connecté à MongoDB qui prend en charge les fonctionnalités de mode via l'adaptateur Mongoose:
mkdir contacts-api cd contacts-api feathers generate app
Malgré certaines limites avec NEDB, il s'agit toujours d'une base de données très appropriée pour le prototypage. La plupart des bases de données NoSQL vous permettent de soumettre des données en utilisant une structure sans définir d'abord le schéma. Il est préférable de mettre en ?uvre le modèle après la mise en ?uvre des exigences du projet. Avec le modèle, les plumes effectueront la validation du champ pour vous en utilisant les règles que vous avez définies. Vous avez besoin d'une base de données prête pour la production (comme MongoDB) pour définir le schéma. Veuillez noter que la définition de configuration de la base de données de développement est dans config/default.json
:
"scripts": { "test": "npm run eslint && SET NODE_ENV= npm run jest", },
C'est là que les informations d'identification de la base de données sont fournies. Nous avons un autre fichier de configuration config/production.json
. Il s'agit de la configuration de la base de données de production utilisée lors du déploiement de l'application Feathers. Il est important d'utiliser une base de données distincte pendant le développement. Sinon, vous risquez de supprimer ou de nuire aux données opérationnelles commerciales dans votre base de données de production.
Maintenant que nous avons mis en place le service CRUD du contact, il est temps de l'essayer. Vous pouvez démarrer le serveur Feather à l'aide de la commande npm start
. Veuillez noter que ce serveur ne prend pas en charge le rechargement chaud. Par conséquent, il doit être redémarré chaque fois que vous modifiez le code. Pour interagir avec notre application Feathers, nous avons besoin d'un outil de navigateur API tel que Postman ou Insomnia. Dans ce tutoriel, j'utiliserai l'insomnie, mais vous pouvez facilement le faire avec Postman ou tout autre outil.
Créez une nouvelle demande de GET (appuyez sur Ctrl n ) et nommez "List Contacts". Dans la section URL, entrez http://localhost:3030/contacts
. Lorsque vous cliquez sur le bouton "Envoyer", vous devriez voir la vue suivante:
rien! Notre base de données est actuellement vide, nous devons donc créer de nouveaux contacts. Créer une nouvelle demande appelée Créer un contact. Remplissez les champs restants comme suit:
Si vous oubliez de modifier la méthode dans la forme ci-dessus pour publier, vous pouvez la modifier plus tard. Changez la méthode pour publier et modifiez l'onglet Body en JSON. Copiez les données suivantes dans l'onglet JSON:
npm install -g @feathersjs/cli
Lorsque vous cliquez sur le bouton "Envoyer", vous devez recevoir la réponse suivante. Veuillez noter qu'un _id
a été généré pour votre nouveau contact.
Revenez aux "Contacts de liste", puis cliquez à nouveau sur le bouton "Envoyer". Vous devriez obtenir les résultats suivants:
mkdir contacts-api cd contacts-api feathers generate app
Retour à "Créer un contact" et publier plusieurs nouveaux enregistrements:
"scripts": { "test": "npm run eslint && SET NODE_ENV= npm run jest", },
{ "prettier.singleQuote": true }
Effectuons l'opération de mise à jour maintenant. à cette fin, nous n'utiliserons pas la méthode de mise à jour HTTP. Cette méthode écrasera complètement l'enregistrement. Tout ce que nous voulons faire, c'est écraser un seul champ, pas l'enregistrement entier. Pour ce faire, nous utiliserons Patch. Créez une nouvelle demande, "Contact de mise à jour", comme indiqué ci-dessous:
Dans le champ URL, entrez http://localhost:3030/contacts/{_id}
. Remplacez {_id}
par l'ID du premier enregistrement. Collez les données suivantes dans l'onglet JSON:
feathers generate service
Cliquez sur le bouton "Envoyer". Vous devriez voir les résultats suivants:
Veuillez noter que les champs restants restent inchangés. Ensuite, nous supprimerons un record. C'est facile. Créez simplement une nouvelle demande de suppression et nommez-le "Supprimer le contact". Dans le champ URL, utilisez le format http://localhost:3030/contacts/{_id}
. Tout comme avant, remplacez {_id}
par l'ID de l'enregistrement que vous souhaitez supprimer. Cliquez sur "Send" supprimera l'enregistrement pour vous. Vous pouvez confirmer en exécutant à nouveau la demande de contacts de liste.
Nous venons de vérifier que toutes les opérations CRUD fonctionnent correctement. Dans la section suivante, nous apprendrons à configurer l'authentification.
(Le contenu suivant est similaire au texte d'origine, mais certains ajustements de déclaration et fusion de paragraphes ont été faits pour améliorer la lisibilité et la ma?trise et garder l'intention d'origine inchangée. Le format d'image reste inchangé.)
Authentification:
Actuellement, nos points de terminaison API /contacts
ne sont pas protégés. Si nous déployons l'application sur un serveur cloud, toute personne disposant de l'URL peut accéder et utiliser nos enregistrements. Pour restreindre l'accès, nous devons configurer l'authentification. Nous utiliserons les jetons Web JSON pour implémenter l'authentification pour nos applications API. Exécutez la commande suivante pour le définir:
npm install -g @feathersjs/cli
Comme vous pouvez le voir, Feathers prend en charge différentes méthodes d'authentification des utilisateurs. L'option "Mot de passe du nom d'utilisateur local" est la plus facile à définir.
Sélectionnez les options suivantes:
Ensuite, nous devons créer un nouvel utilisateur. Nous pouvons le faire en utilisant l'insomnie ou tout autre outil de navigateur API. Créez une nouvelle demande et nommez-le "Créer un utilisateur".
Dans l'onglet JSON, envoyez les données suivantes:
mkdir contacts-api cd contacts-api feathers generate app
Vous devriez recevoir une réponse similaire à ce qui suit:
Nous avons maintenant un utilisateur. Confirmons cela en créant une nouvelle demande "Liste des utilisateurs" et en envoyant l'URL http://localhost:3030/users
. Malheureusement, vous recevrez la réponse suivante:
Nous devons nous authentifier pour accéder à ces données. étant donné que nous n'avons pas une application frontale que nous pouvons utiliser pour nous connecter, nous continuerons à utiliser le navigateur API. Créez une nouvelle demande et nommez-le "Get JWT Token". Remplissez le formulaire comme suit:
Cette demande utilise la méthode post-post. Pour plus de clarté, vous pouvez le renommer pour "vous connecter". Dans l'onglet JSON, copiez les données suivantes:
"scripts": { "test": "npm run eslint && SET NODE_ENV= npm run jest", },
Après avoir cliqué sur le bouton Envoyer, vous devriez recevoir la réponse suivante:
Copiez le code de jeton (sans doubles guillemets). Accédez à la page de la demande de la liste, sélectionnez l'onglet AUTH et sélectionnez Bearier. Collez ce code de jeton dans le champ de jeton.
Après avoir cliqué sur le bouton "Envoyer", vous devriez voir la liste d'utilisateurs. Veuillez noter que notre système d'authentification n'est pas complètement sécurisé. Toute personne avec un point de terminaison /users
URL peut créer un nouveau compte et accéder à notre système. Pour éviter la création non autorisée de nouveaux comptes, nous devons également restreindre ce point final. Ouvrez le fichier services/users/users.hooks.js
et mettez à jour l'extrait de code suivant:
Cela garantira que seuls les utilisateurs authentifiés peuvent créer de nouveaux comptes. L'étape suivante consiste à protéger le point final /contacts
. Ouvrez simplement le fichier services/contacts/contacts.hooks.js
et mettez à jour en conséquence:
Redémarrez le serveur FEATHERS pour que les modifications de code prennent effet. Si vous essayez d'exécuter la demande de contacts de liste, vous recevrez la réponse suivante:
Pour vous authentifier, vous devez configurer le jeton de support comme auparavant. Une fois que vous avez fait cela, vous pouvez envoyer une demande et vous devez recevoir votre liste de contacts. Veuillez noter que le jeton que vous avez obtenu plus t?t expirera en une journée. Pour plus d'efficacité, il est préférable d'utiliser des variables d'environnement pour faciliter la mise à jour de tous les paramètres de la demande d'API à la fois. Lors de la construction d'une application frontale, vous devez stocker ce jeton dans un stockage local. N'utilisez pas de cookies. Sinon, votre application sera vulnérable aux attaques du CSRF. Consultez la documentation de sécurité des plumes pour les autres risques de sécurité que vous devez conna?tre.
Maintenant que vous avez configuré l'authentification, tous les nouveaux services créés ultérieurement vous donneront la possibilité de protéger les nouveaux points de terminaison. Voyons le dernier sujet de ce tutoriel dans la section suivante.
Crochets:
Hook est une fonction middleware attachée à une méthode de service avant, après, ou lorsqu'une erreur se produit. Ils sont souvent utilisés pour gérer l'exploitation forestière, restreindre l'accès, protéger les champs, remplir des entités liées, envoyer des notifications, etc. Si vous regardez services/users/users.hooks.js
, vous pouvez voir que des crochets de plumes intégrés sont utilisés. Nous créerons nos propres crochets personnalisés. Tout d'abord, arrêtez le serveur et supprimez la table de base de données data/contacts.db
. Ensuite, utilisez la commande suivante pour générer un nouveau crochet:
npm install -g @feathersjs/cli
Créez des crochets personnalisés avec les options suivantes process-contact
:
Ce que nous voulons faire dans ce crochet, c'est injecter deux nouveaux champs avant de traiter la demande "Créer un contact".
-
createdBy
: lien vers l'utilisateur actuellement connecté via_id
-
createdOn
hooks/process-contact.js
populate-user
hooks/populate-user
: Ajouter la date de création Ouvrez le fichier et mettez à jour le fichier comme suit: Ensuite, créez un autre crochet qui mettra l'objet utilisateur à chaque enregistrement de contact lorsque vous demandez. Suivez les instructions dans la capture d'écran ci-dessous: Ouvrez le fichier et insérez le code suivant: Maintenant, vous pouvez démarrer le serveur. Utilisez à nouveau la demande de contact pour créer trois contacts. Si vous n'avez pas configuré de jeton de porteur, définissez-le. Sinon, vous recevrez une erreur d'autorisation. C'est le type de réponse que vous devez obtenir lors de la création d'un nouveau contact: Résumé:
J'espère que vous avez maintenant appris à créer rapidement votre propre serveur API RESTful. Nous avons seulement abordé les bases et vous devriez lire le guide complet pour découvrir plus de fonctionnalités que les plumes peuvent offrir qui peuvent vous aider à atteindre des fonctionnalités avancées avec un minimum d'effort. Vous devriez également consulter la page de plumes impressionnantes, qui contient beaucoup de ressources. Que vous ayez besoin de plugins, d'exemples de projet ou de tutoriels, vous pouvez y trouver le lien. Vous devez également consulter le CLI Feathers-plus, qui est une version améliorée des plumes. Il ajoute de nouvelles fonctionnalités en plus de ce que la CLI Feathers a déjà fournie, comme la génération de code pour l'ensemencement et la prise en charge de GraphQL.
Si vous souhaitez améliorer davantage le projet contacts-api
, je vous recommande de créer une nouvelle application frontale en utilisant le cadre de votre choix. Construisez les écrans de connexion et les pages CRUD pour les points de terminaison /contacts
et /users
. Profitez du plaisir de mettre en ?uvre des défis.
Des questions fréquemment posées sur les plumes.js:
-
Qu'est-ce que les plumes.js? FEATHERS.js est un cadre Web pour la création d'applications en temps réel. Con?u pour être léger, flexible et facile à utiliser, il fournit une suite d'outils et de modèles pour construire des applications c?té serveur évolutives et maintenables.
-
Quels langages de programmation sont pris en charge par des plumes.js? FEATHERS.js utilise principalement JavaScript du c?té du serveur et du client. Il peut être utilisé avec Node.js sur le serveur et prend en charge divers frameworks JavaScript sur le client, y compris des cadres tels que React, Angular et Vue.js.
-
Quelles sont les principales caractéristiques de Feathers.js? Feathers.js comprend des fonctionnalités en temps réel (via WebSocket et RESTful API), une architecture orientée services, une prise en charge de diverses bases de données (MongoDB, PostgreSQL, etc.), des mécanismes d'authentification et d'autorisation et des systèmes de plug-in pour extensions.
-
Comment les plumes.js gèrent-elles la communication en temps réel? FEATHERS.js utilise les fonctions des websockets pour réaliser une communication en temps réel. Il fournit une API en temps réel hors de la bo?te qui permet aux clients de recevoir des mises à jour en temps réel lorsque les données sur le serveur changent.
-
Puis-je utiliser des plumes.js pour le rendu c?té serveur (SSR)? Bien que Feathers.js soit principalement utilisé pour créer des API et des applications en temps réel, il peut être utilisé en conjonction avec d'autres cadres tels que Next.js ou nuxt.js pour implémenter le rendu c?té serveur (SSR) des applications Web.
Tous les liens d'image conservent le format d'origine.
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)

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

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.

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

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)

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.

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.

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.

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.
