Русский
Русский
English
Статистика
Реклама

Сниппеты

Перевод 20 ES6-сниппетов для решения практических задач

11.11.2020 10:16:50 | Автор: admin


Доброго времени суток, друзья!

В данной статье я хочу поделиться с вами некоторыми сниппетами, которые я использую в своей работе.

Предполагается, что вы имеете определенный опыт программирования на 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')) // trueelementContains(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'// ExampledetectDeviceType()

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 millisecondformatDuration(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-запрос?


// XMLHttpRequestconst 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" }// fetchconst httpGet = (url, cb, err = console.error) =>  fetch(url)    .then(response => response.json())    .then(result => cb(result))    .catch(error => err(error))// async/awaitconst 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-запрос?


// XMLHttpsRequestconst 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/awaitconst 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 в моем приложении. Благодарю за внимание.
Подробнее..

Тотальный JavaScript изучаем JS с акцентом на практической составляющей

22.02.2021 16:14:10 | Автор: admin


Доброго времени суток, друзья!

Когда речь заходит об изучении JavaScript, будь то первое знакомство с языком или углубление имеющихся знаний, найти в интернетах теоретические материалы не составляет особого труда. Мой топ-5:


Однако, когда дело касается практических аспектов JavaScript, информацию приходится собирать буквально по крупицам. Собственно, этим я и занимался на протяжении последних 4-5 месяцев.

Предлагаю вашему вниманию Тотальный JavaScript.

Вот что вы найдете в этом репозитории:

  • Огромное количество сниппетов (утилит, вспомогательных функций), разделенных по типам данных не могу назвать точного количества (порядка 4000 строк кода без комментариев и пробелов). Следует отметить, что не все функции являются настоящими сниппетами с точки зрения возможности их использования (как есть) в реальных приложениях, некоторые всего лишь эксперименты, демонстирующие те или иные (безграничные?) возможности языка. Коллекция все время пополняется
  • 230 практических вопросов приводится пример кода, необходимо выполнить его в уме и решить, что будет выведено в консоль. Конечно, на практике мы редко занимается чем-то подобным, ведь гораздо легче и, главное, быстрее законсолить кусок подозрительного кода. Однако, на мой взгляд, умение решать подобные задачи как нельзя лучше демонстрирует понимание основных принципов и характерных особенностей работы JavaScript. В качестве недостатка этого раздела отмечу почти полное отсутствие вопросов по классам и this. Постараюсь в ближайшем будущем его устранить
  • 68 задач разного уровня сложности подборка задач из учебника Ильи Кантора (большинство), немного адаптированных под нужды реальных приложений. Структура раздела, в основном, следует структуре учебника с небольшими лирическими отступлениями
  • Паттерны проектирования подробное описание и примеры всех паттернов, которые называет Банда Четырех в своей книге Паттерны объектно-ориентированного программирования, на JavaScript (также в разделе имеются примеры на TypeScript смотрите исходный код). При подготовке данного раздела многое позаимствовано у Refactoring Guru, за что ему (или им) огромное спасибо
  • Что за черт, JavaScript? список тонких моментов работы JavaScript. Этот раздел не слишком актуален, учитывая возможности современного JS, однако интересен тем, что позволяет узнать, каким был язык раньше, до того, как завоевал мир веб-разработки. Де факто, он остается прежним, но следование простым правилам (например, использование const или let вместо var или "===" вместо "==") позволяет решить большую часть проблем, с которыми сталкивались разработчики в прошлом

Уверен, что каждый найдет для себя что-нибудь интересное.

Также в репозитории имеется ссылка на приложение с вопросами (список и интерективная викторина) и задачами. Оно вполне работоспособное (и даже прогрессивное), но, признаюсь, нуждается в существенной переработке. Займусь этим, когда появится свободное время.

Как всегда, буду рад любой форме обратной связи. При обнаружении опечаток, ошибок, неточностей и, особенно, неработающего кода (код протестирован, но никто не застрахован от ошибок) не стесняйтесь писать в личку и делать пуллы.

Благодарю за внимание. Всех, кому дым отечества и сладок, и приятен, с наступающим праздником.
Подробнее..

Категории

Последние комментарии

  • Имя: Макс
    24.08.2022 | 11:28
    Я разраб в IT компании, работаю на арбитражную команду. Мы работаем с приламы и сайтами, при работе замечаются постоянные баны и лаги. Пацаны посоветовали сервис по анализу исходного кода,https://app Подробнее..
  • Имя: 9055410337
    20.08.2022 | 17:41
    поможем пишите в телеграм Подробнее..
  • Имя: sabbat
    17.08.2022 | 20:42
    Охренеть.. это просто шикарная статья, феноменально круто. Большое спасибо за разбор! Надеюсь как-нибудь с тобой связаться для обсуждений чего-либо) Подробнее..
  • Имя: Мария
    09.08.2022 | 14:44
    Добрый день. Если обладаете такой информацией, то подскажите, пожалуйста, где можно найти много-много материала по Yggdrasil и его уязвимостях для написания диплома? Благодарю. Подробнее..
© 2006-2024, personeltest.ru