Kujundusmuster on mall, mis lahendab tarkvara kujundamisel sageli korduva probleemi.

Vaatleja muster, tuntud ka kui avaldamise-tellimise muster, on käitumismuster. See võimaldab teil teavitada mitut objekti või tellijat mis tahes sündmusest, mis on avaldatud objektis, mida nad jälgivad.

Siit saate teada, kuidas rakendada vaatleja kujundusmustrit TypeScriptis.

Vaatleja muster

Vaatleja muster määratleb üks-mitmele suhte kirjastaja ja selle tellijate vahel. Kui väljaandjas sündmus toimub, teavitab see kõiki selle sündmuse tellijaid. Üks selle mustri laialt levinud näide on JavaScripti sündmuste kuulajad.

Konteksti jaoks oletagem, et loote laoseisu jälgijat, mis jälgib teie poes olevate toodete arvu. Sel juhul on teie pood teema/väljaandja ja teie laoseisu vaatleja/tellija. Vaatleja kujundusmustri kasutamine oleks selles olukorras optimaalne.

Vaatleja kujundamise mustris peab teie aineklass rakendama kolme meetodit:

  • An kinnitada meetod. See meetod lisab subjektile vaatleja.
  • A eralduma meetod. See meetod eemaldab vaatleja subjektist.
    • instagram viewer
  • A teavitada/värskendada meetod. See meetod teavitab subjekti vaatlejaid, kui subjekti olek muutub.

Teie vaatlejaklass peab rakendama ühte meetodit, the värskendada meetod. See meetod reageerib, kui selle subjekti olek muutub.

Subjekti- ja vaatlejaklasside rakendamine

Selle mustri rakendamise esimene samm on luua liidesed subjekti ja vaatleja klassi jaoks, et tagada õigete meetodite rakendamine:

// Teema/väljaandja liides
liidesTeema{
 attachObserver (vaatleja: vaatleja): tühine;
 detachObserver (vaatleja: vaatleja): tühine;
 notifyObserver(): tühine;
}
// Vaatleja/abonendi liides
liidesVaatleja{
värskendada(teema: Teema): tühine;
}

Ülaltoodud koodiploki liidesed määratlevad meetodid, mida teie konkreetsed klassid peavad rakendama.

Konkreetne aineklass

Järgmine samm on konkreetse aineklassi rakendamine, mis rakendab Teema liides:

// Teema
klassKauplusrakendabTeema{}

Järgmisena lähtestage Teema’s olek Kauplus klass. Katsealuse vaatlejad reageerivad selle oleku muutustele.

Sel juhul on olek arv ja vaatlejad reageerivad arvu suurenemisele:

// Teema olek
privaatne numberOfProducts: number;

Järgmisena lähtestage vaatlejate massiiv. Selle massiivi abil saate vaatlejaid jälgida:

// vaatlejate lähtestamine
privaatne vaatlejad: vaatleja[] = [];

Võite leida mõningaid vaatleja mustri rakendusi kasutades a Määrake andmestruktuur massiivi asemel, et jälgida vaatlejat. Komplekti kasutamine tagab, et sama vaatleja ei ilmu kaks korda. Kui soovite selle asemel kasutada massiivi, peaksite kontrollima, kas teie arvutis pole vaatlejaid kinnitada meetod.

Järgmisena peaksite rakendama Teemameetodid -kinnitada, eralduma, ja teavitada/värskendada— oma betooniklassis.

Rakendada kinnitada meetodil, kontrollige esmalt, kas vaatleja on juba küljes ja kui on, tehke viga. Vastasel juhul lisage vaatleja massiivi kasutades JavaScripti massiivi meetod, suruma:

// Vaatleja(te) kinnitamine
attachObserver (vaatleja: vaatleja): tühine {
// Kontrollige, kas vaatleja on juba lisatud
konst vaatleja eksisteerib = see.observers.includes (vaatleja);
if (observerExists) {
viskamauusViga('Vaatleja on juba tellitud');
 }
// Lisage uus vaatleja
see.vaatlejad.push(vaatleja);
}

