Cum să utilizați modelele de design JavaScript

Modelele de design JavaScript oferă soluții dovedite la problemele comune în dezvoltarea de software. Înțelegerea și aplicarea acestor modele vă va permite să scrieți un cod JavaScript mai bun și mai eficient.

Introducere în modelele de design JavaScript

Conceptele conținute în modelele de design JavaScript servesc pentru a vă ghida asupra modului de a depăși problemele comune cu care vă veți confrunta în calitate de dezvoltator JavaScript.

Ar trebui să înțelegeți abstracțiile care stau la baza tiparelor, astfel încât să le puteți aplica problemei dvs. specifice. De asemenea, ar trebui să puteți identifica când oricare dintre modelele menționate poate fi util pentru codul dvs.

Modelul Modulului

Modelul Modul, care oferă încapsulare, face parte din Sistemul de module JavaScript. Oferă o modalitate de a securiza datele private și comportamentul într-un modul în timp ce expune un API public. Vă permite să creați obiecte modul autonome cu niveluri de acces privat și public.

Acesta este un pic cum poți utilizați modificatori de acces pe o clasă într-un limbaj precum Java sau C++.

În JavaScript, puteți implementa modelul Module folosind închideri.

Folosind o închidere pentru a include membri privați (funcții, variabile, date), creați un domeniu în care acești membri sunt accesibili, dar nu expuși direct lumii exterioare. Acest lucru ajută la realizarea încapsulării, păstrând detaliile interne ascunse de codul extern.

În plus, returnarea unui API public de la închidere permite accesul privat la anumite funcții sau proprietăți pe care doriți să le expuneți ca parte a interfeței modulului.

Acest lucru vă va oferi control asupra părților modulului care sunt accesibile altor părți ale bazei de cod. Aceasta menține o graniță clară între funcționalitatea publică și cea privată.

Iată un exemplu:

const ShoppingCartModule = (funcţie () {
// Date private
lăsa cartItems = [];
// Metodă privată
funcţiecalculateTotalItems() {
întoarcere cartItems.reduce((total, articol) => total + item.cantity, 0);
 }
// Public API
întoarcere {
 addItem (articol) {
 cartItems.push (articol);
 },
 getTotalItems() {
întoarcere calculateTotalItems();
 },
 clearCart() {
 cartItems = [];
 }
 };
})();
// Exemplu de utilizare
ShoppingCartModule.addItem({ Nume: „Produsul 1”, cantitate: 2 });
ShoppingCartModule.addItem({ Nume: „Produsul 2”, cantitate: 1 });
consolă.log (ShoppingCartModule.getTotalItems()); // Ieșire: 3
ShoppingCartModule.clearCart();
consolă.log (ShoppingCartModule.getTotalItems()); // Ieșire: 0

În acest exemplu, Modulul Coș de cumpărături reprezintă un modul creat folosind modelul modulului. Execuția codului decurge astfel:

1. The IIFE împachetează întregul bloc de cod, creând o funcție care este imediat executată la declarare. Aceasta stabilește un domeniu privat pentru membrii modulului.
2. cartItems este o matrice privată. Nu este accesibil direct din exteriorul modulului.
3. calculateTotalItems() este o metodă privată care calculează numărul total de articole din coș. Acesta folosește reduce() metoda de a repeta peste cartItems matrice și însumați cantitățile tuturor articolelor.
4. Modulul returnează API-ul public ca un obiect literal, expunând trei metode publice: adaugare element(), getTotalItems(), și clearCart().
5. În afara modulului, puteți accesa metodele publice ale modulului pentru a interacționa cu funcționalitatea coșului de cumpărături.

Acest exemplu demonstrează modul în care modelul modulului vă permite să încapsulați date private (cartItems) și comportament (calculateTotalItems) în cadrul modulului, oferind în același timp o interfață publică (adaugare element, getTotalItems, și clearCart) pentru a interacționa cu modulul.

Modelul Observatorului

Modelul Observer stabilește o dependență unu-la-mulți între obiecte. Când starea unui obiect se schimbă, acesta îi anunță pe toți dependenții săi, iar aceștia se actualizează automat. Acest model este util în special pentru gestionarea interacțiunilor determinate de evenimente sau pentru decuplarea componentelor dintr-un sistem.

În JavaScript, puteți implementa modelul Observer folosind addEventListener încorporat, dispatchEvent metode sau oricare mecanisme de gestionare a evenimentelor. Abonând observatori la evenimente sau subiecte, îi puteți notifica și actualiza atunci când apar anumite evenimente.

