In ultima vreme, pe masura ce proiectele la care am avut ocazia sa lucrez au crescut la scara, mi-am luat timp sa aprofundez modelele de proiectare pentru scrierea unui cod Javascript mai usor de intretinut si scalabil. Modelele de proiectare sunt o modalitate excelenta de a aplica solutii testate in timp si lupta la problemele obisnuite, astfel incat sa le putem rezolva mai rapid si mai eficient.

Majoritatea modelelor de design pe care le vom acoperi se bazeaza pe programarea orientata pe obiecte si, ca atare, are sens doar sa incepem prin a arunca o privire asupra unui model de creatie asa-numit, deoarece modelul ne ofera o interfata clara pentru a crea obiecte in timp ce ne abstractionam complexitatea variata sau logica implicata in crearea lor . Acest model, se numeste Factory Pattern si ne permite sa cream cu usurinta obiecte in JavaScript.

Venind din alte limbi OOP, bazate pe clase, s-ar putea sa fim tentati sa credem ca ceea ce vom face in randurile de cod de mai jos este crearea de clase si instante, dar in realitate acesta este doar zahar sintactic facut sa para sintaxa unei clase limbaj bazat.

Ceea ce facem de fapt este sa folosim mostenirea prototipala JavaScript si OLOO – Obiecte care se leaga de alte obiecte pentru a crea obiecte cu un prototip comun.

Array

Prototipul in sine este doar un obiect JavaScript simplu si nu o clasa in adevaratul sens al cuvantului. O explicatie excelenta a mostenirii in Javascript si diferentele sale fata de mostenirea clasica se gaseste in articolul lui Eric Elliot aici.

Sa ne scufundam intr-un cod.

Toate exemplele din aceasta serie vor fi disponibile aici pe Github si vor include instructiuni despre cum sa rulati codul.

Pentru a rula codul din acest articol, va trebui sa aveti Node instalat pe computer. Urmati aceste instructiuni daca nu le aveti deja.

Array

Daca urmariti impreuna cu repo, veti gasi instructiuni pentru rularea codului in readme.

Mai intai, sa cream un folder. Il putem numi javascript-design-patterns in acest folder, vom crea un folder din fabrica.

Modelul fabricii in actiune

Modelul din fabrica infasoara un constructor pentru diferite tipuri de obiecte si returneaza instante ale obiectelor printr-un API simplu. Este usor sa creati diferite obiecte expunand un API simplu care returneaza tipul de obiect specificat.

Sa incepem prin a ne crea constructorii.

Array

Aceste functii vor fi responsabile pentru returnarea obiectelor noi de un anumit tip atunci cand sunt invocate.

In dosarul din fabrica, sa cream un fisier laptop.js.

const Laptop = functie ({ram, hdd, nume}) {

this.ram = ram || 0;

this.

hdd = hdd || 0;

this.name = nume || “”;

}; module.exports = Laptop;

In acest fisier, cream o functie constructor laptop. Accepta un obiect ca parametru cu atribute pentru instantierea obiectului cu diferite specificatii pe care dorim sa le capturam – in acest caz, dimensiunea RAM, dimensiunea HDD si numele dispozitivului.

Dupa aceea, exportam functia Laptop constructor din modul.

Sa cream un alt fisier numit tablet.js

Vom face acelasi lucru, dar cu specificatii mai relevante pentru o tableta.

const Tableta = functie ({ram, hdd, nume, retea}) {

this.ram = ram || 0;

this.hdd = hdd || 0;

this.network = retea || 0;

this.name = nume || “”;

}; module.exports = Tableta;

Acum ca avem constructorii nostri, permiteti-ne sa cream functia din fabrica care va expune API-ul pentru crearea de noi instante ale acestor elemente. Adaugati un fisier nou numit gadgetFactory.js

const Laptop = require (“./ laptop”);

const Tablet = require (“./ tablet”); const gadget = {Laptop, Tablet}; module.exports = {

createGadget (tip, atribute) {

const GadgetType = gadget [type]; returneaza un nou tip de gadget (atribute);

}

};

