От автора: я думаю, вы веб-разработчик. Надеюсь, вы преуспеваете, и у вас отличная работа, может быть, вы даже ведете свой бизнес или работаете в качестве фрилансера. Возможно, вы только начинаете работать в качестве веб-разработчика, возможно, вы уже давно работаете. Как бы вам ни было комфортно работать с JavaScript, всегда полезно освежить в памяти некоторые темы. Вот 10 вещей, которые вам обязательно нужно изучить, прежде чем вы сможете называть себя — web-мастер JavaScript.
1. Поток управления
Вероятно, это самая основная тема в данном списке. Одна из самых важных вещей, возможно, самая важная. Если вы не знаете, как продолжить свой код, вам будет трудно. Знание входов и выходов основного потока управления, безусловно, необходимо.
if else — если вы этого не знаете, как вы раньше писали код?
switch — в основном это if else, только более красноречиво, используйте его, как только у вас появится несколько разных случаев.
for — не повторяйтесь, это то, для чего нужны циклы. Кроме обычного цикла for весьма полезны for of и for in. Большим преимуществом циклов for является то, что они блокируются, поэтому вы можете использовать в них async await.
Расширенные условные обозначения. Использование тернарных и логических операторов может сделать вашу жизнь намного легче, особенно когда вы пытаетесь сделать что-то встроенное, что означает, что вы не хотите сохранять значения, чтобы использовать их позже. Пример:
// тернарное условие
console.log(new Date().getHours() < 12 ? 'Good Morning!' : 'Time for a siesta')
// логический оператор
const isJsMaster = prompt('Are you a JavaScript master?') === 'true'
console.log(isJsMaster && 'proficient coder')2. Обработка ошибок
Мне потребовалось на это время. Не имеет значения, работаете ли вы с front-end или back-end, в первый год или около того, вы, вероятно, по умолчанию будете использовать console.log или, возможно, console.error для «обработки» ошибок. Чтобы писать хорошие приложения, вам обязательно нужно это изменить и заменить свои логи на обработку ошибок. Вы можете научиться, как создать собственный конструктор ошибок и как правильно их перехватывать, а также отображать пользователю, в чем заключается проблема.
3. Модели данных
Вам нужно решить, где группировать определенные блоки информации, а где их разделять. Это относится не только к построению моделей баз данных, но также к параметрам функций и объектам или переменным. Пример:
const calcShape = (width, height, depth, color, angle) => {...}
const calcShape = ({width, height, depth, color, angle}) => {...}4. Асинхронность
Это очень важный аспект JavaScript, либо вы извлекаете данные из back-end, либо обрабатываете запросы асинхронно на самом сервере. Почти во всех случаях, вы столкнетесь с асинхронностью. Если вы не знаете, что это такое, вы, вероятно, столкнетесь со странной ошибкой, которую будете пытаться исправить в течение нескольких часов. Если вы знаете, что это такое, но вы не знаете, что с этим делать, вы попадете в ад обратных вызовов. Лучший подход заключается в использовании в приложениях promise и / или async await.
5. Манипуляция DOM
Это интересная тема. Как правило, разработчики это немного упускают это из виду. Возможно, вы изучили jQuery и никогда не ощущали необходимость повысить некоторые навыки манипуляции с DOM, возможно, вы просто используете frontend-фреймворк, где редко требуется манипуляция DOM. Однако, я думаю, что это важная часть понимания JavaScript, по крайней мере, для front-end. Знание работы DOM и доступа к элементам, дает вам глубокое понимание того, как работают веб-сайты. Кроме того, возможно, настанет момент, в который вам придется выполнять некоторые пользовательские манипуляции с DOM, даже если вы используете современные front-end фреймворки, и вы определенно не хотите, чтобы jQuery в вашем package.json просто обращался к элементу.
6. Node.js / Express
Даже будучи front-end разработчиком, вы должны знать основы node.js. В идеале вы также должны знать, как развернуть простой сервер Express и добавить некоторые маршруты или изменить существующие. JavaScript отлично подходит для написания скриптов, которые помогут вам автоматизировать множество задач. Поэтому, зная, как читать файлы, работать с файловыми путями или буферами, вы получите хороший набор инструментов для сборки чего-либо.
7. Функциональный подход
Существует вечная дискуссия о функциональном и объектно-ориентированном программировании. Вы, вероятно, можете достичь того же самого с помощью обоих. В JavaScript это еще проще, вам доступны оба подхода. Такие библиотеки, как lodash, дают вам действительно отличный набор инструментов для создания приложений с использованием функционального подхода. В настоящее время нет необходимости использовать внешние библиотеки. В официальной спецификации JavaScript реализовано множество наиболее важных функций. Вы определенно должны знать, как использовать map, reduce, filter, forEach и find.
8. Объектно-ориентированный подход
Подобно функциональному подходу, вам также нужно познакомиться с объектно-ориентированным JavaScript. Я долго пренебрегал этой частью и использовал обходные пути, но иногда лучше использовать объекты / классы и экземпляры для реализации определенных функций. Классы широко используются в React, MobX или пользовательских конструкторах.
9. Front-end фреймворки
Большая тройка — React.js, Angular и Vue.js. Если вы в настоящее время ищете работу, у вас почти всегда в условиях к вакансии будет один из вышеперечисленных. Даже с учетом того, что они меняются довольно быстро, важно понимать общую концепцию этих инструментов, чтобы разобраться, как работают приложения. Кроме того, с их помощью писать приложения так просто. Если вы не решили, в какой поезд вы хотите запрыгнуть, мое предложение — React.js. Я работал с ним последние пару лет и не пожалел о своем решении.
10. Объединение / Транспиляция
К сожалению, это значительная часть веб-разработки. С одной стороны, я не должен сожалеть об этом, потому что здорово писать код со всеми новейшими функциями. С другой — причина, по которой я это говорю, заключается в том, что мы всегда должны иметь в виду — есть старые браузеры, которые могут не поддерживать эти функции, поэтому мы должны транспилировать наш код во что-то еще, что понимают старые браузеры. Если вы работаете с node.js, у вас, вероятно, будет меньше возможностей для транспиляции кода. Де-факто стандартом транспиляции является babel.js, поэтому ознакомьтесь с ним. Что касается объединения кода и связывания всего, у вас есть несколько вариантов. Webpack был доминирующим игроком в течение длительного времени. Некоторое время назад из ниоткуда выскочил parcel, и теперь он является моим предпочтительным решением, поскольку этот инструмент очень эффективен и прост в настройке, хотя и не идеален.
БОНУС: Регулярные выражения
Это не относится только к JavaScript, но невероятно полезно во многих случаях. Знакомству с синтаксисом регулярных выражений определенно должно уделяться некоторое время, и запомнить все варианты невозможно.
Обновление: тестирование
Как отметил Пол Камма, тестирование является действительно важной частью разработки программного обеспечения, JavaScript не является исключением. При написании кода вы (надеюсь) тестируете его, прежде чем вводить эту функцию, даже если она может быть простой. Лучший подход — использование автоматических тестов, различных типов тестов. Это модульное тестирование, сквозное тестирование, нагрузочное тестирование, тесты безопасности или frontend-тесты (например, монтируется ли компонент или нет). Существует много разных сред тестирования: enzyme, jasmine, mocha, chai и т. д. Моим любимым решением на данный момент является ava.js, поэтому попробуйте его, если вы пока не работали с автоматическими тестами.
Надеюсь, вы уже изучили все перечисленные выше темы. Если нет, приступайте к работе и постарайтесь стать мастером в JavaScript! Это определенно стоит того. Помните, когда речь идет о кодировании, практика — это все, поэтому, даже если вы не знакомы с этими понятиями или знакомы, но не знаете, как их применять, это произойдет со временем.
Что вы думаете о данном списке? Чего-то не хватает? Как вы думаете, другие вопросы важнее при кодировании? Дай мне знать в комментариях!
Автор: Lukas Gisder-Dubé
Источник: https://levelup.gitconnected.com/
Редакция: Команда webformyself.