Fermer

mai 21, 2021

10 API Web natives que les nouveaux développeurs JavaScript devraient connaître


Ces API JavaScript sont indispensables à tout nouveau développeur, y compris à nos amis qui commencent à utiliser Angular.

Lorsque vous commencez à coder, vous comptez souvent sur des bibliothèques dont vous n'avez peut-être pas besoin. Pire encore, vous pouvez parfois réinventer la roue en codant vous-même une fonction spécifique alors qu'une API native existe. 😳

Nous sommes en 2021 et les navigateurs modernes sont de plus en plus puissants. Chaque semaine, de nouvelles versions sont publiées avec de nouvelles fonctionnalités pour nous faciliter la vie. C'est pourquoi mon objectif dans cet article est de vous montrer quelques API natives que vous ne devriez pas ignorer et de vous donner un cadre pour vous tenir au courant lorsque de nouvelles sont publiées. 😍

Pour faciliter la lecture, chaque partie est organisée comme ceci:

  1. Commence par un bref résumé de l'API
  2. Exemples de code
  3. Exemples concrets de cas d'utilisation réels
  4. Liens si vous voulez aller plus loin

Si vous êtes prêt, commençons. 💪😁

1. Les API de stockage Web: LocalStorage et SessionStorage

Résumé

L'API de stockage Web a été conçue pour fournir des mécanismes permettant aux navigateurs de stocker des paires clé / valeur de manière plus intuitive que l'utilisation de cookies. Il existe deux API de stockage Web que vous devez connaître:

  • Le sessionStorage
  • Le localStorage

Vous pouvez utiliser l'API de stockage de session lorsque vous devez enregistrer quelque chose pour la durée de la session de page (c'est-à-dire jusqu'à ce que le navigateur ou l'onglet soit fermé). Cela signifie que tout sera disponible même si vous rechargez la page. Au contraire, si vous fermez votre navigateur ou l'onglet, le stockage de session sera vidé, et les données seront perdues.

D'autre part, le stockage local est également utilisé pour sauvegarder quelque chose mais de manière persistante. Cela signifie que le stockage local n'est pas vidé lorsque le navigateur est fermé et rouvert. La seule façon d'effacer le localStorage est d'appeler localStorage.clear () .

Exemples de code


 sessionStorage .  setItem  ( 'key' [19659020]  'valeur' ​​) ; 


cont data  =  sessionStorage .  getItem  ( 'key' ) ; 


sessionStorage .  removeItem  ( 'key' ) ; 


sessionStorage .  clear  () ; 


 localStorage .  setItem  ( 'key'   'valeur' ​​) ; 


cont data  =  localStorage .  getItem  ( 'key' ) ; 


localStorage .  removeItem  ( 'key' ) ; 


localStorage .  clear  () ;

Cas d'utilisation dans le monde réel

  • Enregistrement des jetons d'authentification une fois qu'un utilisateur est connecté
  • Enregistrement des paramètres régionaux sélectionnés pour le multilingue sites Web
  • Stockage du nombre de pages vues pour la session en cours

2. L'API Fetch

Résumé

Lorsque vous avez besoin de récupérer des données à partir d'une API distante, vous pouvez utiliser une bibliothèque comme Axios . Bien que vous puissiez le configurer dans votre projet, une alternative consiste à s'appuyer sur l'API native Fetch disponible dans tous les navigateurs modernes. Cela rendra votre code plus léger et vous pourrez démarrer plus rapidement. Vous pouvez personnaliser presque tout pour répondre à vos besoins, et je n'ai jamais été limité en l'utilisant dans l'un de mes projets. 😇

Exemples de code


  fetch  ( "https://jsonplaceholder.typicode.com/photos" ) 
.  puis  ([19659020] ( response )   =>  response .  json  () ) 
.  then  ] ( ( photos )   =>  console .  log  ( photos ) )  ; 


 const  response  =    wait    fetch  ( "https://jsonplaceholder.typicode.com/photos" ) ; [19659100] const  photos  =    wait  response .  json  () ;

