Bu, JavaScript'te geçen haftaki 7 Killer One-Liner'ın bir uzantısıdır . Makaleyi henüz okumadıysanız, bunu yapmanız şiddetle tavsiye edilir.

1. Görünüm alanında bir öğenin görünüp görünmediğini kontrol edin

IntersectionObserverbir öğenin görünüm alanında görünüp görünmediğini kontrol etmenin harika bir yoludur .

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. Cihazı algıla

navigator.userAgentDakika içgörüleri elde etmek ve uygulamayı çalıştıran cihazı tespit etmek için kullanabilirsiniz.

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

Özelliği kullanarak bir öğenin görünürlüğünü açıp kapatabilirsiniz ve onu oluşturma akışından kaldırmak istemeniz durumunda özelliği kullanabilirsiniz .style.visibilitystyle.display

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

4. URL'den parametreleri alın

JavaScript , herhangi bir adresten nesneyi parameterskullanarak parkta bir yürüyüş yapmayı sağlar.URL

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

deep copyHerhangi bir nesneyi, onu bir dizgeye ve tekrar bir nesneye dönüştürerek yapabilirsiniz .

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

JavaScript bir setTimeoutişlevle birlikte gelir, ancak bir Promisenesne döndürmez, bu da async functions. Bu yüzden kendi wait/ sleepfonksiyonumuzu yazmalıyız.

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

Teknoloji alanında haftalık yeni bilgiler için beni takip edin

Geliştirme sıkıntılarınızı ortadan kaldırmak için En İyi Ön Uç Geliştirme Serbest Çalışanına mı ihtiyacınız var? Upwork'te bana ulaşın

Ne üzerinde çalıştığımı görmek ister misin? Kişisel Web Siteme ve GitHub'a göz atın

bağlanmak ister misiniz? LinkedIn'de bana ulaşın

2022'nin ortalarında Dijital Göçebe olarak başlayacak olan bir serbest çalışanım . Yolculuğu yakalamak ister misin? Instagram'da beni takip et