Kako uporabljati vzorce oblikovanja JavaScript

Vzorci načrtovanja JavaScript zagotavljajo preizkušene rešitve za običajne težave pri razvoju programske opreme. Razumevanje in uporaba teh vzorcev vam bo omogočilo pisanje boljše in učinkovitejše kode JavaScript.

Uvod v oblikovalske vzorce JavaScript

Koncepti, ki jih vsebujejo oblikovalski vzorci JavaScript, vas vodijo, kako premagati pogoste težave, s katerimi se srečujete kot razvijalec JavaScript.

Morali bi razumeti osnovne abstrakcije, ki so v ozadju vzorcev, da jih lahko uporabite za svojo težavo. Prav tako bi morali biti sposobni ugotoviti, kdaj je kateri od omenjenih vzorcev lahko koristen za vašo kodo.

Vzorec modula

Vzorec Module, ki zagotavlja enkapsulacijo, je del sistem modulov JavaScript. Zagotavlja način za zaščito zasebnih podatkov in vedenja znotraj modula, medtem ko razkriva javni API. Omogoča vam ustvarjanje samostojnih objektov modulov z zasebnimi in javnimi stopnjami dostopa.

To je malo podobno temu, kako lahko uporabite modifikatorje dostopa do razreda v jeziku, kot je Java ali C++.

V JavaScriptu lahko implementirate vzorec Module z zapiranjem.

Z uporabo zaprtja za zaprtje zasebnih članov (funkcij, spremenljivk, podatkov) ustvarite obseg, kjer so ti člani dostopni, vendar niso neposredno izpostavljeni zunanjemu svetu. To pomaga doseči enkapsulacijo, pri čemer notranje podrobnosti ostanejo skrite pred zunanjo kodo.

Poleg tega vrnitev javnega API-ja iz zaprtja omogoča zasebni dostop do določenih funkcij ali lastnosti, ki jih želite izpostaviti kot del vmesnika modula.

To vam bo dalo nadzor nad tem, kateri deli modula so dostopni drugim delom kodne baze. To ohranja jasno mejo med javno in zasebno funkcionalnostjo.

Tukaj je primer:

konst ShoppingCartModule = (funkcijo () {
// Zasebni podatki
pustiti cartItems = [];
// Zasebna metoda
funkcijoizračunTotalItems() {
vrnitev cartItems.reduce((skupaj, postavka) => skupaj + količina artikla, 0);
 }
// Javni API
vrnitev {
 addItem (postavka) {
 cartItems.push (postavka);
 },
 getTotalItems() {
vrnitev izračunaSkupajPredmetov();
 },
 clearCart() {
 cartItems = [];
 }
 };
})();
// Primer uporabe
ShoppingCartModule.addItem({ ime: 'Izdelek 1', količino: 2 });
ShoppingCartModule.addItem({ ime: 'Izdelek 2', količino: 1 });
konzola.log (ShoppingCartModule.getTotalItems()); // Izhod: 3
ShoppingCartModule.clearCart();
konzola.log (ShoppingCartModule.getTotalItems()); // Izhod: 0

V tem primeru je ShoppingCartModule predstavlja modul, ustvarjen z uporabo vzorca modula. Izvedba kode poteka takole:

1. The IIFE ovije celoten blok kode in ustvari funkcijo, ki se izvede takoj po deklaraciji. To vzpostavi zasebni obseg za člane modula.
2. cartItems je zasebno polje. Ni neposredno dostopen izven modula.
3. izračunaTotalItems() je zasebna metoda, ki izračuna skupno število artiklov v košarici. Uporablja zmanjšati () metoda za ponavljanje cartItems niz in seštejte količine vseh artiklov.
4. Modul vrne svoj javni API kot objektni literal, pri čemer izpostavi tri javne metode: addItem(), getTotalItems(), in clearCart().
5. Zunaj modula lahko dostopate do javnih metod modula za interakcijo s funkcionalnostjo nakupovalnega vozička.

Ta primer prikazuje, kako vam vzorec modula omogoča enkapsulacijo zasebnih podatkov (cartItems) in vedenje (izračunTotalItems) znotraj modula, medtem ko zagotavlja javni vmesnik (addItem, getTotalItems, in clearCart) za interakcijo z modulom.

Vzorec opazovalca

Vzorec Opazovalec vzpostavlja odvisnost med objekti eden proti mnogo. Ko se stanje enega objekta spremeni, obvesti vse svoje odvisnike in se samodejno posodobijo. Ta vzorec je še posebej uporaben za upravljanje interakcij, ki jih vodijo dogodki, ali za ločevanje komponent v sistemu.

V JavaScriptu lahko implementirate vzorec Opazovalec z uporabo vgrajenega addEventListenerja, dispatchEvent metode ali katere koli mehanizmi za obravnavo dogodkov. Če naročite opazovalce na dogodke ali teme, jih lahko obvestite in posodobite, ko pride do določenih dogodkov.

