Moștenirea și extinderea obiectelor cu JavaScript

Dacă sunteți familiarizați cu programarea orientată pe obiecte, sunteți cel mai probabil familiarizați cu subclasarea și moștenirea. Cu toate acestea, moștenirea a fost un rau rău. Cred că acest lucru se datorează faptului că unii dezvoltatori o văd ca pe o soluție de capcană atunci când trebuie să modificați un program. Problema cu aceasta este că ierarhiile de clasă pot deveni imposibil de gestionat. 

Există și alte modele de design pe care le putem folosi pentru a face aplicațiile noastre mai ușor de înțeles și pregătite pentru schimbare. Vă voi arăta exemple cu privire la modul în care puteți folosi moștenirea și decoratorul și modelul compozit pentru a îmbunătăți designul programului dvs..

Moştenire

Ideea din spatele moștenirii este că un obiect "este o" versiune specializată a unui alt obiect. Există o clasă parentală (cunoscută și ca superclaj) care definește proprietățile de bază ale obiectului nostru. Și există o clasă de copii (subclasă) care moștenește proprietățile clasei părinte. 

Un exemplu de moștenire este un câine și un pudel. Toți câinii au anumite caracteristici, cum ar fi cele patru picioare și capacitatea de a latra. Un pudel "este un fel de câine. Un SUV este un vehicul. Un cerc este o formă. Ierarhia de clasă va arăta astfel dacă am fi proiectat un program pentru crearea de forme.

Beneficiul de a avea o clasă Shape este că reutilizăm proprietățile și metodele pe care le-am definit în alte clase. 

Observați că getArea metoda a fost redefinită în fiecare dintre subclasele noastre. Nu a fost nevoie să redefinim această metodă, dar am făcut-o pentru a înlocui implementarea metodei de către părintele nostru. Aceasta deoarece fiecare formă va avea propriul mod de a calcula zona. 

Suprascrierea unei metode părinte într-o clasă de copii este un exemplu de polimorfism. Polimorfismul este capacitatea obiectelor de a avea forme multiple. Permite subclaselor să aibă metode cu același nume ca superclasele lor, dar cu implementări diferite.  

Acesta este un exemplu de aspect al codului nostru pentru crearea unei subclase Shape and Circle:

clasa Shape constructor (x, y) this.xPosition = x; this.yPosition = y;  getArea () ... Cercul de clasă extinde Forma constructor (x, y, radius) super (x, y, rază); this.radius = radius getArea () ... permite cerc = cerc nou (1,2,3);

Unul dintre dezavantajele acestei opțiuni de proiectare este că, dacă decideți că clasa părinte trebuie schimbată, atunci ar trebui să se schimbe și subclasele împreună cu toate obiectele create. 

De exemplu, să presupunem că am decis ulterior că ar fi mai bine să înlocuiți parametrii x și y ai clasei Shape cu un obiect. În consecință, ar trebui să schimbăm constructorul pentru toate subclasele noastre și argumentele pentru fiecare obiect pe care l-am instanțiat.

Putem vedea cum acest lucru poate deveni cu ușurință problematic. Ar trebui să ne asigurăm că am fost proiectat corect pentru prima dată, astfel încât să evităm o schimbare. Dar acest lucru nu este practic și nici nu trebuie să ne străduim. Un program este o entitate mereu în evoluție și este mai bine pentru dezvoltatorii noștri dacă avem flexibilitatea de a face schimbările cu ușurință. Cel puțin, nu ar trebui să avem mai mult de un nivel de clase pentru copii.

Modelul Decoratorului

Un decorator ne permite să atașăm proprietăți unui obiect după ce au fost create. Aceasta înseamnă că putem adăuga funcționalități fără a subclasa sau de a ne preocupa de implementarea obiectului nostru. 

În loc să credem că un cerc este o formă, am putea folosi clasa Shape pentru a crea cercuri și a le înfășura cu proprietățile suplimentare dorite. Iată o alternativă la crearea obiectelor de cerc utilizând un decorator:

clasă Shape constructor (date) this.x = data.x; this.y = data.y;  funcția getArea () ... CircleDecorator (formă) shape.radius = 3; shape.getArea = funcția () ...; forma întoarsă;  a da formă = noua formă (x: 1, y: 2); permite cercul = nou CircleDecorator (forma);

