Implementacija uzorka dizajna promatrača u TypeScriptu

Uzorak dizajna je predložak koji rješava problem koji se često ponavlja u dizajnu softvera.

Uzorak promatrača, poznat i kao obrazac objavljivanja-pretplate, obrazac je ponašanja. Omogućuje vam da obavijestite više objekata ili pretplatnika o bilo kojem događaju koji je objavljen u objektu koji promatraju.

Ovdje ćete naučiti kako implementirati uzorak dizajna promatrača u TypeScriptu.

Uzorak promatrača

Uzorak promatrača funkcionira tako da definira odnos jedan prema više između izdavača i njegovih pretplatnika. Kada se dogodi događaj u izdavaču, on će obavijestiti sve pretplatnike na taj događaj. Jedan rašireni primjer ovog obrasca je JavaScript slušatelji događaja.

Za kontekst, pretpostavimo da gradite alat za praćenje inventara koji prati broj proizvoda u vašoj trgovini. U ovom slučaju, vaša trgovina je subjekt/izdavač, a vaš inventar je promatrač/pretplatnik. Korištenje uzorka dizajna promatrača bilo bi optimalno u ovoj situaciji.

U uzorku dizajna promatrača, vaša predmetna klasa mora implementirati tri metode:

• An priložiti metoda. Ova metoda subjektu dodaje promatrača.
• A odvojiti metoda. Ova metoda uklanja promatrača od subjekta.
• A obavijestiti/ažurirati metoda. Ova metoda obavještava promatrače subjekta kada se stanje subjekta promijeni.

Vaša klasa promatrača mora implementirati jednu metodu, Ažuriraj metoda. Ova metoda reagira kada dođe do promjene u stanju subjekta.

Implementacija nastave predmeta i promatrača

Prvi korak u implementaciji ovog uzorka je stvaranje sučelja za klasu subjekta i promatrača, kako bi se osiguralo da implementiraju ispravne metode:

// Sučelje Predmet/Izdavač
sučeljePredmet{
 priložiteObserver (promatrač: Promatrač): poništiti;
 detachObserver (promatrač: Promatrač): poništiti;
 notifyObserver(): poništiti;
}
// Sučelje promatrača/pretplatnika
sučeljePosmatrač{
Ažuriraj(predmet: Predmet): poništiti;
}

Sučelja u gornjem bloku koda definiraju metode koje vaše konkretne klase moraju implementirati.

Razred konkretnog predmeta

Sljedeći korak je implementacija konkretne predmetne klase koja implementira Predmet sučelje:

// Predmet
razredaStoreoruđaPredmet{}

Zatim inicijalizirajte Predmetstanje u Store razreda. Promatrači subjekta će reagirati na promjene ovog stanja.

U ovom slučaju, stanje je broj, a promatrači će reagirati na povećanje broja:

// Stanje subjekta
privatna brojProizvoda: broj;

Zatim inicijalizirajte niz promatrača. Ovaj niz je način na koji ćete pratiti promatrače:

// inicijaliziranje promatrača
privatna promatrači: promatrač[] = [];

Možda ćete pronaći neke implementacije uzorka promatrača pomoću a Postavite strukturu podataka umjesto niza za praćenje promatrača. Korištenje skupa osigurat će da se isti promatrač neće pojaviti dvaput. Ako umjesto toga želite koristiti niz, trebali biste provjeriti ima li duplih promatrača u vašem priložiti metoda.

Zatim biste trebali implementirati Predmetmetode—priložiti, odvojiti, i obavijestiti/ažurirati— u vašem razredu betona.

Za provedbu priložiti metoda, prvo provjerite je li promatrač već pripojen i izbacite pogrešku ako jest. U suprotnom, dodajte promatrača u niz pomoću JavaScript metoda niza, gurnuti:

// Priključivanje promatrača(a)
priložiteObserver (promatrač: Promatrač): poništiti {
// Provjerite je li promatrač već priložen
konst promatračPostoji = ovaj.promatrači.uključuje (promatrač);
if (observerExists) {
bacanjenoviGreška('Promatrač je već pretplaćen');
 }
// Dodaj novog promatrača
ovaj.promatrači.gurnuti(posmatrač);
}

