Научете тези основни концепции на JavaScript само за няколко минути

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

  • Кратко описание
  • Защо е уместно
  • Пример за практически код (ES5 / ES6 с функции на стрелките).

Винаги е добра идея да имате общи познания, когато работите с екосистемата JS. Ще сте наясно как работят и взаимодействат нещата и лесно ще научите и подобрите нещата по-бързо.

Тези JS концепции са избрани въз основа на популярността и уместността, които съм виждал сред общността. Ако искате да научите концепция, която не е част от тази статия, оставете коментар и аз ще я добавя в близко бъдеще.

Ако искате да станете по-добър уеб разработчик, да започнете собствен бизнес, да преподавате на други или просто да подобрите уменията си за разработка, ще публикувам седмични съвети и трикове на най-новите езици за уеб разработка.

Увеличете уменията си за JavaScript с тези полезни JS методи .

JS концепциите, които ще разгледаме:

  1. Обхват
  2. IIFE
  3. MVC
  4. Async / await
  5. Закриване
  6. Обратно обаждане

1. Обхват

Обхватът е просто кутия с граници. Има два вида граници в JS: локални и глобални, наричани още вътрешни и външни.

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

Тези термини се използват много, когато говорим за класове, функции и методи. Той предоставя възможността да се определи кое е достъпно (видимо) за текущия контекст.

Защо това е от значение?

  • Отделя логика
  • Стеснява фокуса
  • Подобрява четливостта

Пример

Да предположим, че създавате функция и искате да получите достъп до променлива, дефинирана в глобален обхват.

ES5

ES6

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

2. IIFE

IIFE (Израз на незабавно извикване на функция), тъй като името означава, че функцията е „Незабавно извикана“, когато е създадена. Преди ES6 ++ да представи класове / методи в подкрепа на обектно-ориентираната програмираща парадигма (OOP), често срещаният начин беше да се имитира IIFE като име на клас и да се извикат функции като методи, обвити в returnтип.

Защо това е от значение?

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

Пример

През последните няколко години технологията се промени доста. Сега например имате възможност да променяте цвета на почти всичко - като вашата кола. Нека да видим пример за код.

ES5

ES6

В горния пример имаме две функции в returnтипа ( changeColorToRed()& changeColorToBlack()). Това ни позволява достъп до множество функции и извикване на метода, който искаме.

Накратко, първо извикваме car(израз на функция), за да получим достъп до това, което е вътре. След това можем да използваме .нотация, за да извикаме функцията, която е дефинирана в returnтипа. Този подход е подобен на структурата на наличието на класове / методи, където първо извикваме името на класа, преди да можем да извикаме името на метода. По този начин можете да напишете чист, поддържаем и многократно използван код.

3. MVC

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

Защо това е от значение?

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

Пример

Нека разгледаме кратък пример за MVC дизайн-рамка.

ES5

ES6

Както е показано в примера по-горе, ние обикновено се раздели view, modelи controllerв отделни папки / файлове от гледна точка на най-добрите практики, но само за да илюстрират концепцията, ние сме го поставя в един файл. Целите на рамката за проектиране са да опрости процеса на развитие и да подкрепи устойчива среда за сътрудничество.

4. Async / await

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

Защо това е от значение?

  • Синхронни възможности
  • Контролира поведението
  • Намалява „ада за обратно извикване“

Пример

Да предположим, че искате да получите всички потребители от API за почивка и да покажете резултатите във формат JSON.

ES5

ES6

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

5. Затваряне

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

Защо това е от значение?

  • Удължава поведението
  • Полезно при работа със събития

Пример

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

ES5

ES6

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

6. Обратно обаждане

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

Защо това е от значение?

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

Пример

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

ES5

ES6

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

Ето го! Някои от най-популярните JS концепции са обяснени просто с примери. Надявам се, че тези концепции са ви помогнали да разберете малко повече JS и как работи.

Можете да ме намерите в Medium, където публикувам ежеседмично. Или можете да ме следвате в Twitter, където публикувам подходящи съвети и трикове за уеб разработка, заедно с лични истории.

PS Ако ви хареса тази статия и искате повече подобни, моля, пляскайте ❤ и споделяйте с приятели, това е добра карма