Questa è in qualche modo un'estensione dei 7 Killer One-Liners in JavaScript della scorsa settimana . Se non hai già letto l'articolo, sei vivamente incoraggiato a farlo.

1. Verifica se un elemento è visibile nella finestra

IntersectionObserverè un ottimo modo per verificare se un elemento è visibile nella finestra .

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. Rileva dispositivo

Puoi utilizzare navigator.userAgentper ottenere informazioni dettagliate e rilevare il dispositivo che esegue l'applicazione

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

Puoi semplicemente attivare o disattivare la visibilità di un elemento usando la style.visibilityproprietà e nel caso in cui desideri rimuoverlo dal flusso di rendering , puoi utilizzare la style.displayproprietà.

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

4. Ottieni i parametri dall'URL

JavaScript rende il recupero parametersdi qualsiasi indirizzo una passeggiata nel parco utilizzando l' URLoggetto.

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

Puoi deep copyqualsiasi oggetto convertendolo in una stringa e di nuovo in un oggetto .

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

JavaScript viene fornito con una setTimeoutfunzione, ma non restituisce un Promiseoggetto, rendendo difficile l'utilizzo in async functions. Quindi dobbiamo scrivere la nostra wait/ sleepfunzione.

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

Seguimi per nuovi bocconcini settimanali sul dominio della tecnologia

Hai bisogno di un freelance per lo sviluppo front-end di prim'ordine per eliminare i tuoi problemi di sviluppo? Contattami su Upwork

Vuoi vedere a cosa sto lavorando? Dai un'occhiata al mio sito Web personale e GitHub

Vuoi connetterti? Contattami su LinkedIn

Sono un libero professionista che inizierà come Digital Nomad a metà del 2022. Vuoi prendere il viaggio? Seguimi su Instagram