Рубрики
Без рубрики

Написание современного кода JavaScript

Некоторые советы, чтобы сделать код JavaScript более красивее с несколькими передовыми практиками. Теги с JavaScript, функциональными, ES2015, Linter.

Помните, когда JavaScript был языком, используемым для изменения элементов на странице, когда курсор был над ними? Эти дни закончились, каждый язык развивается со временем, и так же, как мы их используем. Посмотрите на код, который вы написали один или два года назад: Тебе стыдно? Если да, этот пост для вас 🙂

Я постараюсь сюда, чтобы перечислить несколько хороших практик, чтобы проще написать код JavaScript.

Используйте Linter, который может отформатировать свой код

Первый совет, который я даю вам, это использовать Linter, который проверяет вас уважать некоторые правила, которые делают ваш код в соответствии с файлом на другое, особенно если вы несколько разработчика для работы по тому же проекту: отступ, пробелы в скобках заменить == по === …

Но более важно сделать свой Linter исправить автоматически ваш код для вас, когда это возможно. Eslint Это очень хорошо (с помощью опции --fix ), и он хорошо интегрирован со всеми основными идентификаторами для файлов автоматического исправления на сохранении.

Вы также можете использовать Красивее который более сосредоточен на форматировании, чем у свиты, но результат в основном тот же 😉

Следующий момент поможет вам выбрать, какие правила использовать с Linter:

Используйте современные правила для вашего линта

Если вам интересно, какие правила для вашего кода, вот намека: Стандартизация . Это Очень Строгий линт литера, который не даст вам никаких выбора в правилах, но каждый из них все больше и более допускается сообществом. Вот некоторые примеры:

  • Используйте 2 пробела для отступа (я использовал для использования 4 пробелов, но на самом деле использование 2 довольно приятно)
  • Нет полутока (очень странно в начале, но несколько дней спустя я не мог вернуться)
  • Пространства после ключевых слов (как Если ) и в фигурных скобках, а не внутри скобки
  • и намного больше Отказ

StandardJs – это автономный модуль узла, который может пересекать и исправить свой код, но если вы хотите использовать его в большом существующем проекте и деактивируйте некоторые правила (потому что некоторые понадобится много модификаций), вы также можете использовать Eslinteded config . Например, я деактивировал правила Не смешанные-операторы и Импорт/NO-WebPack-Loader-Syntax Отказ

Используйте ES2015 + новые функции

Если вы разрабатываете с JavaScript, нет, вы не слышали о ES2015 + (или ES6, ES7 …) функции. Вот те, которые я не мог больше жить:

  • Функции стрелки: написание функций, таких как х => х * 2 очень полезен с функциональным программированием (см. Следующую точку)
  • Классы: прекратить использование функций прототипа, классы настолько прохладнее 😉 (но не злоупотребляйте, JavaScript намного лучше, чем любой объектно-ориентированный язык)
  • Операции с массивами и объектами:
function doSomething() {
  const a = doSomethingElse()
  const b = doSomethingWithA(a)
  const otherResults = { c: '😺', d: '🐶' }
  return { a, b, ...otherResults } // equivalent to { a: a, b: b }
}
const { a, c, ...rest } = doSomething() // Also works with arrays!
// `rest` looks like { b: ..., d: '🐶' }
  • Обещания легче использовать с Async/await :
// Please try to write the same code with classic promises ;)
async function doSomething() {
  const a = await getValueForA()
  const b = await getValueForBFromA(a)
  const [c, d] = await Promise.all([
    // parallel execution
    getValueForC(), getValueForDFromB(b)
  ])
  const total = await calculateTotal(a, b, c, d)
  return total / 1000
}

Интересно, как использовать эти фантастические функции? Одна из моих статей дает вам несколько советов Действительно (Кстати, с последней версией Node.js вам, вероятно, больше не понадобится Вавилее, чтобы использовать лучшие новые функции 😀)

Используйте функциональное программирование

Очень шумиха прямо сейчас, функциональное программирование в последнее время набирает много успеха не только в JavaScript. Причина? Это делает код более предсказанным, безопасным, детерминированным и намного проще поддерживать, когда вы привыкли к нему. Вот несколько простых советов:

Первая остановка, используя для петли. В большинстве (каждый?) кейс Вы им не нужны. Например:

const arr = [{ name: 'first', value: 13 }, { name: 'second', value: 7 }]

// Instead of:
const res = {}
for (let i = 0; i < arr.length; i++) {
  const calculatedValue = arr[i].value * 10
  if (calculatedValue > 100) {
    res[arr[i].name] = calculatedValue
  }
}

// Prefer:
const res = arr
  .map(elem => ({ name: elem.name, calculatedValue: elem.value * 10 }))
  .filter(elem => elem.calculatedValue > 100)
  .reduce((acc, elem) => ({
    [elem.name]: calculatedValue,
    ...acc
  }), {})

Хорошо, я признаю, что это очень экстремальный пример, и если вы не привыкли к функциональному программированию, это может выглядеть более сложным. Может быть, мы можем упростить это:

const enrichElementWithCalculatedValue =
  elem => ({ name: elem.name, calculatedValue: elem.value * 10 })
const filterElementsByValue = value =>
  elem => elem.calculatedValue > value
const aggregateElementInObject = (acc, elem) => ({
  [elem.name]: calculatedValue,
  ...acc
})
const res = arr
  .map(enrichElementWithCalculatedValue)
  .filter(filterElementsByValue(100))
  .reduce(aggregateElementInObject, {})

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

Обратите внимание, что три локальных функция не изменяют контекст, они выполняются. Внешняя переменная не модифицирована, никакая другая служба не называется … В функциональном программировании они называются Чистые функции Отказ У них есть несколько больших преимуществ:

  • Они простым тестируемым, потому что от заданных параметров существует только один возможный результат, даже если мы вызовем функцию несколько раз;
  • они гарантированно дают тот же результат независимо от фактического состояния заявления;
  • Состояние приложения остается прежним до и после вызова функции.

Итак, мой третий совет: Используйте чистые функции много!

Некоторые другие советы, чтобы закончить

  • Привыкнуть к работе с асинхронным кодом, используйте много обещаний, посмотрите на обсервалирует с RXJS (Есть Великолепное руководство о функциональном программировании, ведущем к реактивным программированию )
  • Написать тесты! Должно казаться очевидным, но я знаю, что многие проекты имеют непроверенный код, хотя тестирование JavaScript (Front или Backend) не так сложно, как кажется.
  • Используйте последние функции языка: например, остановить писать Arr.indexof (Elem)! == -1 в пользу arr.includes (Elem) Отказ
  • Читайте много технических статей: JavaScript Subreddit Является очень хорошим источником, чтобы знать самые крутые практики в экосистеме.

О, и к выводу, самый большой совет, который я могу вам дать: Всегда рефикторуйте свой код! Делать улучшения в модуль, который вы написали год назад? Воспользуйтесь возможностью заменить var с const , использовать функции стрелки или Async/await Чтобы упростить код … Всегда приятнее работать над кодом, который вам нравится 😉

Эта статья была Первоначально опубликовано в моем блоге .

Оригинал: “https://dev.to/scastiel/writing-modern-javascript-code”

Читайте ещё по теме: