Abr@X@bra.ru
9 хитростей для разработчиков JavaScript в 2019 году
9 хитростей для разработчиков JavaScript в 2019 году

9 хитростей для разработчиков JavaScript в 2019 году

17.01.2019
266
Еще один год закончился, и JavaScript постоянно меняется. Тем не менее, есть несколько советов, которые помогут вам написать чистый и эффективный код, который масштабируется даже в 2019 году. Ниже приведен список из 9 практических советов, которые сделают вас лучшим JS разработчиком.

1. Использования async / await

Не используйте callback вызовы, если это не является абсолютно необходимым, например, требуется библиотекой или по соображениям производительности. Promises хороши, но их немного неудобно использовать, если ваша код становится большим. Моим подходящим решением в настоящее время является async / await, что делает чтение и улучшение моего кода намного чище. Фактически, вы можете ожидать каждое promises в JavaScript, если библиотека, которую вы используете, возвращает promises, просто подождите его. На самом деле, async / await - это просто синтаксический сахар. Чтобы ваш код работал, вам нужно только добавить ключевое слово async перед функцией.

Вот пример:



Обратите внимание, что await на верхнем уровне невозможно, вы можете вызвать только асинхронную функцию.

async / await был представлен в ES2017, поэтому убедитесь, что ваш код его поддерживает.

2. асинхронный поток управления

Часто бывает необходимо извлечь несколько наборов данных и сделать что-то для каждого из них или выполнить задачу после того, как все асинхронные вызовы вернули значение.

for…of

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

Вот пример:



Эти примеры на самом деле работают, не стесняйтесь копировать и вставлять его в свой код.

Promise.all

Что если вы хотите получить всех покемонов параллельно? Просто используйте Promise.all:


for ... of и Promise.all были введены в ES6 +, так что не забудьте проверить свой код.

3. Деструктурирование и значения по умолчанию

Давайте вернемся к нашему предыдущему примеру, где мы делаем следующее:


Есть более простой способ сделать это, мы можем использовать деструктуризацию, чтобы просто взять одно или несколько значений из объекта или массива.

Вот пример:


Мы сохранили одну строку кода! Ура!

Вы также можете переименовать вашу переменную:



Еще один приятный трюк - дать значения по умолчанию при деструктурировании. Это гарантирует, что вы никогда не получите неопределенное значение, и вам не нужно проверять переменные вручную.


Эти приемы также можно использовать с параметрами функции, например:

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

Значения деструктуризации и значения по умолчанию были введены в ES6, поэтому убедитесь, что ваш код поддерживается.

4. Истинные и ложные значения

При использовании значений по умолчанию некоторые проверки существующих значений уйдут в прошлое. Тем не менее, очень приятно знать, что вы можете работать с истинными и ложными значениями. Это улучшит ваш код.

Часто я вижу, что делают что-то вроде:


Все это можно сократить до:


Чтобы по-настоящему воспользоваться этими утверждениями, вы должны понять, что такое истинные и ложные значения.

Вот небольшой обзор:

False

  • строки длиной 0

  • число 0

  • false

  • undefined

  • null

  • NaN

True

  • пустые массивы

  • пустые объекты

  • и тд...

Обратите внимание, что при проверке истинности / ложных значений нет явного сравнения, что приравнивается к проверке с двойными знаками равенства ==, а не с тремя ===. В целом, он ведет себя так же, но есть определенные ситуации, в которых вы можете получить ошибку. Для меня это произошло в основном с проверкой на 0.

5. Логические и троичные операторы

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

Логические операторы

Логические операторы в основном объединяют два выражения и возвращают либо true, false, либо совпадающее значение и представлены как &&, что означает «и», а также ||, что означает «или».

Давайте посмотрим:


Мы можем комбинировать логические операторы с нашими знаниями, истинными и ложными значениями. При использовании логических операторов применяются следующие правила:

  • &&: Возвращается первое ложное значение, если его нет, возвращается последнее истинное значение.

  • ||: Возвращает первое истинное значение, если его нет, операция будет равна последнему ложному значению.



Тернарный оператор

Тернарный оператор очень похож на логический оператор, но состоит из трех частей:

  • Сравнение, которое будет либо ложным, либо правдивым

  • Первое возвращаемое значение, если сравнение верное

  • Второе возвращаемое значение, если сравнение неверно

Вот пример:


6. Необязательная цепочка

Была ли у вас когда-нибудь проблема доступа к вложенному свойству объекта, даже не зная, существует ли объект или одно из его под-свойств? 

Пример:



Это утомительно и есть лучший способ. Это называется необязательной цепочкой и работает следующим образом:


Я думаю, что это красноречивый способ проверки вложенных свойств и делает код более понятным.

В настоящее время необязательная цепочка не является частью официальной спецификации, но находится на этапе 1 в качестве экспериментальной функции. Чтобы использовать его, вы должны добавить @babel/plugin-offer-Additional-chaining.

7. Свойства классов и привязка

Связывание функций в JavaScript - обычная задача. С появлениям стрелочный функций в спецификации ES6 у нас теперь есть способ автоматически связывать функции с контекстом объявления - очень полезный и широко используемый среди разработчиков JavaScript.

Когда классы были впервые представлены, вы больше не могли использовать стрелочные функции, потому что методы класса должны быть объявлены определенным образом. Нам нужно было связывать функции в другом месте, например, в конструкторе (наилучшая практика с React.js). Меня всегда беспокоил рабочий процесс: сначала определяли методы класса, а затем связывали их, через некоторое время это просто кажется смешным. С синтаксисом свойства класса мы можем снова использовать стрелочные функции и получить преимущества автоматического связывания. Стрелочный функции теперь могут использоваться внутри класса.

Вот пример с привязкой:



В настоящее время свойства класса не являются частью официальной спецификации, но находятся на стадии 3 в качестве экспериментальной функции. Вы должны добавить @babel/plugin-offer-class-properties в ваш babelrc, чтобы использовать его.

8. Используйте parceljs

Как разработчик внешнего интерфейса, вы почти наверняка сталкивались с пакетированием и переносом кода. Фактически стандартом для этого был webpack в течение длительного времени. Я начел использовать webpack с версии 1, что было болью тогда. Работая со всеми вариантами конфигурации, я потратил много часов, пытаясь настроить и запустить его. Если бы я был в состоянии сделать это, я бы не трогал его снова, чтобы ничего не сломать. Пару месяцев назад мне попался parceljs, который был мгновенным облегчением. Он делает практически все за вас из коробки, но при этом дает вам возможность изменить его, если это необходимо. Он также поддерживает систему плагинов, похожую на webpack или babel. Если вы не знаете про parceljs, я определенно советую вам с ним познакомиться!

9. Пишите больше кода самостоятельно

Это хорошая тема. У меня было много разных дискуссий по этому поводу. Даже для CSS многие люди склонны использовать библиотеку компонентов. Что касается JavaScript, я все еще вижу людей, использующих jQuery. Я настоятельно рекомендую писать больше кода самостоятельно, а не тупо устанавливать пакеты npm. Когда речь идет о больших библиотеках (или даже фреймворках), где их собирает целая команда, например для moment.js или response-datepicker, не имеет смысла пытаться писать это самостоятельно. Тем не менее, вы можете переопределить большую часть кода, который вы будете использовать сами. Это даст вам три основных преимущества:

  • Вы точно знаете, что происходит в вашем коде

  • В какой-то момент вы начнете действительно понимать программирование и как все работает под капотом

В начале проще использовать пакет npm. Это займет больше времени, чтобы реализовать некоторые функции самостоятельно. Но что, если пакет на самом деле не работает должным образом, и вам нужно сменить его на другой, потратив еще больше времени на чтение того, как настроен их API. Реализуя его самостоятельно, вы можете адаптировать его на сто процентов к вашему сценарию использования.




JavaScript, ES6
Читайте также:
Nuxt.js: 28 килобайт пользы для веб-разработчика

Nuxt.js: 28 килобайт пользы для веб-разработчика

В этом посте я расскажу, что такое Nuxt.js и про «киллер фичу» этого микрофреймворка и где он может пригодиться.
Читать
GreenSock для начинающих: учебное пособие по веб-анимации (часть 2): GSAP’s Timeline

GreenSock для начинающих: учебное пособие по веб-анимации (часть 2): GSAP’s Timeline

Цель этой второй части GreenSock для начинающих - познакомить вас с TimelineMax от GreenSock.
Читать
GreenSock для начинающих: учебное пособие по веб-анимации (часть 1)

GreenSock для начинающих: учебное пособие по веб-анимации (часть 1)

Моя цель в этой статье - дать вам подробное введение в GreenSock, также известную как GSAP (GreenSock Animation Plat...
Читать