Kako koristiti JavaScript uzorke dizajna

JavaScript obrasci dizajna pružaju dokazana rješenja za uobičajene probleme u razvoju softvera. Razumijevanje i primjena ovih obrazaca omogućit će vam pisanje boljeg, učinkovitijeg JavaScript koda.

Uvod u JavaScript obrasce dizajna

Koncepti sadržani u obrascima dizajna JavaScripta služe kao vodič kako riješiti uobičajene probleme s kojima ćete se susresti kao JavaScript programer.

Trebali biste razumjeti temeljne apstrakcije iza obrazaca, tako da ih možete primijeniti na svoj određeni problem. Također biste trebali moći identificirati kada neki od navedenih uzoraka može biti koristan za vaš kod.

Uzorak modula

Uzorak modula, koji omogućuje enkapsulaciju, dio je Sustav modula JavaScripta. Omogućuje način za zaštitu privatnih podataka i ponašanja unutar modula dok izlaže javni API. Omogućuje vam stvaranje samostalnih objekata modula s privatnim i javnim razinama pristupa.

Ovo je pomalo kao što možete koristiti modifikatore pristupa na klasi u jeziku kao što je Java ili C++.

U JavaScriptu možete implementirati obrazac modula pomoću zatvarača.

Upotrebom zatvarača za prilaganje privatnih članova (funkcija, varijabli, podataka), stvarate opseg u kojem su ti članovi dostupni, ali nisu izravno izloženi vanjskom svijetu. To pomaže u postizanju enkapsulacije, zadržavajući unutarnje detalje skrivene od vanjskog koda.

Uz to, vraćanje javnog API-ja iz zatvaranja omogućuje privatni pristup određenim funkcijama ili svojstvima koja želite izložiti kao dio sučelja modula.

To će vam dati kontrolu nad time koji su dijelovi modula dostupni drugim dijelovima baze koda. Time se održava jasna granica između javnih i privatnih funkcija.

Evo primjera:

konst ShoppingCartModule = (funkcija () {
// Privatni podaci
neka cartItems = [];
// Privatna metoda
funkcijaizračunatiTotalItems() {
povratak cartItems.reduce((ukupno, stavka) => ukupno + artikl.količina, 0);
 }
// Javni API
povratak {
 addItem (stavka) {
 cartItems.push (stavka);
 },
 getTotalItems() {
povratak izračunajUkupne Stavke();
 },
 clearCart() {
 cartItems = [];
 }
 };
})();
// Primjer upotrebe
ShoppingCartModule.addItem({ Ime: 'Proizvod 1', količina: 2 });
ShoppingCartModule.addItem({ Ime: 'Proizvod 2', količina: 1 });
konzola.log (ShoppingCartModule.getTotalItems()); // Izlaz: 3
ShoppingCartModule.clearCart();
konzola.log (ShoppingCartModule.getTotalItems()); // Izlaz: 0

U ovom primjeru, ShoppingCartModule predstavlja modul kreiran korištenjem uzorka modula. Izvršenje koda ide ovako:

1. The IIFE omotava cijeli blok koda, stvarajući funkciju koja se odmah izvršava nakon deklaracije. Time se uspostavlja privatni opseg za članove modula.
2. cartItems je privatni niz. Nije izravno dostupan izvan modula.
3. izračunajUkupne Stavke() je privatna metoda koja izračunava ukupan broj artikala u košarici. Koristi se smanjiti() metoda za ponavljanje cartItems poredajte i zbrojite količine svih artikala.
4. Modul vraća svoj javni API kao literal objekta, izlažući tri javne metode: Dodaj Predmet(), getTotalItems(), i clearCart().
5. Izvan modula možete pristupiti javnim metodama modula za interakciju s funkcionalnošću košarice za kupnju.

Ovaj primjer pokazuje kako vam uzorak modula omogućuje enkapsulaciju privatnih podataka (cartItems) i ponašanje (izračunatiTotalItems) unutar modula uz pružanje javnog sučelja (Dodaj Predmet, getTotalItems, i clearCart) za interakciju s modulom.

Uzorak promatrača

Uzorak Promatrač uspostavlja ovisnost jedan prema više između objekata. Kada se stanje jednog objekta promijeni, on obavještava sve svoje zavisnike i oni se ažuriraju automatski. Ovaj obrazac je posebno koristan za upravljanje interakcijama vođenim događajima ili odvajanje komponenti u sustavu.

U JavaScriptu možete implementirati obrazac promatrača koristeći ugrađeni addEventListener, dispatchEvent metode, ili bilo koje mehanizmi za rukovanje događajima. Pretplaćivanjem promatrača na događaje ili subjekte, možete ih obavijestiti i ažurirati kada se dogode određeni događaji.

Na primjer, možete koristiti obrazac Promatrač za implementaciju jednostavnog sustava obavijesti:

// Implementacija uzorka promatrača
funkcijaSustav obavijesti() {
// Popis pretplatnika
ovaj.pretplatnici = [];
// Metoda pretplate na obavijesti
ovaj.pretplatiti se = funkcija (pretplatnik) {
ovaj.pretplatnici.push (pretplatnik);
 };
// Metoda otkazivanja pretplate na obavijesti
ovaj.odjava = funkcija (pretplatnik) {
konst indeks = ovaj.subscribers.indexOf (pretplatnik);
ako (indeks !== -1) {
ovaj.subscribers.splice (indeks, 1);
 }
 };
// Metoda obavještavanja pretplatnika
ovaj.obavijestiti = funkcija (poruka) {
ovaj.subscribers.forEach(funkcija (pretplatnik) {
 subscriber.receiveNotification (poruka);
 });
 };
}
// Objekt pretplatnika
funkcijaPretplatnik(Ime) {
// Metoda primanja i rukovanja obavijestima
ovaj.receiveNotification = funkcija (poruka) {
konzola.log (ime + ' primljena obavijest: ' + poruka);
 };
}
// Primjer upotrebe
konst Sustav obavijesti = novi Sustav obavijesti();
// Stvaranje pretplatnika
konst pretplatnik1 = novi Pretplatnik('Pretplatnik 1');
konst pretplatnik2 = novi Pretplatnik('Pretplatnik 2');
// Pretplatite pretplatnike na sustav obavijesti
notificationSystem.subscribe (pretplatnik1);
notificationSystem.subscribe (pretplatnik2);
// Obavijesti pretplatnike
notificationSystem.notify('Nova obavijest!');

Ovdje je cilj omogućiti većem broju pretplatnika primanje obavijesti kada se dogodi određeni događaj.

The Sustav obavijesti funkcija predstavlja sustav koji šalje obavijesti, a Pretplatnik funkcija predstavlja primatelje obavijesti.

NotificationSystem ima polje tzv pretplatnika za pohranjivanje pretplatnika koji žele primati obavijesti. The pretplatiti se metoda omogućuje pretplatnicima da se registriraju dodavanjem sebe u polje pretplatnika. The odjavi pretplatu metoda bi uklonila pretplatnike iz niza.

The obavijestiti metoda u NotificationSystem ponavlja niz pretplatnika i poziva primati obavijest na svakom pretplatniku, omogućujući im da rukuju obavijestima.

Instance funkcije Subscriber predstavljaju pretplatnike. Svaki pretplatnik ima metodu receiveNotification koja određuje kako postupa s primljenim obavijestima. U ovom primjeru, metoda zapisuje primljenu poruku u konzolu.

Za korištenje uzorka promatrača stvorite instancu NotificationSystem. Zatim možete stvoriti instance pretplatnika i dodati ih u sustav obavijesti korištenjem metode pretplate.

Slanje obavijesti pokrenut će metodu receiveNotification za svakog pretplatnika i zabilježiti poruku za svakog pretplatnika.

Uzorak Promatrač omogućuje labavu vezu između sustava obavijesti i pretplatnika, što omogućuje fleksibilnost. Uzorak promiče odvajanje briga što će olakšati održavanje u sustavima vođenim događajima.

Korištenje naprednih JavaScript uzoraka

Evo nekoliko općih savjeta za učinkovito korištenje naprednih JavaScript uzoraka:

• Razmotrite implikacije izvedbe: napredni obrasci mogu unijeti dodatnu složenost, što može utjecati na izvedbu. Vodite računa o implikacijama izvedbe i optimizirati gdje je potrebno.
• Izbjegavajte anti-uzorke: temeljito razumite obrasce i izbjegavajte upadanje u anti-uzorke ili njihovu zlouporabu. Koristite uzorke tamo gdje imaju smisla i uskladite se sa zahtjevima vaše aplikacije.
• Slijedite konvencije kodiranja: Dosljedno slijedite konvencije kodiranja kako biste održali čitljivost i dosljednost u svojoj bazi koda. Koristite smislene nazive varijabli i funkcija i pružite jasnu dokumentaciju za svoje uzorke.

Budite oprezni pri primjeni ovih uzoraka

Uzorak modula omogućuje enkapsulaciju i promiče privatnost podataka, organizaciju koda i stvaranje samostalnih modula.

S druge strane, obrazac Promatrač olakšava komunikaciju između komponenti uspostavljanjem odnosa subjekt-pretplatnik.

Trebali biste biti svjesni potencijalnih zamki i uobičajenih pogrešaka pri implementaciji naprednih JavaScript uzoraka. Izbjegavajte pretjeranu upotrebu uzoraka tamo gdje postoje jednostavnija rješenja ili stvaranje previše složenog koda. Redovito pregledavajte i refaktorirajte svoj kod kako biste bili sigurni da ga je moguće održavati.