JavaScript-suunnittelumallit, osa 1: Tehdaskuvio

Kuva Patrick Hendry on Unsplash

Viime aikoina projektien, joissa minulla on ollut tilaisuus työskennellä, laajuus on kasvanut, olen käyttänyt aikaa syventyä suunnittelumallien kirjoittamiseen ylläpitävämpää ja skaalautuvampaa Javascript-koodia. Suunnittelumallit ovat loistava tapa soveltaa aika- ja taistelutestattuja ratkaisuja yleisiin ongelmiin, jotta voimme ratkaista ne nopeammin ja tehokkaammin.

Suurin osa suunnittelumallista, joita käsittelemme, perustuvat oliopohjaiseen ohjelmointiin ja sellaisena on vain järkevää, että aloitamme tarkastelemalla niin kutsuttua luomistuskuviota, koska kuvio tarjoaa meille selkeän käyttöliittymän objektien luomiseksi samalla kun abstrakti niiden luomiseen liittyvä monimutkaisuus tai logiikka. Tätä mallia kutsutaan tehdaskuviona, ja sen avulla voimme helposti luoda esineitä JavaScript-muodossa.

Muista OOP: n luokkapohjaisista kielistä lähtöisin voi olla kiusaus ajatella, että alla olevalla koodirivillä teemme luokkien ja esiintymien luomista, mutta todellisuudessa tämä on vain syntaktista sokeria, joka on tehty näyttämään luokan syntaksilta. pohjainen kieli.

Mitä todella teemme, hyödynnetään JavaScriptin prototyyppistä perintöä ja OLOO - objekteja, jotka linkittävät muihin objekteihin, luoda objekteja jaetulla prototyypillä. Prototyyppi itsessään on vain tavallinen JavaScript-objekti eikä luokka sanan todellisessa merkityksessä. Upea selitys perinnöstä Javascriptissa ja sen eroista klassiseen perintöön löytyy Eric Elliotin artikkelista täältä.

Sukellaan johonkin koodiin.

Kaikki tämän sarjan esimerkit ovat saatavilla Githubissa täällä ja sisältävät ohjeet koodin suorittamiseen.

Tämän artikkelin koodin suorittaminen edellyttää, että Solmu on asennettu koneellesi. Noudata näitä ohjeita, jos sinulla ei vielä ole sitä. Jos seuraat repon mukana, löydät ohjeet koodin suorittamiseksi readme-sovelluksessa.

Ensinnäkin luodaan kansio. Voimme kutsua sitä javascript-suunnittelumalliksi tässä kansiossa. Luomme tehdaskansion.

Tehdaskuvio toiminnassa

Tehdaskuvio kääri konstruktorin erityyppisille objekteille ja palauttaa objektien esiintymät yksinkertaisella API: lla. Eri kohteiden luominen on helppoa paljastamalla yksinkertainen sovellusliittymä, joka palauttaa määritetyn objektityypin.

Aloitetaan luomalla rakentajamme. Nämä toiminnot vastaavat tietyntyyppisten uusien esineiden palauttamisesta, kun ne käynnistetään.

Luomme tehdaskansiossa laptop.js-tiedosto.

const Kannettava tietokone = toiminto ({ram, hdd, nimi}) {
  tämä.ram = ram || 0;
  tämä.hdd = hdd || 0;
  tämä.nimi = nimi || "";
};
module.exports = Kannettava tietokone;

Tässä tiedostossa luomme kannettavan tietokoneen rakennustoiminnon. Se hyväksyy objektin parametrina, jolla on attribuutteja objektin pikakelaamiseksi erilaisilla kuvauksilla, jotka haluamme kaapata - tässä tapauksessa RAM-koon, kiintolevyn koon ja laitteen nimen.

Sen jälkeen viemme kannettavan tietokoneen rakennustoiminnon moduulista.

Luotaan toinen tiedosto nimeltään tablet.js

Teemme saman asian, mutta tableteihin osuvampien tietojen kanssa.

const Tablet = toiminto ({ram, hdd, nimi, verkko}) {
    tämä.ram = ram || 0;
    tämä.hdd = hdd || 0;
    this.network = verkko || 0;
    tämä.nimi = nimi || "";
};
module.exports = Tabletti;

Nyt kun meillä on rakentajamme, luokaamme tehdastoiminto, joka paljastaa sovellusliittymän, jotta voidaan luoda uusia esineitä näistä kohteista. Lisää uusi tiedosto nimeltä gadgetFactory.js

const Laptop = vaadi ("./ laptop");
const Tablet = vaadi ("./ tablet");
const-gadget = {Kannettava tietokone, tabletti};
module.exports = {
    createGadget (tyyppi, määritteet) {
        const GadgetType = gadget [type];
        palauttaa uusi GadgetType (määritteet);
    }
};

