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. Пользовательские плагины.