Автор оригинала: Dler Ari.
Иногда вы просто хотите что-то узнать. И чтение через комплексные статьи, которые описывают определенные концепции JavaScript, могут привести к познавательной перегрузке. Цель этой статьи состоит в том, чтобы описать несколько распространенных концепций как можно просто с:
- Краткое описание
- Почему это актуально
- Пример практического кода (ES5/ES6 со стрелками функций).
Всегда хорошая идея иметь общие знания при работе с экосистемой JS. Вы будете знать, как все работает и взаимодействует, и легко учиться и улучшать вещи быстрее.
Эти концепции JS выбираются на основе популярности и релевантности, которую я видел среди сообщества. Если вы хотите узнать концепцию, которая не является частью этой статьи, оставьте комментарий, и я добавлю его в ближайшее время.
Повысить ваш Навыки JavaScript с этими полезными методами JS Отказ
Концепции JS мы рассмотрим:
- Сфера
- Idife.
- MVC
- Async/a ждать
- Закрытие
- Перезвоните
1. Сфера
Область применения – это просто коробка с границами. Существует два типа границ в JS: Local и Global, также называемые внутренним и внешним.
Local означает, что у вас есть доступ ко всему в границах (внутри коробки), в то время как Global – это все за пределами границ (за пределами коробки).
Эти термины используются много, когда мы говорим о классах, функциях и методах. Он обеспечивает возможность определять, что является доступным (видимым) к текущему контексту.
Почему это актуально?
- Разделяет логику
- Сужает фокус
- Улучшает читаемость
Пример
Предположим, вы создаете функцию и хотите получить доступ к переменной, определенной в глобальном объеме.
Es5.
ES6
Как показано в примере выше, функция Shoineame () Имеет доступ ко всему, что определяется в пределах его границ (локально), а также снаружи (глобально). Помните, что глобальный объем не может получить доступ к переменным, определенным в локальном объеме, потому что он заключен из внешнего мира, за исключением того, что если вы его вернетесь.
2. Idife.
IIFE (немедленно вызванное выражением функции), так как имя имени означает, что функция «немедленно» Вызывается », когда он создан. До представленных классов/методов ES6 ++ классов/методы для поддержки парадигмы объектно-ориентированной программирования (OOP), распространенный способ заключался в том, чтобы имитировать IFIFE в качестве имени класса, и вызвать функции как методы, завернутые в Возвращение тип.
Почему это актуально?
- Немедленно выполняет код код
- Избегает глобального масштаба от загрязнения
- Поддерживает асинхронную структуру
- Улучшает читабельность (некоторые могут спорить обратное)
Пример
Технологии сильно изменились за последние несколько лет. Теперь, например, у вас есть возможность менять цвет практически в чем-либо – как ваша машина. Давайте посмотрим на примере кода.
Es5.
ES6
В приведенном выше примере мы завернули две функции в Возвращение Тип ( ChangeColortored () & ChangeColortoBlack () ). Это позволяет нам получить доступ к нескольким функциям и вызвать метод, который мы хотим.
Короче говоря, мы впервые вызовели Автомобиль (функциональное выражение), чтобы получить доступ к тому, что внутри. Тогда мы можем использовать Отказ нотация, чтобы вызвать функцию, которая определена в Возвращение тип. Этот подход аналогичен структуре имеющих классов/методов, в которых мы впервые вызовите имя класса, прежде чем мы сможем вызвать имя метода. Таким образом, вы можете написать чистый, ремонтерный и многоразовый код.
3. MVC
Model-View-Controller – это дизайн-каркас (* не язык программирования), который позволяет нам отделить поведение в практическую реальную структуру. Почти 85% веб-приложений сегодня имеют этот базовый паттерн так или иначе. Существуют и другие типы дизайнерских рамок, но это, безусловно, самый фундаментальный и простой, чтобы понять шаблон.
Почему это актуально?
- Долгосрочная масштабируемость и ремонтопригодность
- Легко улучшить, обновлять и отлаживать (на основе личного опыта)
- Легко настроить
- Обеспечивает структуру и обзор
Пример
Давайте посмотрим на короткий пример дизайна MVC.
Es5.
ES6
Как показано в примере выше, мы обычно разделили Вид , модель и контроллер В отдельных папках/файлах с точки зрения передовой практики, но просто чтобы проиллюстрировать концепцию, мы поставили все это в один файл. Цели дизайна-структуры должны упростить процесс разработки и поддержать устойчивую совместную среду.
4. Async/a ждать
Стоп и ждать, пока что-то не решено. Он обеспечивает способ поддерживать асинхронную обработку в более синхронной моде. Например, вам нужно проверить, правильно ли пароль пользователя (сравнить с тем, что существует на сервере), прежде чем разрешить пользователю ввести систему. Или, может быть, вы выполнили запрос на API для отдыха, и вы хотите, чтобы данные были полностью загружены, прежде чем нажать на его вид.
Почему это актуально?
- Синхронные возможности
- Контролирует поведение
- Уменьшает «обратный ад»
Пример
Давайте предположим, что вы хотите получить всех пользователей из Отдых API и показать результаты в формате JSON.
Es5.
ES6
Для того, чтобы использовать Ждите мы должны обернуть его внутри async Функция, чтобы уведомить JS, с которыми мы работаем с обещаниями. Как показано в примере, мы (а) ждем двух вещей: ответ и Пользователи Отказ Прежде чем мы сможем преобразовать ответ к формату JSON, нам нужно убедиться, что у нас есть ответ в противном случае мы можем в конечном итоге конвертировать ответ Это еще не там, что, скорее всего, будет предлагать ошибку.
5. Закрытие
Закрытие – это просто функция внутри другой функции. Используется, когда вы хотите расширить поведение, такие как Pass переменные, методы или массивы из внешней функции для внутренней функции. Мы также можем получить доступ к контексту, определенному во внешней функции от внутренней функции, но не наоборот (запомните принципы объема, которые мы говорили выше).
Почему это актуально?
- Расширяет поведение
- Полезно при работе с событиями
Пример
Предположим, вы работаете в качестве инженера для разработки для Volvo, и им нужна функция, которая просто печатает название автомобиля.
Es5.
ES6
Функция Shoineame () это закрытие, потому что он расширяет поведение функции ShowInfo () , а также имеет доступ к переменной Cartype Отказ
6. Перезвоните
Обратный вызов – это функция, выполняющая после выполнения другой функции. Он также называется звонком. В мире JavaScript функция, которая ждет другая функции для выполнения или возврата значения (массив или объект), называется обратным вызовом. Обратный вызов – это способ сделать асинхронные операции более синхронно (последовательный порядок).
Почему это актуально?
- Ждет события для выполнения
- Обеспечивает синхронные возможности
- Практический способ цепи функциональности (Если A завершено, то выполнить B, и так далее)
- Обеспечивает структуру и контроль кода
- Будьте в курсе, вы, возможно, слышали о обратный ада. Он в основном означает, что у вас есть рекурсивная структура обратных вызовов (обратные вызовы в обратных вызовах в обратных вызовах в пределах обратных вызовов и т. Д.). Это не практично Отказ
Пример
Допустим, Elon Musk в SpaceX нуждается в функциональности, которая уводит двигатели Falcon Helly’s 27 Merlin (самая мощная ракета в мире в 2 раза), когда кнопка нажата.
Es5.
ES6
Обратите внимание, что он ждет, чтобы произойти событие (кнопка щелчка) перед выполнением действия (выключить двигатели). Вкратце, мы проезжаем FireuppeNgines () Функция как аргумент (обратный вызов) к Нажмитеbutton () функция. Когда пользователь нажимает кнопку, он запускает двигатели.
Так что там у вас есть! Некоторые из самых популярных концепций JS просто объяснили примерами. Я надеюсь, что эти концепции помогли вам понять JS немного больше и как это работает.
Вы можете найти меня на среднем, где я публикую еженедельно. Или вы можете следовать за мной на Twitter Где я публикую соответствующие советы по разработке веб-разработки вместе с личными историями.
Снимание Если вам понравилась эта статья и хочешь больше, пожалуйста, хлопайте и поделитесь с друзьями, это хорошо карма
Оригинал: “https://www.freecodecamp.org/news/learn-these-core-javascript-concepts-in-just-a-few-minutes-f7a16f42c1b0/”