JavaScript-разработчик из Франции, Себастьян Кастель, поделился мыслями о том, как на его взгляд должен выглядеть современный JavaScript код в 2017 году.
А вы помните те времена, когда JavaScript был языком, который использовали только для оживления страниц сайта? Это время уже прошло, так как, языки программирования развиваются вместе с методами их использования. Посмотрите на код, который вы написали один, два года назад: он вас смущает? Если да, этот пост для вас.
Ниже вы найдете мой список из хороших практик, которые помогут сделать ваш JavaScript код проще в написании, чтении и поддержке.
Первый совет, который я вам дам это использование линтера. Он создан для проверки, соблюдения единого стиля в вашем коде. Это позволит сделать код консистентным во всех .js файлах. Очень полезно использовать линтер в командной работе — это позволит сделать стиль кода единым среди всех разработчиков одного проекта.
Что более важно, линтер делает исправления в вашем коде, когда это возможно. ESLint, например, делает довольно таки хорошо (используйте опцию –fix) и он отлично интегрируется с популярными IDE.
Вы также можете использовать Prettier, если сравнивать с ESLint, он больше сфокусирован на форматировании кода. Разница между ними небольшая.
Следующие пункты помогут вам выбрать какие правила использовать с линтером:
Если вы в замешательстве и не можете решить, какой набор правил использовать для кода, выбирайте StandardJS. Это очень строгий линтер, который не даст вам отступить от правил. Несколько примеров:
StandardJS может устанавливаться в виде отдельного Node модуля. Но если вы хотите использовать его в большом проекте с существующей кодовой базой и отключить некоторые правила, используйте ESLint predefined config. Я например отключил no-mixed-operators и import/no-webpack-loader-syntax.
Вы скорее всего, слышали об изменениях в ES2015+ (или ES6, ES7…). Вот несколько, без которых я больше не могу жить:
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 }
Вокруг данной темы точится много споров. Но не смотря на это, функциональное программирование набирает популярность и не только в JavaScript. В чем причина? Оно делает код более предсказуемым, безопасным и гораздо более поддерживаемым. Вот вам несколько простых советов:
Для начала перестаньте использовать for для циклов. В большинстве случаев они вам не нужны. Доказательство:
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, {})
Здесь мы определили три функции, названия которых указывают на то, что эти функции делают.
Второй совет: создавайте локальные функции (даже в существующих функциях) подобрав для них грамотные названия, вы можете документировать код без комментариев!
Обратите внимание, что три локальные функции не изменяют контекст, в котором они выполняются. Не меняют внешние переменные, не обращаются к внешним сервисам… В функциональном программировании они называются pure (чистыми) функциями. У них есть большие преимущества:
Исходя из вышесказанного, мой третий совет: используйте такие функции как можно чаще!
И в заключение самый важный совет, который я могу вам дать: всегда занимайтесь рефакторингом! Попробуйте улучшить модуль, который вы написали год назад. Попробуйте заменить var на const, используйте стрелочные функции или async / await чтобы упростить код… Всегда приятно работать с простым и понятным кодом.
Рекомендуем к прочтению: Upwork: вывод средств. Как вывести средства с международной биржи труда в России и Украине?
Изучайте веб разработку, с помощью онлайн уроков, каждый понедельник и среду в 20:00, на канале: Быстрый старт в веб-разработке (на странице проекта доступный записи всех уроков).
We’re thrilled to announce an exciting opportunity for you to win not one but two…
Acquiring practical skills is crucial for career advancement and personal growth. Education Ecosystem stands out…
Artificial Intelligence (AI) has been making significant strides in various industries, and the software development…
Another week to bring you the top yield platforms for three of the most prominent…
If you hold a large volume of LEDU tokens above 1 million units and wish…
It’s another week and like always we have to explore the top yield platforms for…