Tässä aloitamme tuomalla rakentajia kannettavien tietokoneiden ja tablettien luomiseen. Sitten luomme pienoisobjektin käyttämällä avaina konstruktorien nimiä. Tämä antaa meille mahdollisuuden päästä haluamaasi konstruktorityyppiin laitteella [type] - missä tässä esimerkissä tyyppi on joko "Kannettava tietokone" tai "Tablet". Lopuksi viemme objektin tästä moduulista createGadget-menetelmällä. Tämä menetelmä hyväksyy pienoislaitetyypin ensimmäiseksi parametriksi ja kutsuu määritettyyn rakennustyyppiin kuljettaessaan määritteet siihen.

Huomaa, että kun kutsumme funktiota uudella avainsanalla Javascriptissa, saamme vastineeksi tyhjän objektin, jolla on tämä sitova joukko suorittavan toiminnon objektille. Tämä ainutlaatuinen puhelu luo myös prototyyppisen suhteen rakentajatoiminnon ja tällä tavalla luomiemme uusien esineiden välille. Näemme tämän yksityiskohtaisesti muissa suunnittelumallissamme.

Huomion arvoinen on myös se, että iso kirjain on vain yleissopimus eikä vaatimus. Se ei tee mitään erityistä ja voisimme yhtä hyvin nimetä toiminnot camelCase-sovelluksella kuin tavallisesti muiden JavaScriptin muuttujien ja funktioiden nimien kanssa.

Tässä vaiheessa voimme nyt luoda tiedoston, joka käyttää (tai kuluttaa) tehdaskuvio-sovellusliittymäämme.

Luo index.js-tiedosto ja lisää seuraava koodi.

const gadgetFactory = vaatia ("./ gadgetFactory");
const myLaptop = gadgetFactory.createGadget ("Kannettava tietokone", {
    ram: 8,
    ssd: 256,
    nimi: "Bab's MacBook Pro"
});
const myTablet = gadgetFactory.createGadget ("Tablet", {
    ram: 4,
    hdd: 128,
    nimi: "Bab's iPad",
    verkko: '4G'
});
console.log (myLaptop);
console.log (myTablet);

Ensimmäinen asia, jonka saatat huomata, on, että tässä tiedostossa emme vaadi kannettavien ja tablettien valmistajia suoraan. Ainoa mitä tarvitsemme on gadgetFactory-moduuli (sen luomiseen luodaGadget-menetelmä). Tämän menetelmän avulla luodaan sitten kaksi kannettavan ja tablet-laitteen esiintymää ja kirjataan ne ulos konsoliin.

Siirry nyt päätteessäsi javascript-design-patterns-kansioon ja kirjoita:

$ node ./factory/index.js

Seuraavan pitäisi nähdä kirjautuneena konsoliin:

Kannettava tietokone {ram: 8, ssd: 256, nimi: 'Babin MacBook Pro'}
Tabletti {ram: 4, HDD: 128, verkko: '4G', nimi: 'Babin iPad'}

Kuten huomaat, olemme luoneet yhden kannettavan tietokoneen kohdetyypin sekä tabletti-tyypin, jokaisella on omat määritelmänsä. Tätä mallia käyttämällä voit luoda niin monta gadgetiobjektia kuin tarvitset, jokaisella on omat määritelmänsä.

Ja se on se tehdaskuviolle. Tämä on tietysti melko yksinkertaistettu toteutus, ja mihin tahansa muuhun kuin triviaaliseen sovellukseen haluat ehdottomasti sisällyttää tiukemman logiikan - esimerkiksi rakentajien ympärille.

Tässä esimerkissä käytimme Javascriptin konstruktoritoimintoja, mutta tämä malli voidaan myös toteuttaa käyttämällä prototyyppejä. Tutkimme tätä myöhemmässä artikkelissa, kun uudistamme koodiamme tehostaaksesi sitä.

Seuraavaksi sarjassa kerrotaan suositusta Publisher / Subscriber -mallista (tai lyhyt PubSub). Pysy ajan tasalla siitä, että seuraat minua ja jätä peukalo ylös (tai 5 ), jos olet löytänyt artikkelista hyödyllisen. Kuten aina, haluaisin kuulla ajatuksesi alla olevissa kommenteissa!

Päivitys: Löydät sarjan osan 2, joka kattaa Kustantaja / Tilaaja -mallin täältä.

Babs on JavaScriptin kehittäjä, joka kirjoittaa pääosin React / React Native & NodeJS (terveellä annoksella GraphQL: tä) päivällä ja kaiken muun JavaScriptin yön suojassa. Löydät hänet Twitteristä ja Instagramista, joissa hän jakaa yksityiskohdat salaisesta rakkaussuhteestaan ​​JavaScriptin kanssa.