Вивчіть ці основні концепції JavaScript всього за кілька хвилин

Іноді просто хочеться чогось швидко навчитися. А читання вичерпних статей, що описують конкретні концепції JavaScript, може спричинити когнітивне перевантаження. Мета цієї статті полягає в тому, щоб якомога простіше описати кілька загальних понять за допомогою:

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

Завжди добре мати загальні знання під час роботи з екосистемою JS. Ви будете в курсі того, як речі працюють і взаємодіють, і легко навчитесь і покращите речі швидше.

Ці концепції JS вибираються на основі популярності та релевантності, яку я бачив серед спільноти. Якщо ви хочете вивчити концепцію, яка не є частиною цієї статті, залиште коментар, і я додаю її найближчим часом.

Якщо ви хочете стати кращим веб-розробником, відкрити власний бізнес, навчати інших або просто вдосконалити свої навички розробки, я щотижня публікую поради та підказки на останніх мовах веб-розробки.

Підвищте свої навички JavaScript за допомогою цих корисних методів JS .

Концепції JS, які ми розглянемо:

  1. Сфера дії
  2. IIFE
  3. MVC
  4. Асинхронізація / очікування
  5. Закриття
  6. Зворотній дзвінок

1. Сфера застосування

Сфера дії - це просто коробка з межами. У JS існує два типи кордонів: локальний та глобальний, які також називаються внутрішніми та зовнішніми.

Місцевий означає, що ви маєте доступ до всього, що знаходиться в межах (усередині коробки), тоді як глобальний - це все, що виходить за межі (поза рамкою).

Ці терміни часто використовуються, коли ми говоримо про класи, функції та методи. Він надає можливість визначити, що є доступним (видимим) для поточного контексту.

Чому це актуально?

  • Відокремлює логіку
  • Звужує фокус
  • Покращує читабельність

Приклад

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

ES5

ES6

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

2. IIFE

IIFE (Вираз функції з негайним викликом), оскільки в назві зазначено, що функція є “Негайно викликаною” при її створенні. До того, як ES6 ++ представив класи / методи для підтримки парадигми об'єктно-орієнтованого програмування (ООП), загальним способом було імітувати IIFE як ім'я класу та викликати функції як методи, загорнуті у returnтип.

Чому це актуально?

  • Негайно виконує код
  • Уникає загального забруднення
  • Підтримує асинхронну структуру
  • Покращує читабельність (деякі можуть стверджувати протилежне)

Приклад

Технологія досить сильно змінилася за останні кілька років. Тепер, наприклад, у вас є можливість змінювати колір майже будь-чого - наприклад, вашої машини. Подивимось приклад коду.

ES5

ES6

У наведеному вище прикладі ми обернули дві функції всередині returnтипу ( changeColorToRed()& changeColorToBlack()). Це дозволяє нам отримати доступ до декількох функцій і викликати потрібний нам метод.

Коротше кажучи, спочатку ми викликаємо car(вираз функції), щоб отримати доступ до того, що знаходиться всередині. Тоді ми можемо використовувати .позначення для виклику функції, яка визначена в межах returnтипу. Цей підхід схожий на структуру наявності класів / методів, де ми спочатку викликаємо ім'я класу, перш ніж ми можемо викликати ім'я методу. Таким чином, ви можете писати чистий, ремонтопридатний та багаторазовий код.

3. MVC

Model-view-controller - це структурна структура (* не мова програмування), яка дозволяє розділити поведінку на практичну реальну структуру. Майже 85% веб-програм сьогодні мають той чи інший спосіб. Існують і інші типи дизайнерських каркасів, але цей, безумовно, є найбільш фундаментальним і простим для розуміння зразком.

Чому це актуально?

  • Довгострокова масштабованість та ремонтопридатність
  • Простота вдосконалення, оновлення та налагодження (на основі особистого досвіду)
  • Простота налаштування
  • Надає структуру та огляд

Приклад

Давайте розглянемо короткий приклад конструкції MVC.

ES5

ES6

Як показано в наведеному вище прикладі, ми зазвичай ділимо view, modelі controllerв окремих папок / файлів з точки зору найкращої практики, але тільки для ілюстрації концепції, ми зберемо все в одному файлі. Завданнями проектної основи є спрощення процесу розробки та підтримка стійкого середовища співпраці.

4. Асинхронізація / очікування

Зупиніться і почекайте, поки щось вирішиться. Це забезпечує спосіб підтримувати асинхронну обробку більш синхронно. Наприклад, вам потрібно перевірити, чи правильний пароль користувача (порівняйте із тим, що існує на сервері), перш ніж дозволити користувачеві увійти в систему. Або, можливо, ви виконали запит REST API і хочете, щоб дані повністю завантажилися перед тим, як перенести їх у подання.

Чому це актуально?

  • Синхронні можливості
  • Контролює поведінку
  • Зменшує “пекло зворотного дзвінка”

Приклад

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

ES5

ES6

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

5. Закриття

Закриття - це просто функція всередині іншої функції. Він використовується, коли потрібно розширити поведінку, таку як передача змінних, методів або масивів із зовнішньої функції на внутрішню. Ми також можемо отримати доступ до контексту, визначеного у зовнішній функції, із внутрішньої функції, але не навпаки (згадайте принципи сфери, про які ми говорили вище).

Чому це актуально?

  • Розширює поведінку
  • Корисно при роботі з подіями

Приклад

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

ES5

ES6

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

6. Зворотній дзвінок

Зворотний виклик - це функція, яка виконується після виконання іншої функції. Це також називають повторним викликом. У світі JavaScript функція, яка чекає, поки інша функція виконає або поверне значення (масив або об'єкт), називається зворотним викликом. Зворотній дзвінок - це спосіб зробити асинхронні операції більш синхронними (послідовний порядок).

Чому це актуально?

  • Чекає виконання події
  • Забезпечує синхронні можливості
  • Практичний спосіб ланцюжка функціональних можливостей (якщо A завершено, то виконайте B тощо)
  • Забезпечує структуру коду та контроль
  • Майте на увазі, ви, можливо, чули про пекло зворотного дзвінка. Це в основному означає, що у вас є рекурсивна структура зворотних викликів (зворотні виклики всередині зворотних викликів у зворотних викликах тощо). Це не практично.

Приклад

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

ES5

ES6

Зверніть увагу, що він чекає настання події (клацання кнопки) перед виконанням дії (спрацювання двигунів). Коротше кажучи, ми передаємо fireUpEngines()функцію як аргумент (зворотний виклик) pressButton()функції. Коли користувач натискає кнопку, це спрацьовує двигуни.

Отже, у вас це є! Деякі найпопулярніші концепції JS пояснюються просто на прикладах. Сподіваюся, ці концепції допомогли вам трохи більше зрозуміти JS і як це працює.

Ви можете знайти мене в Medium, де я публікую щотижня. Або ви можете стежити за мною у Twitter, де я публікую відповідні поради та підказки щодо веб-розробки разом із особистими історіями.

PS Якщо вам сподобалась ця стаття і ви хочете більше подібних, поплескайте ❤ і поділіться з друзями, це хороша карма