JavaScript-suunnittelumallien käyttäminen

JavaScript-suunnittelumallit tarjoavat todistettuja ratkaisuja yleisiin ohjelmistokehityksen ongelmiin. Näiden mallien ymmärtäminen ja soveltaminen antaa sinun kirjoittaa parempaa ja tehokkaampaa JavaScript-koodia.

Johdatus JavaScript-suunnittelumalliin

JavaScript-suunnittelumallien sisältämät käsitteet auttavat sinua selviytymään yleisistä ongelmista, joita JavaScript-kehittäjänä kohtaat.

Sinun tulisi ymmärtää kuvioiden taustalla olevat abstraktiot, jotta voit soveltaa niitä tiettyyn ongelmaasi. Sinun pitäisi myös pystyä tunnistamaan, milloin jokin mainituista malleista voi olla hyödyllinen koodillesi.

Moduulimalli

Moduulikuvio, joka tarjoaa kapseloinnin, on osa JavaScriptin moduulijärjestelmä. Se tarjoaa tavan suojata yksityisiä tietoja ja käyttäytymistä moduulissa ja paljastaa samalla julkisen sovellusliittymän. Sen avulla voit luoda itsenäisiä moduuliobjekteja yksityisillä ja julkisilla käyttöoikeustasoilla.

Tämä on vähän niin kuin voit käyttää käyttöoikeusmääritteitä luokassa jollakin kielellä, kuten Java tai C++.

JavaScriptissä voit toteuttaa moduulikuvion sulkimilla.

Käyttämällä sulkemista yksityisten jäsenten (funktioiden, muuttujien, tietojen) sulkemiseen, luot laajuuden, jossa nämä jäsenet ovat käytettävissä, mutta eivät suoraan ulkomaailmalle. Tämä auttaa saavuttamaan kapseloinnin ja pitämään sisäiset yksityiskohdat piilossa ulkoiselta koodilta.

Lisäksi julkisen API: n palauttaminen sulkemisesta mahdollistaa yksityisen pääsyn tiettyihin toimintoihin tai ominaisuuksiin, jotka haluat paljastaa osana moduulin käyttöliittymää.

Tämä antaa sinulle mahdollisuuden hallita sitä, mitkä moduulin osat ovat muiden koodikannan osien käytettävissä. Tämä säilyttää selkeän rajan julkisen ja yksityisen toiminnallisuuden välillä.

Tässä on esimerkki:

konst ShoppingCartModule = (toiminto () {
// Yksityiset tiedot
antaa cartItems = [];
// Yksityinen menetelmä
toimintoLaskeTotalItems() {
palata cartItems.reduce((yhteensä, kohde) => yhteensä + nimike.määrä, 0);
 }
// Julkinen API
palata {
 addItem (tuote) {
 cartItems.push (tuote);
 },
 getTotalItems() {
palata laskeaTotalItems();
 },
 clearCart() {
 cartItems = [];
 }
 };
})();
// Käyttöesimerkki
ShoppingCartModule.addItem({ nimi: "Tuote 1", määrä: 2 });
ShoppingCartModule.addItem({ nimi: "Tuote 2", määrä: 1 });
konsoli.log (ShoppingCartModule.getTotalItems()); // Tulos: 3
OstoskoriModule.clearCart();
konsoli.log (ShoppingCartModule.getTotalItems()); // Lähtö: 0

Tässä esimerkissä Ostoskorimoduuli edustaa moduulia, joka on luotu käyttämällä moduulimallia. Koodin suoritus menee näin:

1. The IIFE kääri koko koodilohkon luoden funktion, joka suoritetaan välittömästi ilmoituksen jälkeen. Tämä luo yksityisen toiminta-alueen moduulin jäsenille.
2. cartTuotteet on yksityinen joukko. Siihen ei pääse suoraan moduulin ulkopuolelta.
3. laske TotalItems() on yksityinen menetelmä, joka laskee ostoskorissa olevien tuotteiden kokonaismäärän. Se käyttää vähentää() tapa iteroida yli cartTuotteet rivittää ja laskea yhteen kaikkien kohteiden määrät.
4. Moduuli palauttaa julkisen API: nsa objektikirjaimella paljastaen kolme julkista menetelmää: lisää tavara(), getTotalItems(), ja tyhjennä ostoskori().
5. Moduulin ulkopuolella voit käyttää moduulin julkisia menetelmiä ollaksesi vuorovaikutuksessa ostoskoritoimintojen kanssa.

Tämä esimerkki osoittaa, kuinka moduulikuvio mahdollistaa yksityisten tietojen kapseloinnin (cartTuotteet) ja käyttäytyminen (LaskeTotalItems) moduulissa tarjoten samalla julkisen käyttöliittymän (lisää tavara, getTotalItems, ja ClearCart) ollaksesi vuorovaikutuksessa moduulin kanssa.

Tarkkailijamalli

Observer-malli määrittää objektien välille yksi-moneen riippuvuuden. Kun yhden objektin tila muuttuu, se ilmoittaa kaikille sen huollettaville, ja ne päivittyvät automaattisesti. Tämä malli on erityisen hyödyllinen tapahtumalähtöisten vuorovaikutusten hallinnassa tai järjestelmän komponenttien irrottamisessa.

JavaScriptissä voit ottaa käyttöön Observer-mallin käyttämällä sisäänrakennettua addEventListeneria, dispatchEvent menetelmiä tai mitä tahansa tapahtumankäsittelymekanismeja. Tilaamalla tarkkailijoita tapahtumiin tai aiheisiin, voit ilmoittaa heille ja päivittää niitä, kun tiettyjä tapahtumia tapahtuu.