Note: The promise that fetch () renvoie ne rejettera pas l'état d'erreur HTTP même si la réponse est un HTTP 404 ou 500. Au lieu de cela, il sera généralement résolu (avec l'état ok défini sur fa lse), et il ne rejettera qu'en cas de panne du réseau ou si quelque chose a empêché la requête de se terminer.

Cas d'utilisation dans le monde réel

  • Récupération de tout roi de données à partir d'une API distante comme l'utilisateur authentifié, une liste d'articles de blog , et ainsi de suite

3. L'API du presse-papiers

Résumé

L'API du presse-papiers a été publiée pour interagir avec les commandes du presse-papiers comme couper, copier et coller. Il est également capable de lire et d'écrire à partir du presse-papiers du système. Il est disponible sous la variable navigateur .

Exemples de code


  wait  navigateur .  clipboard .  writeText  (  "Texte à copier" ) ; 


 const  clipText  =    wait  navigateur .  presse-papiers . [19659019] readText  () ; 


document .  addEventListener  ( "copy"   async    function   ()   {

}  ) ; 


document .  addEventListener  ( "paste"   async    function   ()   {

}  ) ;

Remarque: Si vous souhaitez copier ou lire du texte avec des images, utilisez le presse-papiers navigator.clipboard.write () et navigator.clipboard.read ( ) .

Cas d'utilisation du monde réel

  • Fournit un moyen de copier rapidement quelque chose sur la page en cliquant sur un bouton comme un extrait de code ou un résumé à tweeter

4. L'API de géolocalisation

Résumé

L'API de géolocalisation a été conçue pour vous permettre d'accéder à la position de votre visiteur (lorsqu'elle le permet, bien sûr). Il est disponible sous navigator.geolocation . Lorsque vous accédez à cette variable, le navigateur de l'utilisateur vous demandera l'autorisation pour des raisons de confidentialité.

Exemples de code


 navigateur .  géolocalisation .  getCurrentPosition  (
	 function   ( positions )   {
		 var  coordonnées  =  position .  coordonnées ; 
console .  log  ( "Votre position actuelle est:" ) ; 
console .  log  ( `Latitude:  $ { coordonnées .  latitude }  `  ) ; 
console .  log  ( `Longitude:  $ { coordonnées .  longitude }  `  ) ; 
console .  log  ( `Plus ou moins  $ { coordonnées .  précision }   mètres.`  ) ; 
	} 
	 function   ( err )   {
console .  warn  ( `ERROR ( $ { err .  code }  ): [19659173] $ { err .  message }   ` ) ; 
	} 
) ; [19659093] const  watchId  =  navigateur .  géolocalisation .  watchPosition  (
	 function   ( positions  )   {
		 var  coordonnées  =  position .  coordonnées ; 
console .  log  ( "Votre position actuelle est:" ) ; 
console .  log  ( `Latitude:  $ { coordonnées .  latitude }  `  ) ; 
console .  log  ( `Longitude:  $ { coordonnées .  longitude }  `  ) ; 
console .  log  ( `Plus ou moins  $ { coordonnées .  précision }   mètres.`  ) ; 
	} 
	 function   ( err )   {
console .  warn  ( `ERROR ( $ { err .  code }  ): [19659173] $ { err .  message }   ` ) ; 
	} 
) ; 


navigateur .  géolocalisation .  clearWatch  ( watchId ) ;

Cas d'utilisation dans le monde réel

  • Pour tracer l'emplacement de l'utilisateur sur une carte 📍
  • Pour afficher des informations personnalisées en rapport avec leur emplacement, comme un événement ou une fête à proximité

5. L'API de visibilité de page

Résumé

Supposons que vous souhaitiez vérifier si la page est actuellement focalisée avant d'exécuter quelque chose. L'API de visibilité de page a été conçue à cet effet et fournit des événements que vous pouvez surveiller pour savoir quand un document devient visible ou masqué. Cela signifie que lorsque l'utilisateur minimise la fenêtre ou passe à un autre onglet, un événement sera envoyé.

Exemples de code


 document .  addEventListener  (
	 "visibilitéchange"  ]
	 function   ()   {
		 if   ( document .  hidden )   {
console .  log  ( "the document is not visible" ) ; 
		}   else   {
console .  log  ( "the document is visible" ) ; 
		} 
	} 
) ; 


document .  onvisibilitychange    =    function   ()   {
console .  log  ( "La visibilité de la page a changé" ) ; 
} ;

Cas d'utilisation dans le monde réel

  • Économisez des ressources et améliorez les performances de la page en évitant les tâches inutiles lorsque le document n'est pas visible
  • Mettez en pause un carrousel d'images et empêchez-le de passer à la diapositive suivante à moins que l'utilisateur affiche la page
  • Évitez d'extraire des données d'une API à moins la page est focalisée

6. L'API Resize Observer

Résumé

L'API Resize Observer vous permet de savoir quand les dimensions d'un élément changent. En un mot, il peut être pratique de déclencher une fonction spécifique lorsque l'utilisateur redimensionne la fenêtre du navigateur.

Exemples de code


  var  observer  =    new    ResizeObserver [19659020] ( ( entrées )   =>   {
	 pour   ( let  entrée  sur  entrées  ])   {
		 const  content  =  entrée .  contentRect ; 
console .  log  ( "Element:"  entry .  target ) ; 
console .  log  ( `Taille de l'élément:  $ { content .  width }   px x [19659173] Contenu $ { .  hauteur }   px`  ) ; 
console .  log  ( `Element padding:  $ { content .  top }   px; [19659173] Contenu $ { .  gauche }   px`  ) ; 
	} 
}  ) ; 


