Важные функции Javascript, которые вы должны знать, чтобы стать лучшим разработчиком
5 вещей, для которых вам не нужен Javascript
09.03.2022
6 мощных функций в JavaScript, которые сделают вашу жизнь проще
09.03.2022
Сегодняшняя статья будет посвящена примерам важных функций Javascript.
DEEP COPY
JavaScript позволяет глубоко копировать объект, преобразуя его в строку, а затем обратно в объект.
Вот пример:
|
1 2 3 4 5 6 |
const deepCopy = (obj) => { JSON.parse(JSON.stringify(obj)) }; |
WAIT FUNCTION
Javascript может работать с функцией setTimeout, но он не возвращает объект промиса, что затрудняет его использование в асинхронных функциях. Итак, нам нужно написать собственную функцию ожидания.
Вот пример:
|
1 2 3 4 5 6 7 8 9 10 11 |
const wait = new Promise((resolve) => setTimeout(resolve, ms)); const asyncFunction = async() => { await wait(1000); console.log("async"); }; asyncFunction(); |
Intersection Observer
Вы можете проверить, виден ли элемент в окне просмотра. Будем использовать crossObserver(), чтобы проверить, виден ли элемент в окне просмотра.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
const callback = (entries) => { entries.foreach((entry) => { entries.forEach((entry) => { if (entry.isIntersecting) { //enter target in dom element. //e.g entry.target.classList.add('animated'); console.log(`${entry.target} is visible`); } }); }; const options = { threshold: 1.0, }; const observer = new IntersectionObserver(callback, options); const btn = document.getElementById('.btn'); const bottomBtn = document.getElementById('.bottomBtn'); observer.observe(btn); observer.observe(bottomBtn); |
Настройте поведение наблюдателя с помощью параметра option. порог — самый полезный атрибут.
Он определяет процент элемента, который должен быть виден в области просмотра триггера браузера.
HIDE ELEMENTS
Вы можете переключать видимость элемента с помощью стиля visiabilty, и если хотите удалить его из потока рендеринга, вы можете использовать свойство style.display.
Вот пример:
|
1 2 3 4 5 6 7 8 9 10 11 |
const hideElement = (element, removeFromFlow = false) => { removeFromFlow ? (element.style.display = 'none') : (element.style.visibility = 'hidden'); } |
GET URL PARAMETERS
Удобный поиск параметров из объектов URL.
Вот пример:
|
1 2 3 4 5 6 |
const url = new URL(window.location.href); const paramterValue = url.searchParams.get("pramaName"); console.log(paramterValue); |
DECTECT DEVICE TYPEST
Используйте navigator.UserAgent для обнаружения устройства, на котором запущено приложение.
Вот пример:
|
1 2 3 4 5 6 7 8 9 10 |
const dectectDeviceType = () => /Andriod|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test( navigator.userAgent ) ? "mobile" : "desktop"; console.log(dectectDeviceType); |
Если вы не удалите элемент из потока рендеринга, он будет скрыт, но его место будет занято. Это очень полезно при рендеринге длинного списка элементов. Невидимые элементы можно протестировать с помощью IntersectionObserver. Также можно скрыть для повышения производительности.
Пробуйте и все получится!
Источник статьи: http://dev.to/
