29 Июня 2018 JavaScript Перевод

Изучите эти основные концепции JavaScript всего за несколько минут

img

Иногда вы просто хотите научиться чему-то быстро. Но чтение всеобъемлющих статей, описывающих конкретные концепции JavaScript, может привести к когнитивной перегрузке. Цель этой публикации - описать несколько общих понятий как можно проще:

  • Краткое описание
  • Почему это актуально
  • Пример практического кода (ES5 и ES6 со стрелочными функциями).

Всегда полезно иметь общие знания при работе с экосистемой JS. Вы будете знать, как всё работает и взаимодействует, а также легко учиться и быстрее совершенствоваться.

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

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

Концепции JS, на которые мы будем смотреть:

  1. Scope
  2. IIFE
  3. MVC
  4. Async/await
  5. Closure
  6. Callback

1. Scope – область видимости

Scope – простой ящик с границами. В JS есть два типа границ: локальная и глобальная, также называемый внутренняя и внешняя.

Локальная означает, что у вас есть доступ ко всему, что находится внутри границ (внутри ящика), а глобальная – всё за пределами границ (вне ящика).

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

Почему это актуально?

  • Разделяет логику
  • Сокращает фокус
  • Улучшает читаемость

Пример

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

ES5

image

ES6

image

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

2. IIFE - выражение с немедленной вызывной функцией

IIFE (Immediately Invoked Function Expression), означает, что функция «немедленно вызывается» при ее создании. Перед ES6+ были представлены классы и методы для поддержки парадигмы объектно-ориентированного программирования (ООП), общим путём была имитация IIFE как имени класса и вызова функций как методов, завёрнутых в возвращаемый тип.

Почему это актуально?

  • Сразу же выполняет код
  • Избегается загрязнение глобальной области видимости
  • Поддержка асинхронной структуры
  • Улучшается читаемость (некоторые могут утверждать обратное)

Пример

За последние несколько лет технология сильно изменилась. Представим, у вас есть возможность изменить цвет практически чего угодно – например вашего автомобиля. Давайте посмотрим на пример кода.

ES5

image

ES6

image

В приведенном выше примере мы обернули две функции с возвращаемым типом (changeColorToRed() и changeColorToBlack()). Это позволяет нам получить доступ к нескольким функциям и вызвать метод, который мы хотим.

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

3. MVC - «Модель-Представление-Контроллер»

Model-view-controller - это структура проектирования (*не язык программирования), которая позволяет отделить поведение внутри практической структуры. Почти 85% веб-приложений сегодня имеют такую ​​базовую структуру так или иначе. Существуют и другие типы структур проектирования, но это, безусловно, самый фундаментальный и простой в понимании шаблон.

Почему это актуально?

  • Долгосрочная масштабируемость и ремонтопригодность
  • Легко улучшается, обновляется и отлаживается (на основе личного опыта)
  • Простота настройки
  • Обеспечивает структуру и обзор

Пример

Давайте рассмотрим краткий пример структуры проектирования MVC.

ES5

image

ES6

image

Как показано в примере выше, мы обычно разделяем view, model и controller в отдельных папках или файлах с точки зрения лучших практик, но просто для иллюстрации концепции мы поместили все это в один файл. Задачи структуры проекта - упростить процесс развития и поддерживать устойчивую совместную среду.

4. Async/await

Остановитесь и подождите, пока что-то не будет выполнено. Такая конструкция обеспечивает возможность поддерживать асинхронную обработку более синхронно. Например, вам нужно проверить правильность пароля пользователя (сравнить с тем, что существует на сервере), прежде чем позволить пользователю войти в систему. Или, возможно, вы выполнили запрос REST API и хотите, чтобы данные полностью загрузились, прежде чем отправлять это на представление.

Почему это актуально?

  • Синхронные возможности
  • Управляет поведением
  • Уменьшает «callback hell»

Пример

Предположим, вы хотите, чтобы все пользователи использовали API-интерфейс и хотите отображать результаты в формате JSON.

ES5

image

ES6

image

Чтобы использовать await, необходимо обернуть его async функцией, чтобы уведомить JS о том, что мы работаем с promises. Как показано в примере, мы ожидаем две вещи: response и users. Прежде чем мы сможем преобразовать response в формат JSON, нам нужно убедиться, что мы получили response, иначе мы можем завершить преобразование response, которого еще нет, что скорее всего вызовет ошибку.

5. Closure – замыкание

Замыкание - это просто функция внутри другой функции. Оно используется, когда вы хотите расширить поведение, такое как передача переменных, методов или массивов от внешней функции до внутренней функции. Также можно получить доступ к контексту, определённому во внешней функции, из внутренней функции, но не в другую сторону (помните о принципах области видимости, о которых мы говорили выше).

Почему это актуально?

  • Расширяет поведение
  • Полезно при работе с событиями

Пример

Предположим, вы работаете инженером-разработчиком в Volvo, и им нужна функция, которая просто печатает название автомобиля.

ES5

image

ES6

image

Функция showName() является замыканием, поскольку она расширяет поведение функции showInfo(), а также имеет доступ к переменной carType.

6. Callback

Callback - это функция, выполняемая после выполнения другой функции. Он также называется обратным вызовом. В мире JavaScript, функция, ожидающая выполнения другой функции или возврата значения (массива или объекта), называется функцией обратного вызова. Callback - это способ сделать асинхронные операции более синхронными (последовательный порядок).

Почему это актуально?

  • Ожидает выполнения события
  • Обеспечивает синхронные возможности
  • Практический способ цепной функциональности (если A завершен, выполните B и так далее)
  • Обеспечивает структуру кода и контроль
  • Имейте в виду callback-hell. Это в основном означает, что у вас есть рекурсивная структура обратных вызовов (обратные вызовы в обратных вызовах в обратных вызовах и так далее). Это непрактично.

Пример

Скажем, Elon Musk в SpaceX нуждается в функциональности, которая будет запускать 27 двигателей Merlin Falcon Heavy (самая мощная ракета в мире) при нажатии кнопки.

ES5

image

ES6

image

Обратите внимание, что код ожидает события (нажать на кнопку) перед выполнением действия (запустить двигатели). Короче говоря, мы передаем функцию fireUpEngines() в качестве аргумента (обратного вызова) функции pressButton(). Когда пользователь нажимает кнопку, он запускает двигатели.

Итак, вы познакомились со всем этим! Некоторые из самых популярных понятий JavaScript объясняются простыми примерами. Надеюсь, эта публикация помогла вам узнать о JavaScript немного больше.

Оригинал: Learn these core JavaScript concepts in just a few minutes