observateur .  observer  ( ". some-elements" ) ; 


observateur .  unobserve  ( ". some-elements" ) ; 


observer .  disconnect  () ;

Cas d'utilisation dans le monde réel

  • Réduire ou augmenter la taille de la police en fonction des dimensions de l'élément

7. L'API URL

Résumé

Cette API native a été conçue pour fournir un moyen simple d'analyser, de construire, de normaliser et de coder des URL. Comme vous le verrez, cela peut être pratique lorsque vous souhaitez obtenir l'hôte ou le protocole pour une URL donnée. 😃

Exemples de code

 const  url  =    new    URL  ( "http://www.example.com/something?hello=hey# myhash ") ; 

console .  log  ( url .  hash ) ; 
console .  log  ( url .  host ) ; 
console .  log  ( url .  hostname ) ; 
console .  log  ( url .  href ) ; 
console .  log  ( url .  origine ) ; 
console .  log  ( url .  chemin d'accès ) ; 
console .  log  ( url .  protocol ) ; 
console .  log  ( url .  search ) ; 

url .  toString  () ;

Cas d'utilisation réels

  • Analyser une URL pour extraire le nom de domaine
  • Mettre à jour une URL donnée en ajoutant une recherche paramètres de celui-ci

8. L'API de vibration

Résumé

L'API de vibration a été conçue pour fournir une rétroaction physique en secouant l'appareil de l'utilisateur. Si le matériel n'offre pas de vibration (comme un ordinateur de bureau), le code ne fera rien.

Exemples de code


 window .  navigateur .  vibrate  ([19659426] 200 ) ; 


fenêtre .  navigateur .  vibrer  ( [ 200   100   200 ] [19659020]) ; 


window .  navigateur .  vibrate  ( 0 ) ;

Real-world Use Cases

  • Vibre le matériel lorsque l'utilisateur effectue une action spécifique dans l 'interface
  • Avertir l' utilisateur que quelque chose de significatif s'est produit 📱

9. L'API Plein écran

Résumé

L'API Plein écran a été conçue pour permettre aux visiteurs d'entrer / sortir un élément donné en plein écran.

Exemples de code


  const  element  =  document .  querySelector  ( ". Element-to-focus" ) ; 
élément .  requestFullscreen  () ; 


 wait  document .  exitFullscreen  () ; 


document .  onfullscreenchange    =    function   ( event )   {
console .  log  ( "Plein écran changé" ) ; 
} ; 


document .  onfullscreenerror    =    function   ( event )   {
console .  log  ( "Erreur plein écran" ) ; 
} ;

Cas d'utilisation dans le monde réel

  • Autoriser les visiteurs pour centrer la fenêtre de leur navigateur sur un élément spécifique, comme un jeu en ligne 👾
  • Focus sur une partie spécifique d'un tableau de bord analytique

10. L'API Lazyload

Résumé

Celui-ci n'est pas contrôlé avec JavaScript mais avec une balise HTML5. Je l'ai ajouté à la liste pour vous montrer que de nouveaux attributs pratiques sont en cours de publication.

Si vous avez besoin de charger paresseusement vos images ou vos iframes pour des raisons de performances, il n'est plus nécessaire d'utiliser une API JavaScript. Vous pouvez utiliser l'attribut de chargement et le définir sur paresseux.

Exemples de code

 < img src  =  "image.jpg"  loading  =  " lazy "> 
 < iframe src  = " myiframe.html " loading  = " paresseux ">  <[19659504] /  iframe >

Cas d'utilisation du monde réel

  • Augmentez le chargement de la page en demandant les bonnes ressources et ajustez les autres si nécessaire 📈

11. Où aller à partir de là?

Comme je l'ai dit plus tôt, de nombreuses nouvelles fonctionnalités sont disponibles dans les navigateurs ces jours-ci. Si vous souhaitez rester informé de l’avenir du Web, je vous suggère de visiter ces deux liens uniques sur une base hebdomadaire / mensuelle. 💫

Un dernier mot: lorsque vous avez besoin de vérifier si un navigateur spécifique prend en charge une fonctionnalité particulière, allez sur CanIUse.com . 😁👌

J'espère qu'avec cet article, vous pourrez mieux comprendre à quel point les API natives peuvent être puissantes pour simplifier votre code et alléger vos applications. Je suis également toujours heureux de lire vos commentaires et vos messages Twitter @RifkiNada .

Et au cas où vous seriez curieux de connaître mon travail, vous pouvez le consulter ici NadaRifki.com . 😜



Le meilleur outil 2023 pour ta croissance Instagram !



Source link