5 библиотек JavaScript, которые повысят вашу эффективность

1. Day.js для форматирования даты и времени

• Ссылка

Управление датами и временем в JavaScript — довольно трудоемкий процесс. Например, когда нужно вывести текущие дату и время, приходится писать большой кусок кода.

const getDate = () => {
  const fillZero = (t) => {
    return t < 10 ? `0${t}` : t
  }
  const d = new Date()
  const year = d.getFullYear()
  const month = fillZero(d.getMonth() + 1)
  const day = fillZero(d.getDate())
  const hour = fillZero(d.getHours())
  const minute = fillZero(d.getMinutes())
  const second = fillZero(d.getSeconds())
 
  return `${year}-${month}-${day} ${hour}:${minute}:${second}`
}
console.log(getDate()) // 2022-05-09 07:19:14

К счастью, с Day.js это можно сделать всего одной строкой.

console.log(dayjs().format('YYYY-MM-DD HH:mm:ss')) // 2022-05-09 07:19:14

ПРИМЕЧАНИЕ: “DAY.JS — ЭТО МИНИМАЛИСТИЧЕСКАЯ БИБЛИОТЕКА JAVASCRIPT, КОТОРАЯ АНАЛИЗИРУЕТ, ПРОВЕРЯЕТ, КОНТРОЛИРУЕТ И ОТОБРАЖАЕТ ДАТЫ И ВРЕМЯ ДЛЯ СОВРЕМЕННЫХ БРАУЗЕРОВ С API, ПРЕИМУЩЕСТВЕННО СОВМЕСТИМЫМ С MOMENT.JS. ЕСЛИ ВЫ ИСПОЛЬЗУЕТЕ MOMENT.JS, ВЫ УЖЕ ЗНАЕТЕ, КАК ПРИМЕНЯТЬ DAY.JS”.

2. qs.js для обработки параметров URL

• Ссылка

Чтобы получить параметр URL, обычно пишут подобную функцию.

const formatSearch = () => {
  window.location.search.slice(1).split('&').reduce((res, it) => {
    const [ key, value ] = it.split('=')
    res[ key ] = value
    return res
  }, {})
}
// https://medium.com?name=fatfish&age=100
const search = formatSearch() // { name: 'fatfish', age: 100 }
// используем qs.js для форматирования
const search2 = qs.parse(window.location.search.slice(1)) // { name: 'fatfish', age: 100 }

Теперь попробуем реализовать новую функцию. Добавьте два параметра — имя (name) и возраст (age) — в https://medium.com.

// 1. url = https://medium.com
// 2. params = { name: 'fatfish', age: 100 }
const splitSearch = (url, params) => {
  const search = Object.entries(params).map((it) => it.join('=')).join('&')
  return `${url}?${search}`
}
const url = 'https://medium.com'
const params = { name: 'fatfish', age: 100 }
console.log(splitSearch(url, params)) // https://medium.com?name=fatfish&age=100
// используем qs.js, чтобы преобразовать URL в строку
console.log(`${url}?${qs.stringify(params)}`) // https://medium.com?name=fatfish&age=100

3. js-cookie.js для чтения и записи cookie

• Ссылка

Управлять cookie в JavaScript непросто. Для повышения производительности рекомендую js-cookie.js — простой и легкий API JavaScript для работы с cookie.

Cookies.set('name', 'fatfish', { expires: 10 })
Cookies.get('name') // fatfish

4. Lodash

• Ссылка

Зачем нужен Lodash? Ответ на этот вопрос — в его описании на GitHub:

“Lodash делает JavaScript проще, избавляя от необходимости работать с массивами, числами, объектами, строками и т. д. Модульные методы Lodash отлично подходят для:

• итерации массивов, объектов и строк;
• управления значениями и их тестирования; 
• создания сложных функций”.

// 1. Уплощение массива
_.flattenDeep([ 1, [ 2, [ 3, [  4, [ 5 ]] ] ] ]) // [1, 2, 3, 4, 5]
// 2. Более удобный способ прохождения по объектам
_.each({ name: 'fatfish', age: 100 }, (val, key) => {
  console.log(val, key) 
  // имя fatfish 
  // 100 'age' (возраст)
})
// 3. ...

5. Vconsole для отладки веб-страниц в мобильном терминале

• Ссылка

Отладка веб-страниц в терминале мобильного девайса очень сложна, но с Vconsole все станет намного проще. Вы можете испытать его возможности, отсканировав этот QR-код или щелкнув URL.

Совет. Подобно инструментам разработки браузера Chrome, Vconsole предоставляет следующие функции, которые помогут лучше отлаживать веб-страницы.

1. Логи: console.log|info|error|…
2. Сеть: XMLHttpRequest, Fetch, sendBeacon.
3. Элементы: дерево элементов HTML.
4. Хранилище: Cookies, LocalStorage, SessionStorage.
5. Выполнение JS-команд вручную.
6. Пользовательские плагины.

источник