Как стать инженером Front-End: 5 библиотек JavaScript, о которых вы должны знать

5 полезных библиотек, о которых 99% людей могут не знать!

Как front-end разработчик, я значительно повысил свою эффективность с помощью этих библиотек JavaScript, например, при форматировании дат, обработке параметров URL и отладке мобильных веб-страниц. Друзья, я хочу поделиться ими с вами.

1. Используйте "Vconsole" для отладки веб-страниц на мобильном терминале

Ссылка

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

СОВЕТ : Подобно devtools браузера chrome, Vconsole предоставляет следующие возможности, которые помогут вам лучше отлаживать веб-страницы

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

2. Используйте "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.info(getDate()) // 2022-05-09 07:19:14

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

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

Примечание: "Day.js - это минималистская библиотека JavaScript, которая анализирует, проверяет, манипулирует и отображает даты и время для современных браузеров с API, совместимым с Moment.js. Если вы используете Moment.js, вы уже знаете, как использовать Day.js".

3. Используйте "qs.js" для форматирования параметров URL

Ссылка

Часто ли вам нужно получить параметр "URL"? Возможно, вы напишете функцию вроде этой.

4. Используйте "js-cookie.js" для чтения и записи cookies

Ссылка

Мы все знаем, что манипулировать cookies в JavaScript не так просто. Для повышения производительности я настоятельно рекомендую 'js-cookie.js', Это простой, легкий JavaScript API для работы с cookies.

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

5. Почему Lodash?

Ссылка

Давайте рассмотрим введение Lodash ：.

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

1. итерации массивов, объектов и строк.
2. манипулирования & тестирования значений
3. создания составных функций

// 1. Flatten the array
_.flattenDeep([ 1, [ 2, [ 3, [  4, [ 5 ]] ] ] ]) // [1, 2, 3, 4, 5]
// 2. More convenient object traversal
_.each({ name: 'fatfish', age: 100 }, (val, key) => {
  console.info(val, key) 
  // fatfish name
  // 100 'age'
})
// 3. ...

Наконец

Спасибо, что прочитали. Я с нетерпением жду, когда вы будете следить за мной и читать больше качественных статей.

• "Я потерял возможность устроиться на работу только из-за Promise.all"
• Интервьюер: Что случилось с "npm run xxx"?
• Интервьюер: Может ли "x !== x" возвращать истину в JavaScript？
• Это 2022 год, больше не злоупотребляйте функцией стрелки