Как да използвате JavaScript шаблони за проектиране

Шаблоните за проектиране на JavaScript предоставят доказани решения на често срещани проблеми при разработването на софтуер. Разбирането и прилагането на тези модели ще ви позволи да пишете по-добър, по-ефективен JavaScript код.

Въведение в шаблоните за проектиране на JavaScript

Концепциите, съдържащи се в шаблоните за проектиране на JavaScript, служат, за да ви насочат как да преодолеете често срещаните проблеми, с които ще се сблъскате като разработчик на JavaScript.

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

Моделът на модула

Моделът на модула, който осигурява капсулиране, е част от Модулна система на JavaScript. Той предоставя начин за защита на частни данни и поведение в рамките на модул, докато излага публичен API. Тя ви позволява да създавате самостоятелни модулни обекти с частни и публични нива на достъп.

Това е малко като как можете използвайте модификатори за достъп в клас на език като Java или C++.

В JavaScript можете да приложите модела на модула, като използвате затваряния.

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

Освен това връщането на публичен API от затварянето позволява частен достъп до определени функции или свойства, които искате да изложите като част от интерфейса на модула.

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

Ето един пример:

конст ShoppingCartModule = (функция () {
// Лични данни
позволявам cartItems = [];
// Частен метод
функцияизчислиTotalItems() {
връщане cartItems.reduce((общо, т) => общо + артикул.количество, 0);
 }
// Публичен API
връщане {
 addItem (елемент) {
 cartItems.push (артикул);
 },
 getTotalItems() {
връщане изчисли ОбщоЕлементи();
 },
 clearCart() {
 cartItems = [];
 }
 };
})();
// Пример за използване
ShoppingCartModule.addItem({ име: „Продукт 1“, количество: 2 });
ShoppingCartModule.addItem({ име: „Продукт 2“, количество: 1 });
конзола.log (ShoppingCartModule.getTotalItems()); // Изход: 3
ShoppingCartModule.clearCart();
конзола.log (ShoppingCartModule.getTotalItems()); // Изход: 0

В този пример, ShoppingCartModule представлява модул, създаден с помощта на модела на модула. Изпълнението на кода става така:

1. The IIFE обвива целия кодов блок, създавайки функция, която се изпълнява незабавно при деклариране. Това установява частен обхват за членовете на модула.
2. cartItems е частен масив. Не е директно достъпен извън модула.
3. калкулираTotalItems() е частен метод, който изчислява общия брой артикули в количката. Той използва намали () метод за повторение на cartItems масив и сумирайте количествата на всички артикули.
4. Модулът връща публичния си API като обектен литерал, излагайки три публични метода: Добавете артикул(), getTotalItems(), и clearCart().
5. Извън модула можете да получите достъп до публичните методи на модула, за да взаимодействате с функционалността на пазарската количка.

Този пример демонстрира как моделът на модула ви позволява да капсулирате лични данни (cartItems) и поведение (изчислиTotalItems) в рамките на модула, като същевременно предоставя публичен интерфейс (Добавете артикул, getTotalItems, и clearCart), за да взаимодействат с модула.

Моделът на наблюдателя

Моделът Observer установява зависимостта "един към много" между обектите. Когато състоянието на един обект се промени, той уведомява всички негови зависими и те се актуализират автоматично. Този модел е особено полезен за управление на управлявани от събития взаимодействия или отделяне на компоненти в система.

В JavaScript можете да приложите модела Observer с помощта на вградения addEventListener, dispatchEvent методи или други механизми за обработка на събития. Като абонирате наблюдатели за събития или теми, можете да ги уведомявате и актуализирате, когато настъпят конкретни събития.

Например, можете да използвате модела Observer, за да реализирате проста система за уведомяване:

// Реализация на модел на наблюдател
функцияNotificationSystem() {
// Списък на абонатите
това.subscribers = [];
// Метод за абониране за известия
това.subscribe = функция (абонат) {
това.subscribers.push (абонат);
 };
// Метод за отписване от известия
това.отписване = функция (абонат) {
конст индекс = това.subscribers.indexOf (абонат);
ако (индекс !== -1) {
това.subscribers.splice (индекс, 1);
 }
 };
// Метод за уведомяване на абонатите
това.уведоми = функция (съобщение) {
това.subscribers.forEach(функция (абонат) {
 subscriber.receiveNotification (съобщение);
 });
 };
}
// Абонат обект
функцияАбонат(име) {
// Метод за получаване и обработка на известия
това.receiveNotification = функция (съобщение) {
конзола.log (име + ' получено известие: ' + съобщение);
 };
}
// Пример за използване
конст notificationSystem = нов NotificationSystem();
// Създаване на абонати
конст абонат1 = нов абонат(„Абонат 1“);
конст абонат2 = нов абонат(„Абонат 2“);
// Абонирайте абонатите за системата за уведомяване
notificationSystem.subscribe (абонат1);
notificationSystem.subscribe (абонат2);
// Уведомяване на абонатите
notificationSystem.notify('Ново известие!');

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

The NotificationSystem представлява системата, която изпраща известия, и Абонат представлява получателите на известията.

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

The уведомявам метод в NotificationSystem итерира през масива от абонати и извиква receiveNotification метод за всеки абонат, което им позволява да обработват известията.

Екземплярите на функцията Subscriber представляват абонати. Всеки абонат има метод receiveNotification, който определя как да обработва получените известия. В този пример методът записва полученото съобщение в конзолата.

За да използвате модела на наблюдателя, създайте екземпляр на NotificationSystem. След това можете да създадете екземпляри на Subscriber и да ги добавите към системата за уведомяване, като използвате метода за абониране.

Изпращането на известие ще задейства метода receiveNotification за всеки абонат и ще регистрира съобщението за всеки абонат.

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

Използване на разширени JavaScript шаблони

Ето някои общи съвети за ефективно използване на разширени JavaScript модели:

• Обмислете последиците за производителността: Разширените модели могат да въведат допълнителна сложност, която може да повлияе на производителността. Имайте предвид последиците за ефективността и оптимизирайте, където е необходимо.
• Избягвайте анти-шаблони: Разберете напълно шаблоните и избягвайте да попадате в анти-модели или да ги използвате неправилно. Използвайте шаблони, където имат смисъл и съответстват на изискванията на вашето приложение.
• Следвайте конвенциите за кодиране: Следвайте последователно конвенциите за кодиране, за да поддържате четимост и последователност в базата на кода. Използвайте смислени имена на променливи и функции и осигурете ясна документация за вашите модели.

Бъдете внимателни, когато прилагате тези модели

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

От друга страна, моделът Наблюдател улеснява комуникацията между компонентите чрез установяване на връзка субект-абонат.

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