Доброго времени суток, друзья!
В данной статье я хочу поделиться с вами некоторыми сниппетами, которые я использую в своей работе.
Предполагается, что вы имеете определенный опыт программирования на JavaScript.
1. Как скрыть все элементы определенного типа?
// вспомогательная функция для нахождения всех элементов определенного типа const findAll = (parent, selector) => parent.querySelectorAll(selector) const hide = (...els) => [...els].forEach(el => el.style.display = 'none') // пример hide(findAll(document, 'img')) // находим и скрываем все элементы "img" на странице
2. Как проверить, что элемент имеет определенный класс?
// вспомогательная функция для нахождения одного элемента определенного типа const findOne = (parent, selector) => parent.querySelector(selector) const hasClass = (el, className) => el.classList.contains(className) // пример hasClass(findOne(document, 'p'), 'special') // true
3. Как переключить классы элемента?
const toggleClass = (el, className) => el.classList.toggleClass(className) // пример toggleClass(findOne('p'), 'special') // параграф больше не имеет класса "special"
4. Как получить величину прокрутки текущей страницы?
const getScrollPosition = (el = window) => ({ x: el.pageXOffset !== undefined ? el.pageXOffset : el.scrollLeft, y: el.pageYOffset !== undefined ? el.pageYOffset : el.scrollTop }) // пример getScrollPosition() // { x: 0, y: 200 }
5. Как сделать плавную прокрутку в начало страницы?
const scrollToTop = () => { const c = document.documentElement.scrollTop || document.body.scrollTop if (c > 0) { requestAnimationFrame(scrollToTop) scrollTo(0, c - c / 8) } } // или scrollTo({ top: 0, behavior: 'smooth' }) // пример scrollToTop()
6. Как проверить, содержит ли один элемент другой?
const elementContains = (parent, child) => parent !== child && parent.contains(child) // пример elementContains(findOne(document, 'head'), findOne(document, 'title')) // true elementContains(findOne(document, 'body'), findOne(document, 'body')) // false
7. Как определить, попадает ли элемент в область просмотра?
const elemIsVidibleInViewport = (el, partiallyVisible = false) => { const { top, left, bottom, right } = el.getBoundingClientRect() const { innerHeight, innerWidth } = window return partiallyVisible ? ((top > 0 && top < innerHeight) || (bottom > 0 && bottom < innerHeight)) && ((left > 0 && left < innerWidth || right > 0 && right < innerWidth)) : top >= 0 & left >=0 && bottom <= innerHeight && rigth <= innerWidth } // пример elemIsVidibleInViewport(el) // элемент должен быть виден полностью elemIsVidibleInViewport(el, true) // может быть виден частично
8. Как получить все изображения, находящиеся внутри определенного элемента?
const getImages = (el, includeDuplicates = false) => { const images = [...el.getElementsByTagName('img')].map(img => img.getAttribute('src')) return includeDuplicates ? images : [...new Set(images)] } // пример getImages(document, true) // получаем все изображения на странице getImages(document, false) // получаем только уникальные изображения
9. Как определить устройство пользователя?
const detectDeviceType = () => /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ? 'Mobile' : 'Desktop' // Example detectDeviceType()
11. Как создать объект, содержащий параметры текущего URL?
const getURLParams = url => (url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce( (a, v) => ((a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1)), a), {} ) // пример getURLParams('http://url.com/page?f=John&l=Smith') // { f: 'John', l: 'Smith' } getURLParams('https://google.com') // { }
12. Как преобразовать элементы формы в объект?
const formToObject = form => Array.from(new FormData(form)).reduce( (acc, [key, value]) => ({ ...acc, [key]: value }), {} ) // пример formToObject(findOne(document, 'form')) // { name: 'John', email: "myemail@example.com" }
13. Как извлечь определенные свойства объекта?
const getProps = (from, ...selectors) => [...selectors].map(s => s .replace(/\[([^\[\]]*)\]/g, '.$1.') .split('.') .filter(t => t !== '') .reduce((prev, cur) => prev && prev[cur], from) ) const obj = { selector: { to: { value: 'value to select' } }, target: [ 1, 2, { a: 'test' } ] } // пример getProps(obj, 'selector.to.value', 'target[0]', 'target[2].a') // [ 'value to select', 1, 'test' ]
14. Как вызвать функцию через определенное время (в миллисекундах)?
// вспомогательная функция для вывода сообщения в консоль const log = (value) => console.log(value) const delay = (fn, wait, ...rest) => setTimeout(fn, wait, ...rest) // пример delay( text => log(text), 1000, 'позже' ) // 'позже' через 1 секунду
16. Как удалить обработчик события, зарегистрированный на определенном элементе?
// вспомогательная функция для добавления обработчика addListener = (el, evt, cb) => el.addEventListener(evt, cb) const removeListener = (el, evt, fn, opts = false) => el.removeEventListener(evt, fn, opts) const fn = () => log('!') // пример ;((B) => { addListener(B, 'click', fn) removeListener(B, 'click', fn) // сообщение "!" больше не выводится в консоль после клика })(document.body)
17. Как преобразовать миллисекунды в читаемый формат?
const formatDuration = ms => { if (ms < 0) ms = -ms const time = { // ~~ = Math.floor day: ~~(ms / 86400000), hour: ~~(ms / 3600000) % 24, minute: ~~(ms / 60000) % 60, second: ~~(ms / 1000) % 60, millisecond: ~~(ms) % 1000 } return Object.entries(time) .filter(val => val[1] !== 0) .map(([key, val]) => `${val} ${key}${val !== 1 ? 's' : ''}`) .join(', ') } // пример formatDuration(1001); // 1 second, 1 millisecond formatDuration(34325055574); // 397 days, 6 hours, 44 minutes, 15 seconds, 574 milliseconds
18. Как получить разницу между двумя датами в днях?
const getDaysDiffBetweenDates = (dateInitial, dateFinal) => (dateFinal - dateInitial) / (1000 * 3600 * 24) // пример log( getDaysDiffBetweenDates(new Date('2020-11-01'), new Date('2020-11-09')) ) // 8
19. Как сделать GET-запрос?
// XMLHttpRequest const httpGet = (url, cb, err = console.error) => { const req = new XMLHttpRequest() req.open('GET', url, true) req.onload = () => cb(req.responseText) req.onerror = () => err(req) req.send() } httpGet( 'https://jsonplaceholder.typicode.com/posts/1', log ) // { "userId": 1, "id": 1, "title": "some title", "body": "some text" } // fetch const httpGet = (url, cb, err = console.error) => fetch(url) .then(response => response.json()) .then(result => cb(result)) .catch(error => err(error)) // async/await const httpGet = async (url, cb, err = console.error) => { try { const response = await fetch(url); const result = await response.json(); cb(result); } catch (error) { err(error) } }
20. Как сделать POST-запрос?
// XMLHttpsRequest const httpPost = (url, data, cb, err = console.error) => { const req = new XMLHttpRequest() req.open('POST', url, true) req.setRequestHeader('Content-Type', 'application/json') req.onload = () => cb(req.responseText) req.onerror = () => err(req) req.send(data) } const newPost = { userId: 1234, title: 'foo', body: 'bar baz qux' } const data = JSON.stringify(newPost) httpPost( 'https://jsonplaceholder.typicode.com/posts', data, log ) // { "id": 101, "userId": 1234, "title": "foo", "body": "bar baz qux" } // async/await const httpPost = async (url, data, cb, err = console.error) => { try { const response = await fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) }) const result = await response.json() cb(result) } catch (error) { err(error) } } httpPost( 'https://jsonplaceholder.typicode.com/posts', newPost, log )
21. Как создать счетчик с определенным диапазоном, шагом и продолжительностью?
const counter = (selector, start, end, step = 1, duration = 2000) => { let current = start, _step = (end - start) * step < 0 ? -step : step, timer = setInterval(() => { current += _step findOne(document, selector).innerHTML = current if (current >= end) findOne(document, selector).innerHTML = end if (current >= end) clearInterval(timer) }, Math.abs(~~(duration / (end - start)))) return timer } // пример counter('#some_id', 1, 1000, 5, 2000) // создаем двухсекундный таймер для элемента с идентификатором "some_id"
22. Как скопировать строку в буфер обмена?
const copyToClipboard = str => { const el = document.createElement('textarea') el.value = str el.setAttribute('readonly') el.style.position = 'absolute' el.style.left = '-999px' document.body.append(el) const selected = document.getSelection().rangeCount > 0 ? document.getSelection().getRangeAt(0) : false el.select() document.execCommand('copy') el.remove() if (selected) { document.getSelection().removeAllRanges() document.getSelection().addRange(selected) } } // пример copyToClipboard('some text') // строка "some text" скопирована в буфер обмена Надеюсь, вы нашли для себя что-нибудь интересное. Еще больше JavaScript в моем приложении. Благодарю за внимание.
ссылка на оригинал статьи https://habr.com/ru/post/527444/
Добавить комментарий