Aici, incepem prin importarea constructorilor pentru crearea obiectelor pentru laptop si tableta. Apoi cream un obiect gadget folosind numele constructorului ca chei. Acest lucru ne face posibil sa accesam tipul de constructor pe care il dorim folosind gadgetul [tip] – unde in acest exemplu, tipul va fi „Laptop” sau „Tablet”. In cele din urma, exportam un obiect din acest modul cu o metoda createGadget. Aceasta metoda accepta un tip de gadget ca prim parametru si apeleaza tipul de constructor specificat in timp ce ii transmite atributele.

Ar trebui sa retineti ca atunci cand apelam o functie cu noul cuvant cheie in Javascript obtinem in schimb un obiect gol cu ​​un set de legare setat la cel din functia de executare. Acest apel unic va crea, de asemenea, o relatie prototipala intre functia constructor si orice obiecte noi pe care le cream in acest fel. Vom vedea acest lucru in detaliu in celelalte modele de design pe care le vom acoperi.

De asemenea, demn de remarcat este ca prima litera cu majuscule este doar o conventie si nu o cerinta. Nu face nimic special si am fi putut la fel de bine sa numim functiile cu camelCase ca de obicei cu alte nume de variabile si functii in JavaScript.

In acest moment, putem crea acum fisierul care va folosi (sau consuma) modelul nostru API din fabrica.

Creati un fisier index.js si adaugati urmatorul cod.

const gadgetFactory = require (“./ gadgetFactory”); const myLaptop = gadgetFactory.createGadget (“Laptop”, {

ram: 8,

ssd: 256,

name: “Bab’s MacBook Pro”

}); const myTablet = gadgetFactory.createGadget (” Tableta “, {

ram: 4,

hdd: 128,

nume:” iPad-ul lui Bab “,

retea: ‘4G’

}); console.log (myLaptop);

console.log (myTablet);

Primul lucru pe care s-ar putea sa-l observati este ca, in acest fisier, nu avem nevoie direct de constructori pentru laptopuri si tablete. Tot ce trebuie sa avem este modulul gadgetFactory (cu metoda createGadget). Folosind aceasta metoda, cream apoi doua instante ale unui laptop si, respectiv, ale unei tablete si le deconectam de pe consola.

Acum, in terminalul dvs. navigati la folderul javascript-design-patterns si tastati:

$ nod ./factory/index.js

Ar trebui sa vedeti urmatoarele conectate la consola:

Laptop {ram: 8, ssd: 256, nume: ‘Bab \’ s MacBook Pro ‘}

Tableta {ram: 4, hdd: 128, retea:’ 4G ‘, nume:’ Bab \ ‘s iPad’}

Dupa cum puteti vedea, am creat un tip de obiect pentru laptop, precum si un tip de tableta, fiecare cu propriile specificatii. Folosind acest model, puteti crea oricate obiecte gadget doriti, fiecare avand propriile specificatii.

Si atat pentru modelul fabricii. Aceasta este o implementare destul de simplista, desigur, si in orice altceva decat o aplicatie banala, cu siguranta ati dori sa includeti o logica mai stricta – in jurul constructorilor dvs., de exemplu.

In acest exemplu, am folosit functiile constructorului Javascript, dar acest model poate fi implementat si folosind prototipuri. Vom explora acest lucru intr-un articol ulterior atunci cand ne refacturam codul pentru a-l face mai eficient.

In continuare, vom acoperi popularul model Publisher / Subscriber (sau pe scurt PubSub). Pentru a ramane notificat, asigurati-va ca dati-mi o urmarire si, daca ati gasit acest articol util, lasati un deget mare in sus (sau 5 ????). Ca intotdeauna, mi-ar placea sa va aud gandurile in comentariile de mai jos!

Actualizare : Puteti gasi Partea a 2 – a seriei care acopera Publisher / Abonat model aici .

ARTICOLE SIMILAREDE LA ACELAȘI AUTOR