6 zabójczych funkcji w JavaScript

JavaScript, jak zwykle mówię, jest pełen niespodzianek. Nie przestaje nas zadziwiać. Każdego dnia zdobywam nową umiejętność w tym języku programowania. Coś, co jest niewielkie, ale ma znaczący wpływ na Twój kod. Warto się tym podzielić.

W tym artykule przedstawię sześć funkcji JavaScript, które możesz wykorzystać w codziennym rozwoju. Więc chodźmy dalej i nauczmy się czegoś nowego!

1. Sprawdź, czy element jest widoczny w rzutni

IntersectionObserver to świetny sposób na sprawdzenie, czy element jest widoczny w rzutni, czy nie.

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);

Aby uzyskać więcej informacji o IntersectionObserver, kliknij tutaj .

2. Wykryj urządzenie

Możesz użyć navigator.userAgentdo uzyskania szczegółowych informacji i wykrycia urządzenia, na którym działa aplikacja.

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

Więcej o tym przeczytasz tutaj .navigator.userAgent

3. Ukryj elementy

Możesz po prostu przełączyć widoczność elementu za pomocą style.visibilitywłaściwości, a jeśli chcesz usunąć go z przepływu renderowania, możesz użyć style.displaywłaściwości.

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

Jest to bardzo przydatne podczas renderowania długich list elementów, elementy NIE w widoku (można je przetestować za pomocą IntersectionObserver) można ukryć, aby zapewnić wzrost wydajności.

4. Pobierz parametry z adresu URL

JavaScript sprawia, że ​​pobieranie parametrów z dowolnego adresu to spacer po parku przy użyciu obiektu URL.

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

Możesz głęboko skopiować dowolny obiekt, konwertując go na ciąg i z powrotem na obiekt. Będzie to działać nie tylko z obiektami, ale także z innymi złożonymi typami danych, jak również z tablicami.

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

6. funkcja oczekiwania;

JavaScript jest dostarczany z setTimeoutfunkcją, ale nie zwraca Promiseobiektu, co utrudnia jego użycie w asyncfunkcji. Musimy więc napisać własną funkcję oczekiwania/uśpienia .

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

Dziękuje za przeczytanie!

Więcej treści na PlainEnglish.io . Zapisz się do naszego bezpłatnego cotygodniowego biuletynu . Śledź nas na Twitterze i LinkedIn . Dołącz do naszej społeczności Discord .