Dies ist so etwas wie eine Erweiterung der 7 Killer One-Liner der letzten Woche in JavaScript . Wenn Sie den Artikel noch nicht gelesen haben, sollten Sie dies unbedingt tun.

1. Prüfen Sie, ob ein Element im Ansichtsfenster sichtbar ist

IntersectionObserverist eine großartige Möglichkeit, um zu überprüfen, ob ein Element im Ansichtsfenster sichtbar ist .

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. Gerät erkennen

Sie können den verwenden navigator.userAgent, um genaue Einblicke zu gewinnen und das Gerät zu erkennen, auf dem die Anwendung ausgeführt wird

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

Sie können die Sichtbarkeit eines Elements einfach mit der Eigenschaft umschalten und falls Sie es aus dem Renderfluss entfernenstyle.visibility möchten , können Sie die Eigenschaft verwenden.style.display

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

4. Holen Sie sich die Parameter aus der URL

JavaScript macht das Abrufen von einer beliebigen Adresse mithilfe des Objekts parameterszu einem Spaziergang im Park .URL

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

Sie können deep copyjedes Objekt in einen String und wieder zurück in ein Objekt umwandeln .

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

JavaScript wird mit einer setTimeoutFunktion ausgeliefert, gibt aber kein PromiseObjekt zurück, was die Verwendung in async functions. Also müssen wir unsere eigene wait/ sleep-Funktion schreiben.

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

Folgen Sie mir für wöchentlich neue Leckerbissen im Bereich Technik

Benötigen Sie einen erstklassigen Front-End-Entwicklungs-Freelancer , der Ihre Entwicklungsprobleme beseitigt? Kontaktieren Sie mich auf Upwork

Wollen Sie sehen, woran ich arbeite? Besuchen Sie meine persönliche Website und GitHub

Möchten Sie sich verbinden? Kontaktieren Sie mich auf LinkedIn

Ich bin ein Freiberufler, der Mitte 2022 als Digitaler Nomade durchstarten wird. Möchten Sie die Reise erwischen? Folge mir auf Instagram