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

1656589939 izuchite eti osnovnye konczepczii javascript vsego za neskolko minut

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

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

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

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

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

Развивайте свои навыки JavaScript с помощью этих полезных методов JS.

Концепция JS, которые мы рассмотрим:

  1. Область применения
  2. IIFE
  3. MVC
  4. Асинхронно/ждите
  5. Закрытие
  6. Обратный звонок

1. Сфера применения

Область – это просто коробка с границами. JS имеет два типа границ: локальные и глобальные, которые также называют внутренними и внешними.

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

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

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

  • Разделяет логику
  • Сужающий фокус
  • Улучшает читабельность

Пример

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

ES5

FH-wWl6GjJqSkNku4tZBKaAGkFjDdwZhbICJ
Локальная/глобальная область действия JavaScript

ES6

ismFUwaw2zTkQCszmFA7xTTzR7HLWZKYnBSk
Локальная/глобальная область видимости JavaScript (функции стрелок)

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

2. IIFE

IIFE (выражение функции немедленного вызова), как следует из названия, означает, что функция «немедленно вызывается» при ее создании. До того, как ES6++ представил классы/методы для поддержки парадигмы объектно-ориентированного программирования (ООП), распространенным способом было имитировать IIFE как имя класса и вызывать функции как методы, завернутые в return типа.

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

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

Пример

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

ES5

skU76x-Bf186aOzCFNC5ztWMrORzDeWragCa
JavaScript IIFE (выражение немедленно вызываемой функции)

ES6

1mYlt8zccdCyawVfU2Wjyz9bIKkIY3b3L3sC
JavaScript IIFE (стрелковые функции)

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

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

3. MVC

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

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

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

Пример

Давайте рассмотрим краткий пример дизайн-фреймворка MVC.

ES5

IYMt5aQAhY2zLTisweqQjuo6OIHcsjDmZyBf
Модель-вид-контроллер дизайн-шаблон

ES6

m-NV7R88VET9ZkFZrG5IP7kljkBocaP8Avz4
Модель-вид-контроллер дизайн-шаблон (функции стрелок)

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

4. Асинхронный/ожидать

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

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

  • Синхронные возможности
  • Контролирует поведение
  • Уменьшает «ад обратного звонка»

Пример

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

ES5

8UAkzKiRlj-iOuRldGvPHvgOKwzvCg0eH2qJ
Обещания Async и Await

ES6

nN3ogGjjsQWjI-Cg4P-33hxyVI0hT8zP1r1p
Async и Await Promiss (функции со стрелками)

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

5. Закрытие

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

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

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

Пример

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

ES5

0IezBqbOGhYtOc69mqYc1s62a6iVlrjROYQh
Закрытие JavaScript

ES6

u5gESTsVRAEezcpzYBvYZs17HCrwjyYTkaZd
Закрытие JavaScript (функции стрелок)

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

6. Обратный звонок

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

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

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

Пример

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

ES5

от0SLg-QlbxG7OQ5CuiXGLxuZ9WXnfkLIsrB
Обратный вызов JavaScript

ES6

rPoRbhRgRbETZ5bKxo5tBJfVHehh784r5t99
Обратный вызов JavaScript (функции со стрелками)

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

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

Вы можете найти меня на Medium, где я еженедельно публикую. Или вы можете подписаться на меня в Twitter, где я публикую соответствующие советы и рекомендации по веб-разработке вместе с личными историями.

PS Если вам понравилась эта статья и вы хотите больше подобных, хлопайте ❤ и поделитесь с друзьями, это хорошая карма

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *