Это своего рода расширение к 7 убийственным остротам в JavaScript , которые были опубликованы на прошлой неделе . Если вы еще не читали статью, настоятельно рекомендуем это сделать.

1. Проверьте, виден ли элемент в окне просмотра

IntersectionObserverэто отличный способ проверить, виден ли элемент в окне просмотра .

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. Обнаружить устройство

Вы можете использовать navigator.userAgentдля получения подробной информации и обнаружения устройства, на котором запущено приложение.

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

Вы можете просто переключать видимость элемента с помощью style.visibilityсвойства, и если вы хотите удалить его из потока рендеринга , вы можете использовать это style.displayсвойство.

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

4. Получите параметры из URL

JavaScript превращает получение parametersс любого адреса в прогулку по парку с использованием URLобъекта.

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

Вы можете преобразовать deep copyлюбой объект в строку и обратно в объект .

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

JavaScript поставляется с setTimeoutфункцией, но он не возвращает Promiseобъект, что затрудняет его использование в async functions. Итак, мы должны написать свою собственную функцию wait/ .sleep

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

Подпишитесь на меня, чтобы получать еженедельные новости из области технологий

Нужен фрилансер по фронтенд-разработке с самым высоким рейтингом, чтобы избавиться от проблем с разработкой? Свяжитесь со мной на Upwork

Хотите увидеть, над чем я работаю? Посетите мой личный сайт и GitHub

Хотите подключиться? Свяжитесь со мной в LinkedIn

Я фрилансер, который начнет работу в качестве цифрового кочевника в середине 2022 года. Хотите поймать путешествие? Подпишитесь на меня в Instagram