Il s'agit en quelque sorte d'une extension des 7 Killer One-Liners de la semaine dernière en JavaScript . Si vous n'avez pas encore lu l'article, vous êtes fortement encouragé à le faire.

1. Vérifier si un élément est visible dans la fenêtre

IntersectionObserverest un excellent moyen de vérifier si un élément est visible dans la fenêtre .

const callback = (entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      // `entry.target` is the dom element
      console.log(`${entry.target.id} is visible`);
    }
  });
};
const options = {
  threshold: 1.0,
};
const observer = new IntersectionObserver(callback, options);
const btn = document.getElementById("btn");
const bottomBtn = document.getElementById("bottom-btn");
observer.observe(btn);
observer.observe(bottomBtn);

2. Détecter l'appareil

Vous pouvez utiliser le navigator.userAgentpour obtenir des informations détaillées et détecter l'appareil exécutant l'application

const detectDeviceType = () =>
  /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
    navigator.userAgent
  )
    ? "Mobile"
    : "Desktop";
console.log(detectDeviceType());

Vous pouvez simplement basculer la visibilité d'un élément à l'aide de la style.visibilitypropriété et si vous souhaitez le supprimer du flux de rendu , vous pouvez utiliser la style.displaypropriété.

const hideElement = (element, removeFromFlow = false) => {
  removeFromFlow
    ? (element.style.display = "none")
    : (element.style.visibility = "hidden");
};

4. Obtenez les paramètres de l'URL

JavaScript fait de la récupération parametersde n'importe quelle adresse une promenade dans le parc en utilisant l' URLobjet.

const url = new URL(window.location.href);
const paramValue = url.searchParams.get("paramName");
console.log(paramValue);

Vous pouvez deep copytout objet en le convertissant en une chaîne et de retour à un objet .

const deepCopy = (obj) => JSON.parse(JSON.stringify(obj));

JavaScript est livré avec une setTimeoutfonction, mais il ne renvoie pas d' Promiseobjet, ce qui le rend difficile à utiliser dans async functions. Nous devons donc écrire notre propre fonction wait/ sleep.

const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
const asyncFunc = async () => {
  await wait(1000);
  console.log("async");
};
asyncFunc();

Suivez-moi pour de nouvelles informations hebdomadaires sur le domaine de la technologie

Besoin d'un freelance en développement front-end parmi les mieux notés pour résoudre vos problèmes de développement ? Contactez-moi sur Upwork

Vous voulez voir sur quoi je travaille ? Consultez mon site Web personnel et GitHub

Vous voulez vous connecter ? Contactez-moi sur LinkedIn

Je suis un indépendant qui commencera en tant que nomade numérique à la mi-2022. Vous voulez attraper le voyage? Suivez-moi sur Instagram