Putem adăuga sau modifica membrii clasei Shape cu un decorator, spre deosebire de subclasarea acestuia. Cu exemplul nostru de forme, s-ar putea să găsiți că doriți doar să creați un obiect de cerc care să aibă toate proprietățile de care aveți nevoie și să faceți același lucru pentru alte forme. Asta este bine. Dar un decorator ne permite să reutilizăm codul în clasa Shape și să îl modificăm cu funcționalitatea care diferă cu fiecare formă. Ca rezultat, vom avea mai multe obiecte, dar mai multe obiecte sunt mai ușor de gestionat decât mai multe subclase.

Acest model nu se limitează la crearea graficii. Puteți să o utilizați în orice situație în care doriți să adăugați responsabilități unui obiect. 

De exemplu, este posibil să avem o clasă care să gestioneze înscrierea utilizatorilor în contul nostru. Înainte de a le salva informațiile în baza noastră de date, ar fi înțelept să verificăm dacă intrarea este validă și nu conține nici un script malware. Am putea decora clasa cu o metodă de validare a informațiilor. Același decorator poate fi reutilizat oriunde în aplicația noastră unde acceptăm introducerea de către utilizator.

Modelul compozit

Obiectele pot fi compuse din alte obiecte. Vizualizarea pentru o aplicație poate fi considerată ca o componentă care este compusă din alte puncte de vedere. Dacă făceam un joc, lumea jocurilor noastre ar afișa toată grafica pe care am creat-o ca cercuri și pătrate. De fiecare dată când ne actualizăm viziunea, trebuie să redesemnăm fiecare element. Avem nevoie de o modalitate de a gestiona toate elementele ca grup. 

Acesta este locul unde modelul compozit ne poate ajuta. Putem crea o clasă responsabilă de toate elementele. Când vrem să redrafim elementele, numim metoda de tragere a acestei clase și se va numi metoda de tragere la fiecare element individual.  

componentă de clasă constructor (nume) this.components = []; this.element = document.createElement (nume);  adăugați (elem) this.components.push (elem);  draw () pentru (const elem of this.components) elem.draw ();  Cerc de clasă constructor (date) this.x = data.x; this.y = data.y; this.radius = data.radius;  getArea () ... trage () ... lasa lume = noua componenta ('div'); cerc cerc = cerc nou (x: 1, y: 1, rază: 2); lasa cerc2 = cerc nou (x: 10, y: 10, raza: 2); world.add (cerc); world.add (CIRCLE2); world.draw ();

O pagină web poate fi considerată, de asemenea, ca o componentă. Această componentă ar putea avea un meniu, o bara laterală și un post de blog. Postul ar fi o subcomponentă care are o imagine, un titlu și un corp. a desena pentru componenta principală a aplicației noastre va atrage remiză pe meniu, pe bara laterală și pe post. Componenta post va invita la rândul său să atragă imaginea postului, titlul și corpul. 

Iată o imagine a ceea ce ar vrea o pagină web împărțită în componente:

Acest model nu se limitează la crearea de vizualizări. De exemplu, dacă facem un joc, este posibil să avem o componentă pentru a gestiona elementele de pe ecran, o componentă pentru a gestiona sunetul și o componentă pentru a gestiona starea jocului. 

Acestea ar fi toate în interiorul unei componente pe care o numesc motorul de joc. Motorul de joc ar avea o metodă de inițializare care ar numi metoda inițializării pe fiecare dintre subcomponentele sale. Aceasta este puterea utilizării modelului compozit. În loc să ne ocupăm de obiecte individuale, le putem trata ca un obiect.  

Concluzie

Moștenirea ne permite să reutilizăm codul prin definirea unui obiect în termeni de alt obiect. Modelul de decorator ne permite să adăugăm responsabilități unui obiect fără a schimba codul original sau subclasarea. Modelul compozit modelează relații între părți. Aceste modele nu sunt menite a fi utilizate în mod izolat. 

JavaScript a devenit limba de lucru pe web. Nu este fără curbele sale de învățare, și există o mulțime de cadre și biblioteci pentru a vă menține ocupați. Dacă sunteți în căutarea unor resurse suplimentare pentru a studia sau a utiliza în munca dvs., verificați ce avem disponibil pe Envato Market.

Ele pot fi combinate după cum doriți. Exemplele pe care le-am furnizat, de asemenea, nu ar trebui considerate ca singura cerere de utilizare a modelelor. Ele sunt doar un ghid. Simțiți-vă libertatea de a vă folosi creativitatea pentru a le aplica. Nu există nici o modalitate de a le pune în aplicare sau un caz de utilizare.

Cod