Dizaino modelis yra šablonas, kuris išsprendžia dažnai pasikartojančią programinės įrangos kūrimo problemą.

Stebėtojo modelis, taip pat žinomas kaip publikavimo ir prenumeratos modelis, yra elgesio modelis. Tai leidžia pranešti keliems objektams arba prenumeratoriams apie bet kokį įvykį, paskelbtą jų stebimame objekte.

Čia sužinosite, kaip įdiegti stebėtojo dizaino modelį „TypeScript“.

Stebėtojo modelis

Stebėtojo modelis veikia apibrėždamas „vienas su daugeliu“ ryšį tarp leidėjo ir jo prenumeratorių. Kai leidykloje įvyks įvykis, jis apie tai praneš visiems prenumeratoriams. Vienas iš plačiai paplitusių šio modelio pavyzdžių yra „JavaScript“ įvykių klausytojai.

Kalbant apie kontekstą, tarkime, kad kuriate atsargų stebėjimo priemonę, kuri seka produktų skaičių jūsų parduotuvėje. Šiuo atveju jūsų parduotuvė yra subjektas / leidėjas, o jūsų inventorius yra stebėtojas / prenumeratorius. Šioje situacijoje būtų optimalu naudoti stebėtojo dizaino modelį.

Stebėtojo projektavimo modelyje jūsų dalyko klasė turi įgyvendinti tris metodus:

instagram viewer
  • An prikabinti metodas. Šis metodas prideda prie subjekto stebėtoją.
  • A atsieti metodas. Šis metodas pašalina stebėtoją nuo subjekto.
  • A pranešti/atnaujinti metodas. Šis metodas praneša subjekto stebėtojams, kai pasikeičia subjekto būsena.

Jūsų stebėtojų klasė turi įgyvendinti vieną metodą, the atnaujinti metodas. Šis metodas reaguoja, kai pasikeičia jo subjekto būsena.

Subjektų ir stebėtojų klasių įgyvendinimas

Pirmasis žingsnis įgyvendinant šį modelį yra sukurti subjekto ir stebėtojo klasės sąsajas, siekiant užtikrinti, kad jie įgyvendintų teisingus metodus:

// Temos/leidėjo sąsaja
sąsajaTema{
 attachObserver (stebėtojas: stebėtojas): tuštuma;
 detachObserver (stebėtojas: stebėtojas): tuštuma;
 notifyObserver (): tuštuma;
}
// Stebėtojo/Abonento sąsaja
sąsajaStebėtojas{
atnaujinti(tema: tema): tuštuma;
}

Aukščiau pateiktame kodo bloke esančios sąsajos apibrėžia metodus, kuriuos turi įgyvendinti jūsų konkrečios klasės.

Konkrečių dalykų klasė

Kitas žingsnis yra įdiegti konkrečią dalyko klasę, kuri įgyvendina Tema sąsaja:

// Tema
klasėParduotuvėpadargaiTema{}

Tada inicijuokite Tema’s būsena Parduotuvė klasė. Subjekto stebėtojai reaguos į šios būsenos pokyčius.

Šiuo atveju būsena yra skaičius, o stebėtojai reaguos į skaičiaus padidėjimą:

// Dalyko būsena
privatus NumberOfProducts: skaičius;

Tada inicijuokite stebėtojų masyvą. Šiuo masyvu galėsite stebėti stebėtojus:

// inicijuojant stebėtojus
privatus stebėtojai: Stebėtojas [] = [];

Galite rasti kai kuriuos stebėtojo modelio įgyvendinimus naudodami a Nustatyti duomenų struktūrą vietoje masyvo stebėti stebėtoją. Naudodami rinkinį užtikrinsite, kad tas pats stebėtojas nepasirodys du kartus. Jei vietoj to norite naudoti masyvą, turėtumėte patikrinti, ar jūsų sistemoje nėra pasikartojančių stebėtojų prikabinti metodas.

Toliau turėtumėte įgyvendinti Temametodai -prikabinti, atsieti, ir pranešti/atnaujinti– jūsų betono klasėje.

Norėdami įgyvendinti prikabinti metodas, pirmiausia patikrinkite, ar stebėtojas jau yra prijungtas, ir įveskite klaidą, jei ji yra. Kitu atveju pridėkite stebėtoją prie masyvo naudodami JavaScript masyvo metodas, stumti:

// Stebėtojo (-ų) prijungimas
attachObserver (stebėtojas: stebėtojas): tuštuma {
// Patikrinkite, ar stebėtojas jau buvo prijungtas
konst stebėtojasEgzistuoja = tai.stebėtojai.apima (stebėtojas);
if (stebėtojas egzistuoja) {
mestinaujasKlaida(„Stebėtojas jau užsiprenumeruotas“);
 }
// Pridėti naują stebėtoją
tai.stebėtojai.stumti(stebėtojas);
}

