6 funzioni killer in JavaScript

JavaScript, come dico di solito, è pieno di sorprese. Non finisce mai di stupirci. Ogni giorno, acquisisco una nuova abilità in questo linguaggio di programmazione. Qualcosa che è minore ma ha un impatto significativo sul tuo codice. È qualcosa che vale la pena condividere.

In questo articolo, ti mostrerò sei funzioni JavaScript che puoi utilizzare nel tuo sviluppo quotidiano. Quindi andiamo avanti e impariamo qualcosa di nuovo!

1. Verifica se un elemento è visibile nella finestra

IntersectionObserver è un ottimo modo per verificare se un elemento è visibile o meno 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);

Per ulteriori informazioni su IntersectionObserver, fare clic qui .

2. Rileva dispositivo

Puoi usarlo 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 leggere di più qui .navigator.userAgent

3. Nascondi elementi

Puoi semplicemente attivare la visibilità di un elemento usando la style.visibilityproprietà e nel caso in cui desideri rimuoverlo dal flusso di rendering, puoi usare style.displayla proprietà.

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

È molto utile durante il rendering di lunghi elenchi di elementi, gli elementi NON nella vista (possono essere testati utilizzando IntersectionObserver) possono essere nascosti per fornire un aumento delle prestazioni.

4. Ottieni i parametri dall'URL

JavaScript rende il recupero dei parametri da qualsiasi indirizzo una passeggiata nel parco utilizzando l'oggetto URL.

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

Puoi copiare in profondità qualsiasi oggetto convertendolo in una stringa e di nuovo in un oggetto. Funzionerà, non solo con gli oggetti, ma anche con altri tipi di dati compositi, come gli array.

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

6. funzione di attesa

JavaScript viene fornito con una setTimeoutfunzione, ma non restituisce un Promiseoggetto, rendendo difficile l'utilizzo nella asyncfunzione. Quindi dobbiamo scrivere la nostra funzione wait/sleep .

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

Grazie per aver letto!

Altri contenuti su PlainEnglish.io . Iscriviti alla nostra newsletter settimanale gratuita . Seguici su Twitter e LinkedIn . Unisciti alla nostra comunità Discord .