De exemplu, puteți utiliza modelul Observer pentru a implementa un sistem simplu de notificare:

// Implementarea modelului de observator
funcţieSistem de notificare() {
// Lista abonaților
acest.abonați = [];
// Metoda de abonare la notificări
acest.subscribe = funcţie (abonat) {
acest.subscribers.push (abonat);
 };
// Metoda de dezabonare de la notificări
acest.dezabonare = funcţie (abonat) {
const index = acest.subscribers.indexOf (abonat);
dacă (index !== -1) {
acest.subscribers.splice (index, 1);
 }
 };
// Metodă de notificare a abonaților
acest.notifică = funcţie (mesaj) {
acest.abonați.pentru fiecare(funcţie (abonat) {
 subscriber.receiveNotification (mesaj);
 });
 };
}
// Obiect abonat
funcţieAbonat(Nume) {
// Metodă de primire și de gestionare a notificărilor
acest.receiveNotification = funcţie (mesaj) {
consolă.log (nume + ' a primit notificare: ' + mesaj);
 };
}
// Exemplu de utilizare
const notificationSystem = nou NotificationSystem();
// Creați abonați
const abonat1 = nou Abonat(„Abonatul 1”);
const abonat2 = nou Abonat(„Abonatul 2”);
// Abonați abonații la sistemul de notificare
notificationSystem.subscribe (abonat1);
notificationSystem.subscribe (subscriber2);
// Notificați abonații
notificationSystem.notify(„Notificare nouă!”);

Scopul aici este de a permite mai multor abonați să primească notificări atunci când are loc un anumit eveniment.

The Sistem de notificare funcția reprezintă sistemul care trimite notificări și Abonat funcția reprezintă destinatarii notificărilor.

NotificationSystem are o matrice numită abonati pentru a stoca abonații care doresc să primească notificări. The Abonati-va metoda permite abonaților să se înregistreze adăugându-se la matricea de abonați. The dezabonare metoda ar elimina abonații din matrice.

The notifica metoda din NotificationSystem iterează prin matricea de abonați și apelează la primeșteNotificare metoda pe fiecare abonat, permițându-le să gestioneze notificările.

Instanțele funcției Abonat reprezintă abonați. Fiecare abonat are o metodă receiveNotification care determină modul în care gestionează notificările primite. În acest exemplu, metoda înregistrează mesajul primit pe consolă.

Pentru a utiliza modelul de observator, creați o instanță de NotificationSystem. Puteți crea apoi instanțe de Abonat și le puteți adăuga la sistemul de notificare folosind metoda de abonare.

Trimiterea unei notificări va declanșa metoda receiveNotification pentru fiecare abonat și va înregistra mesajul pentru fiecare abonat.

Modelul Observer permite o cuplare liberă între sistemul de notificare și abonați, permițând flexibilitate. Modelul promovează separarea preocupărilor, ceea ce va ușura întreținerea în sistemele bazate pe evenimente.

Utilizarea modelelor JavaScript avansate

Iată câteva sfaturi generale pentru utilizarea eficientă a modelelor JavaScript avansate:

• Luați în considerare implicațiile de performanță: modelele avansate pot introduce o complexitate suplimentară, care poate afecta performanța. Fiți atenți la implicațiile performanței și optimizați acolo unde este necesar.
• Evitați modelele anti-tipare: înțelegeți bine modelele și evitați să cădeți în anti-modare sau să le folosiți greșit. Utilizați tipare acolo unde au sens și se aliniază cu cerințele aplicației dvs.
• Urmați convențiile de codare: urmați în mod constant convențiile de codare pentru a menține lizibilitatea și coerența în baza de cod. Utilizați nume semnificative de variabile și funcții și furnizați o documentație clară pentru tiparele dvs.

Fiți atenți când aplicați aceste modele

Modelul Module permite încapsularea și promovează confidențialitatea datelor, organizarea codului și crearea de module autonome.

Pe de altă parte, modelul Observer facilitează comunicarea între componente prin stabilirea unei relații subiect-abonat.

Ar trebui să fiți conștienți de potențialele capcane și greșelile comune atunci când implementați modele JavaScript avansate. Evitați utilizarea excesivă a tiparelor acolo unde există soluții mai simple sau crearea unui cod prea complex. Examinați și refactorizați în mod regulat codul pentru a vă asigura că rămâne menținut.