Tada įgyvendinkite savo atsieti metodą surasdami indeksą ir pašalindami jį iš masyvo naudodami JavaScript sandūrą metodas.

Gali būti scenarijų, kai stebėtojas, kurį bandote atskirti, jau buvo atskirtas arba iš pradžių nebuvo užsiprenumeruotas. Turėtumėte tvarkyti šiuos scenarijus pridėdami sąlyginį sakinį, kad patikrintumėte, ar stebėtojas yra masyve arba rinkinyje.

// Stebėtojo (-ų) atjungimas
detachObserver (stebėtojas: stebėtojas): tuštuma {
konsolė.log(„Atsitraukiantis stebėtojas ${JSON.stringify (stebėtojas)}`);
konst stebėtojasIndeksas = tai.observers.indexOf (stebėtojas);
if (observerIndex -1) {
mestinaujasKlaida(„Stebėtojas neegzistuoja“);
 }
tai.stebėtojai.sujungti(stebėtojo indeksas, 1);
 console.log('Stebėtojas atsiskyrė...');
}

Tada įgyvendinkite savo pranešti/atnaujinti metodą, peržiūrėdami savo stebėtojų sąrašą ir paskambinę į atnaujinti kiekvieno metodas:

// Pranešimas stebėtojams
notifyObserver (): tuštuma {
 console.log('Pranešame stebėtojams...');
dėl (konst stebėtojas apietai.stebėtojai) {
 Observer.update(tai);
 }
}

Galiausiai, už Tema klasę, įgyvendina metodą, kuris manipuliuoja būsena, o tada praneša stebėtojams apie pasikeitimą skambindamas jiems pranešti/atnaujinti metodas. Šis pavyzdys yra supaprastinimas, kaip subjektas gali atlikti veiksmą ir informuoti stebėtojus:

// Keičiama būsena ir pranešama stebėtojams
naujasProduktas (produktai: numeris): tuštuma {
tai.numberOfProducts += produktai;
 console.log('Į parduotuvę įtraukta nauja prekė');
tai.notifyObserver();
}

Konkrečios stebėtojų klasės

Sukurkite stebėtojų klasę ar klases, kad užsiprenumeruotumėte leidėją. Kiekviena stebėtojų klasė turi įgyvendinti Stebėtojas sąsaja.

Stebėtojų klasės įgyvendins a pranešti/atnaujinti metodas, kurį turėtų vadinti tik stebimas subjektas. Šis metodas turėtų apimti visą verslo logiką, kurią turite paleisti reaguojant į subjekto būsenos pasikeitimą:

// 1 betono stebėtojas
klasėInventoriuspadargaiStebėtojas{
atnaujinti(): tuštuma {
 console.log('Į parduotuvę įtraukta nauja prekė, atnaujinamas inventorius...');
// Čia eina tikroji verslo logika...
	}
}
// 2 betono stebėtojas
klasėKlientaspadargaiStebėtojas{
atnaujinti(): tuštuma {
 console.log('Parduotuvę papildė nauja prekė, turiu eiti apžiūrėti...');
// Čia eina tikroji verslo logika...
 }
}

Stebėtojo modelio naudojimas

Norėdami naudoti šį modelį, padarykite konkrečių dalykų ir stebėtojų klases. Kai tai padarysite, paskambinkite subjektui prikabinti metodą ir perduoti Observer egzempliorių kaip argumentą. Atsakydamas subjektas įtrauks tą atvejį į savo stebėtojų sąrašą:

// Instantiatyvus subjektas ir stebėtojas
konst parduotuvė = naujas Parduotuvė();
konst inventorius = naujas Inventorius();
konst klientas = naujas Klientas ()
// Objektų prenumerata leidėjui
parduotuvė.attachObserver(inventorius);
parduotuvė.attachObserver(klientas);
// Keičiama dalyko būsena
parduotuvė.naujas produktas(30);

Šis kodas imituoja būsenos pasikeitimą. Pakeitus suaktyvins pranešimo metodą Tema klasė. Šis metodas, savo ruožtu, vadinamas pranešti metodą kiekvienam jo stebėtojui. Tada kiekvienas stebėtojas vadovausis savo verslo logika.

Šį šabloną turėtumėte naudoti tik tada, kai vieno objekto būsenos pakeitimai turi įtakos kitiems objektams, o susijusių objektų rinkinys yra nežinomas arba dinamiškas.

Stebėtojo modelio naudojimo pranašumai

Naudodami šį modelį savo kode galite išlaikyti atidarymo / uždarymo principą. Galite pridėti tiek prenumeratorių, kiek norite, ir užmegzti ryšius tarp objektų vykdymo metu nekeisdami subjekto kodo.