Voit esimerkiksi käyttää Observer-mallia yksinkertaisen ilmoitusjärjestelmän toteuttamiseen:

// Tarkkailijamallin toteutus
toimintoIlmoitusjärjestelmä() {
// Lista tilaajista
Tämä.tilaajat = [];
// Tapa tilata ilmoitukset
Tämä.tilaa = toiminto (tilaaja) {
Tämä.subscribers.push (tilaaja);
 };
// Tapa peruuttaa ilmoitusten tilaus
Tämä.peruuta tilaus = toiminto (tilaaja) {
konst indeksi = Tämä.subscribers.indexOf (tilaaja);
jos (indeksi !== -1) {
Tämä.subscribers.splice (indeksi, 1);
 }
 };
// Tapa ilmoittaa tilaajille
Tämä.notify = toiminto (viesti) {
Tämä.subscribers.forEach(toiminto (tilaaja) {
 subscriber.receiveNotification (viesti);
 });
 };
}
// Tilaajaobjekti
toimintoTilaaja(nimi) {
// Ilmoitusten vastaanotto- ja käsittelytapa
Tämä.receiveNotification = toiminto (viesti) {
konsoli.log (nimi + ' vastaanotettu ilmoitus:' + viesti);
 };
}
// Käyttöesimerkki
konst ilmoitusjärjestelmä = Uusi Ilmoitusjärjestelmä();
// Luo tilaajia
konst tilaaja1 = Uusi Tilaaja("Tilaaja 1");
konst tilaaja2 = Uusi Tilaaja("Tilaaja 2");
// Tilaa tilaajat ilmoitusjärjestelmään
NotificationSystem.subscribe (tilaaja1);
NotificationSystem.subscribe (tilaaja2);
// Ilmoita tilaajille
notifySystem.notify("Uusi ilmoitus!");

Tavoitteena on sallia useiden tilaajien saada ilmoituksia tietyn tapahtuman sattuessa.

The Ilmoitusjärjestelmä toiminto edustaa järjestelmää, joka lähettää ilmoituksia, ja Tilaaja toiminto edustaa ilmoitusten vastaanottajia.

Ilmoitusjärjestelmässä on taulukko nimeltä tilaajia tallentaa tilaajat, jotka haluavat vastaanottaa ilmoituksia. The tilata Menetelmä mahdollistaa tilaajien rekisteröitymisen lisäämällä itsensä tilaajataulukkoon. The Lopeta tilaus menetelmä poistaisi tilaajat taulukosta.

The ilmoittaa NotificationSystemin menetelmä toistuu tilaajataulukon läpi ja kutsuu vastaanota ilmoitus jokaiselle tilaajalle, jolloin he voivat käsitellä ilmoituksia.

Tilaaja-toiminnon esiintymät edustavat tilaajia. Jokaisella tilaajalla on ReceiveNotification-menetelmä, joka määrittää, kuinka he käsittelevät vastaanotettuja ilmoituksia. Tässä esimerkissä menetelmä kirjaa vastaanotetun viestin konsoliin.

Jos haluat käyttää tarkkailijakuviota, luo NotificationSystem-esiintymä. Tämän jälkeen voit luoda Tilaajan esiintymiä ja lisätä ne ilmoitusjärjestelmään tilausmenetelmällä.

Ilmoituksen lähettäminen käynnistää getNotification-menetelmän jokaiselle tilaajalle ja kirjaa viestin jokaiselle tilaajalle.

Observer-kuvio mahdollistaa löysän kytkennän ilmoitusjärjestelmän ja tilaajien välillä, mikä mahdollistaa joustavuuden. Malli edistää huolenaiheiden erottamista, mikä helpottaa ylläpitoa tapahtumapohjaisissa järjestelmissä.

Kehittyneiden JavaScript-mallien käyttäminen

Tässä on joitain yleisiä vinkkejä edistyneiden JavaScript-mallien tehokkaaseen käyttöön:

• Harkitse suorituskyvyn vaikutuksia: Kehittyneet mallit voivat lisätä monimutkaisuutta, mikä voi vaikuttaa suorituskykyyn. Ole tietoinen suorituskyvyn vaikutuksista ja optimoida tarvittaessa.
• Vältä anti-kuvioita: Ymmärrä kuviot perusteellisesti ja vältä joutumasta anti-kuvioihin tai käyttämästä niitä väärin. Käytä malleja siellä, missä ne ovat järkeviä ja sopivat sovelluksesi vaatimuksiin.
• Noudata koodauskäytäntöjä: Noudata johdonmukaisesti koodauskäytäntöjä säilyttääksesi luettavuuden ja johdonmukaisuuden koko koodipohjassasi. Käytä merkityksellisiä muuttujien ja funktioiden nimiä ja anna selkeät asiakirjat kuvioistasi.

Ole varovainen käyttäessäsi näitä kuvioita

Moduulimalli mahdollistaa kapseloinnin ja edistää tietojen yksityisyyttä, koodin järjestämistä ja itsenäisten moduulien luomista.

Toisaalta Observer-malli helpottaa komponenttien välistä viestintää muodostamalla subjekti-tilaaja-suhteen.

Sinun tulee olla tietoinen mahdollisista sudenkuopat ja yleisistä virheistä, kun otat käyttöön edistyneitä JavaScript-malleja. Vältä käyttämästä liikaa malleja siellä, missä on yksinkertaisempia ratkaisuja, tai luomasta liian monimutkaista koodia. Tarkista ja muokkaa koodisi säännöllisesti varmistaaksesi, että se pysyy ylläpidettävänä.