Zatim implementirajte svoje odvojiti metoda pronalaženjem indeksa i uklanjanjem iz niza pomoću JavaScripta spajanje metoda.

Mogu postojati scenariji u kojima je promatrač kojeg pokušavate odvojiti već bio odvojen ili nije bio pretplaćen. Trebali biste obraditi ove scenarije dodavanjem uvjetne naredbe da provjerite je li promatrač u nizu ili skupu, ovisno o slučaju.

// Odvajanje promatrača(a)
detachObserver (promatrač: Promatrač): poništiti {
konzola.log(`Odvajanje promatrača ${JSON.stringify (promatrač)}`);
konst promatrač Index = ovaj.observers.indexOf (promatrač);
if (observerIndex -1) {
bacanjenoviGreška('Promatrač ne postoji');
 }
ovaj.promatrači.spojnica(promatrač Index, 1);
 console.log('Promatrač odvojen...');
}

Zatim implementirajte svoje obavijestiti/ažurirati metodom prelaženjem vašeg popisa promatrača i pozivanjem Ažuriraj metoda svakog od njih:

// Obavještavanje promatrača
notifyObserver(): poništiti {
 console.log('Obavještavanje promatrača...');
za (konst posmatrač odovaj.promatrači) {
 promatrač.ažuriranje(ovaj);
 }
}

Na kraju, za Predmet klase, implementirajte metodu koja manipulira stanjem i zatim obavještava promatrače o promjeni pozivom njihovih obavijestiti/ažurirati metoda. Ovaj primjer je pojednostavljenje načina na koji subjekt može izvršiti radnju i zatim obavijestiti promatrače:

// Promjena stanja i obavještavanje promatrača
noviProizvod (proizvodi: broj): poništiti {
ovaj.numberOfProducts += proizvodi;
 console.log('Novi proizvod dodan u trgovinu');
ovaj.notifyObserver();
}

Konkretne klase promatrača

Napravite klasu ili klase promatrača da biste se pretplatili na izdavača. Svaka klasa promatrača mora implementirati Posmatrač sučelje.

Razredi promatrača provodit će a obavijestiti/ažurirati metoda koju treba pozvati samo subjekt kojeg promatraju. Ova metoda treba sadržavati svu poslovnu logiku koju trebate pokrenuti kao odgovor na promjenu stanja subjekta:

// Konkretni promatrač 1
razredaInventaroruđaPosmatrač{
Ažuriraj(): poništiti {
 console.log('Novi proizvod dodan u trgovinu, ažuriranje inventara...');
// Stvarna poslovna logika ide ovdje...
	}
}
// Konkretni promatrač 2
razredaKupacoruđaPosmatrač{
Ažuriraj(): poništiti {
 console.log('Novi proizvod dodan u trgovinu, moram ga ići provjeriti...');
// Stvarna poslovna logika ide ovdje...
 }
}

Korištenje uzorka promatrača

Da biste koristili ovaj obrazac, instancirajte konkretne klase subjekta i promatrača. Nakon što to učinite, nazovite subjekta priložiti metodu i proslijedite instancu Observer kao argument. Kao odgovor, subjekt će dodati tu instancu na svoju listu promatrača:

// Instanciranje subjekta i promatrača
konst pohraniti = novi Pohrani();
konst inventar = novi Inventar();
konst kupac = novi kupac()
// Pretplata objekata na izdavača
trgovina.attachObserver(inventar);
trgovina.attachObserver(kupac);
// Promjena stanja subjekta
trgovina.novi proizvod(30);

Ovaj kod simulira promjenu stanja. Promjena će pokrenuti metodu obavijesti na Predmet razreda. Ova metoda, pak, poziva obavijestiti metoda na svakom od svojih promatrača. Svaki će promatrač tada voditi vlastitu poslovnu logiku.

Ovaj obrazac trebate koristiti samo kada promjene stanja jednog objekta utječu na druge objekte, a skup uključenih objekata je nepoznat ili dinamičan.

Prednosti korištenja obrasca promatrača

Korištenje ovog uzorka u vašem kodu omogućuje vam održavanje principa otvaranja/zatvaranja. Možete dodati onoliko pretplatnika koliko želite i uspostaviti odnose između objekata tijekom izvođenja, bez mijenjanja koda subjekta.