6 мощных функций в JavaScript, которые сделают вашу жизнь проще
Важные функции Javascript, которые вы должны знать, чтобы стать лучшим разработчиком
09.03.2022
12 великолепных компонентов пользовательского интерфейса для вашего вдохновения в дизайне
15.03.2022
1. Проверка, виден ли элемент в окне просмотра
IntersectionObserverэто отличный способ проверить, виден ли элемент в окне просмотра .
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
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); |
Вы можете настроить поведение наблюдателя с помощью optionпараметра. threshold— самый полезный атрибут, он определяет процент элемента, который должен быть виден в окне просмотра, чтобы наблюдатель сработал .
2. Обнаружение устройства
Вы можете использовать navigator.userAgentдля получения подробной информации и обнаружения устройства, на котором запущено приложение.
|
1 2 3 4 5 6 7 8 9 10 11 |
const detectDeviceType = () => /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test( navigator.userAgent ) ? "Mobile" : "Desktop"; console.log(detectDeviceType()); |
3. Скрытие элементов
Вы можете просто переключать видимость элемента с помощью style.visibilityсвойства, и если вы хотите удалить его из потока рендеринга , вы можете использовать это style.displayсвойство.
|
1 2 3 4 5 6 7 8 |
const hideElement = (element, removeFromFlow = false) => { removeFromFlow ? (element.style.display = "none") : (element.style.visibility = "hidden"); }; |
Если вы не удалите элемент из потока рендеринга, он будет скрыт, но его место все равно будет занято. Это очень полезно при рендеринге длинных списков элементов. Элементы, НЕ находящиеся в поле зрения (можно проверить с помощью IntersectionObserver), могут быть скрыты для повышения производительности .
4. Получение параметров из URL
JavaScript превращает выборку parametersс любого адреса в прогулку по парку, используя URLобъект.
|
1 2 3 4 5 6 |
const url = new URL(window.location.href); const paramValue = url.searchParams.get("paramName"); console.log(paramValue); |
5. Простое Deep copy объекта
Вы можете преобразовать deep copy любой объект в строку и обратно в объект.
|
1 2 3 4 |
const deepCopy = (obj) => JSON.parse(JSON.stringify(obj)); |
6. waitфункция
JavaScript поставляется с setTimeoutфункцией, но он не возвращает Promiseобъект, что затрудняет его использование в async functions. Итак, мы должны написать свою собственную функцию wait/ .sleep
|
1 2 3 4 5 6 7 8 9 10 11 |
const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms)); const asyncFunc = async () => { await wait(1000); console.log("async"); }; asyncFunc(); |
Функции не большие, поэтому попробуйте их все!
Источник статьи: http://dev.to/
