Себастьян Кастель, JavaScript-разработчик из Франции, поделился мыслями о том, как должен выглядеть ваш JS-код в 2017 году. Редакция techrocks.ru публикует адаптированный перевод материала.
Помните те далекие времена, когда JavaScript был языком, который использовался только для того, чтобы “оживить” страницы сайта? Те дни уже в прошлом — все языки программирования развиваются, и, следственно, должны меняться методы их использования.
Я собрал список некоторых хороших подходов, которые помогут сделать ваш JavaScript код простым, поддерживаемым и современным.
Используйте линтер для форматирования кода
Хорошей практикой сегодня является использование линтера. Он используется для проверки, соблюдается ли в вашем коде единый стиль. Это позволит сделать код консистентным во всех ваших .js файлах. Особенно полезно использовать линтер в командах — это позволит сделать стиль кода единым среди всех разработчиков.
Более того, линтер может вносить исправления в ваш код, где это возможно. ESLint, например, делает это очень хорошо (используйте настройку —fix) и он отлично интегрируется со всеми популярными IDE.
В качестве альтернативы можете использовать Prettier, который, в отличие от ESLint, большее внимание уделяет форматированию кода. Но в целом разница между ними небольшая.
Следующее правило поможет вам выбрать правила, которые будут использоваться линтером:
Используйте современные правила для вашего линтера
Если вы не знаете, какой набор правил использовать для вашего кода, берите StandardJS. Это очень строгий линтер, который не позволит вам отступить от правил, но каждое из них одобрено сообществом JS разработчиков. Вот несколько примеров:
- Используйте 2 пробела для табуляции
- Не используйте точки с запятой (сначала мне казалось это очень странным, но через несколько дней я привык и уже просто не могу писать по-старому)
- Пробелы после ключевых слов (например if) и фигурных скобок
- И многие другие
StandardJS может устанавливаться в виде отдельного Node модуля. Если вы хотите использовать его уже на существующем проекте с большой кодовой базой и отключить некоторые правила — используйте ESLint predefined config. Например, я отключил правила no-mixed-operators и import/no-webpack-loader-syntax.
Используйте новые фишки ES2015+
Если вы разрабатываете на JavaScript, то, скорее всего, слышали об изменениях в ES2015+ (или ES6, ES7…). Вот несколько, без которых я больше не могу жить 🙂
- Arrow functions: новый синтаксис для функций в JS ( x => x*2 )
- Классы: перестаньте использовать прототипы, классы гораздо круче 🙂
- Новые методы для работы с массивами и объектами
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 }]
more and more people began to pursue fashional style https://www.vapespen.fr/ meilleure cigarette électronique. we offer the best and cheap swiss made fakerolex is. foro replicas relojes de lujo maquinaria suiza how to spot watches. https://www.bananaicevape.com looks exactly as a genuine. best swiss golden-state-warriors.ru with best price on sale. each of the replica iwc for sale is a master masterpiece. wholesale all brand 1:1 cheap footballjerseys.ru.
// 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, {})
Мы определили 3 функции названия которых указывают на то, что эти функции делают.
Во-вторых, создавайте локальные функции (даже внутри существующих) — подбирая для них грамотные названия, вы можете документировать ваш код без комментариев!
Обратите внимание, что эти три локальные функции не меняют контекст, в котором выполняются. Не меняют внешние переменные, не обращаются к внешним сервисам… В функциональном программировании такие функции называют pure functions (чистые функции). Их преимущества:
Их легко тестировать, потому что одни и те же входные данные всегда будут давать один и тот же результат, сколько раз бы функция не вызывалась;
Они гарантированно дадут один и тот же результат вне зависимости от состояния приложения;
Они не меняют состояние приложения.
Поэтому мой третий совет: используйте такие функции как можно чаще!
Несколько советов в завершение
- Привыкайте работать с асинхронным кодом, чаще используйте промисы, посмотрите на observales в RxJS (вот отличный туториал по функциональному реактивному программированию)
- Пишите тесты! Звучит банально, но я знаю кучу проектов с кодом, не покрытым тестами. В конце концов, тестирование JavaScript не так трудно, как кажется.
- Используйте последние фишки языка: например, прекратите писать arr.indexOf(elem) !== -1. Замените это arr.includes(elem).
- Читайте больше технических статей: JavaScript сабреддит — отличное место, где можно узнать много нового о языке.
И, главное — всегда занимайтесь рефакторингом! Улучшайте ваш старый код. Найдите время, чтобы заменить var на const, перепишите функции с использованием нового синтаксиса. Это позволит упростить код — а работать с простым и понятным кодом всегда приятнее 🙂