Na primer, lahko uporabite vzorec Opazovalec za implementacijo preprostega sistema obveščanja:

// Implementacija vzorca opazovalca
funkcijoNotificationSystem() {
// Seznam naročnikov
to.subscribers = [];
// Metoda za naročanje na obvestila
to.subscribe = funkcijo (naročnik) {
to.subscribers.push (naročnik);
 };
// Metoda za odjavo od obvestil
to.odjava = funkcijo (naročnik) {
konst indeks = to.subscribers.indexOf (naročnik);
če (indeks !== -1) {
to.subscribers.splice (indeks, 1);
 }
 };
// Metoda obveščanja naročnikov
to.obvesti = funkcijo (sporočilo) {
to.subscribers.forEach(funkcijo (naročnik) {
 subscriber.receiveNotification (sporočilo);
 });
 };
}
// Objekt naročnika
funkcijoNaročnik(ime) {
// Metoda za prejemanje in obravnavanje obvestil
to.receiveNotification = funkcijo (sporočilo) {
konzola.log (ime + 'prejeto obvestilo:' + sporočilo);
 };
}
// Primer uporabe
konst notificationSystem = novo NotificationSystem();
// Ustvarite naročnike
konst naročnik1 = novo Naročnik('Naročnik 1');
konst naročnik2 = novo Naročnik('Naročnik 2');
// Naročite naročnike na sistem obveščanja
notificationSystem.subscribe (naročnik1);
notificationSystem.subscribe (naročnik2);
// Obveščanje naročnikov
notificationSystem.notify('Novo obvestilo!');

Cilj tukaj je omogočiti več naročnikom prejemanje obvestil, ko pride do določenega dogodka.

The NotificationSystem funkcija predstavlja sistem, ki pošilja obvestila, in Naročnik funkcija predstavlja prejemnike obvestil.

NotificationSystem ima imenovano matriko naročnikov za shranjevanje naročnikov, ki želijo prejemati obvestila. The naročite se omogoča naročnikom, da se registrirajo tako, da se dodajo v matriko naročnikov. The odjavi se metoda bi odstranila naročnike iz matrike.

The obvestiti metoda v sistemu NotificationSystem ponovi matriko naročnikov in pokliče receiveNotification metodo za vsakega naročnika, ki jim omogoča obdelavo obvestil.

Primerki funkcije Subscriber predstavljajo naročnike. Vsak naročnik ima metodo receiveNotification, ki določa, kako ravna s prejetimi obvestili. V tem primeru metoda zabeleži prejeto sporočilo v konzolo.

Če želite uporabiti vzorec opazovalca, ustvarite primerek NotificationSystem. Nato lahko ustvarite primerke naročnika in jih dodate v sistem obveščanja z uporabo metode naročnine.

Pošiljanje obvestila bo sprožilo metodo receiveNotification za vsakega naročnika in zabeležilo sporočilo za vsakega naročnika.

Vzorec Observer omogoča ohlapno povezavo med sistemom obveščanja in naročniki, kar omogoča prilagodljivost. Vzorec spodbuja ločevanje skrbi, kar bo olajšalo vzdrževanje v sistemih, ki jih vodijo dogodki.

Uporaba naprednih vzorcev JavaScript

Tukaj je nekaj splošnih nasvetov za učinkovito uporabo naprednih vzorcev JavaScript:

• Upoštevajte posledice za zmogljivost: napredni vzorci lahko povzročijo dodatno zapletenost, kar lahko vpliva na zmogljivost. Bodite pozorni na posledice delovanja in po potrebi optimizirati.
• Izogibajte se anti-vzorcem: temeljito razumejte vzorce in se izogibajte padcu v anti-vzorce ali njihovi zlorabi. Uporabite vzorce, kjer so smiselni in so v skladu z zahtevami vaše aplikacije.
• Upoštevajte konvencije kodiranja: dosledno upoštevajte konvencije kodiranja, da ohranite berljivost in doslednost v svoji osnovi kode. Uporabite smiselna imena spremenljivk in funkcij ter zagotovite jasno dokumentacijo za svoje vzorce.

Bodite previdni pri uporabi teh vzorcev

Vzorec modula omogoča enkapsulacijo in spodbuja zasebnost podatkov, organizacijo kode in ustvarjanje samostojnih modulov.

Po drugi strani pa vzorec Opazovalec olajša komunikacijo med komponentami z vzpostavitvijo odnosa subjekt-naročnik.

Zavedati se morate morebitnih pasti in pogostih napak pri izvajanju naprednih vzorcev JavaScript. Izogibajte se pretirani uporabi vzorcev, kjer obstajajo enostavnejše rešitve, ali ustvarjanju preveč zapletene kode. Redno pregledujte in preoblikujte kodo, da zagotovite, da jo je mogoče vzdrževati.