Järgmisena rakendage oma eralduma meetodit, leides indeksi ja eemaldades selle JavaScripti abil massiivist splaiss meetod.

Võib esineda stsenaariume, kus vaatleja, mida proovite eraldada, on juba eraldatud või teda ei tellitud. Peaksite neid stsenaariume käsitlema tingimuslause lisamisega, et kontrollida, kas vaatleja on massiivis või komplektis.

// Vaatleja(te) eemaldamine
detachObserver (vaatleja: vaatleja): tühine {
konsool.log(`Vaatleja eraldumine ${JSON.stringify (vaatleja)}`);
konst vaatlejaindeks = see.observers.indexOf (vaatleja);
if (observerIndex -1) {
viskamauusViga('Vaatlejat pole olemas');
 }
see.vaatlejad.liitmine(vaatlejaindeks, 1);
 console.log('Vaatleja läks lahti...');
}

Järgmisena rakendage oma teavitada/värskendada meetodit, sirvides oma vaatlejate loendit ja helistades värskendada igaühe meetod:

// Vaatlejate teavitamine
notifyObserver(): tühine {
 console.log('Vaatlejate teavitamine...');
jaoks (konst vaatleja kohtasee.observers) {
 Observer.update(see);
 }
}

Lõpuks jaoks Teema klassis, rakendage meetodit, mis manipuleerib olekuga ja teavitab seejärel vaatlejaid muutusest, helistades nendele teavitada/värskendada meetod. See näide on lihtsustatud, kuidas subjekt võib toimingu sooritada ja seejärel vaatlejaid teavitada:

// Oleku muutmine ja vaatlejate teavitamine
uusToode (tooted: number): tühine {
see.numberOfProducts += tooted;
 console.log('Uus toode lisatud poodi');
see.notifyObserver();
}

Konkreetsed vaatlejaklassid

Väljaandja tellimiseks looge vaatlejaklass või -klassid. Iga vaatlejaklass peab rakendama Vaatleja liides.

Vaatlejaklassid rakendavad a teavitada/värskendada meetod, mida peaks kutsuma ainult vaadeldav objekt. See meetod peaks sisaldama kogu äriloogikat, mida peate käivitama vastuseks subjekti oleku muutumisele.

// Betoonivaatleja 1
klassInventuurrakendabVaatleja{
värskendada(): tühine {
 console.log('Poodi lisati uus toode, laoseisu uuendamine...');
// Siia läheb tegelik äriloogika...
	}
}
// Betoonivaatleja 2
klassKlientrakendabVaatleja{
värskendada(): tühine {
 console.log('Poodi lisandus uus toode, pean vaatama minema...');
// Siia läheb tegelik äriloogika...
 }
}

Vaatleja mustri kasutamine

Selle mustri kasutamiseks looge konkreetne teema ja vaatleja klassid. Kui olete seda teinud, helistage subjektile kinnitada meetod ja edasta Observeri eksemplar argumendina. Vastuseks lisab subjekt selle eksemplari oma vaatlejate loendisse:

// Instantseeriv subjekt ja vaatleja
konst kauplus = uus Store();
konst inventar = uus Inventory();
konst klient = uus Klient()
// Objektide tellimine kirjastajale
kauplus.attachObserver(inventar);
kauplus.attachObserver(klient);
// Subjekti oleku muutmine
kauplus.uus toode(30);

See kood simuleerib oleku muutust. Muudatus käivitab teavitusmeetodi Teema klass. See meetod omakorda nimetab teatama meetodit iga vaatleja kohta. Seejärel juhib iga vaatleja oma äriloogikat.

Kasutage seda mustrit ainult siis, kui ühe objekti oleku muudatused mõjutavad teisi objekte ja kaasatud objektide komplekt on tundmatu või dünaamiline.

Vaatlusmustri kasutamise eelised

Selle mustri kasutamine koodis võimaldab säilitada avamise/sulgemise põhimõtte. Saate lisada nii palju tellijaid kui soovite ja luua objektide vahel käitusajal suhteid ilma subjekti koodi muutmata.