Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. JavaScript
Code

Mana at Pagpapalawak ng mga Bagay Sa Pamamagitan JavaScript

by
Difficulty:IntermediateLength:MediumLanguages:

Tagalog (Wikang Tagalog) translation by Robert Alexander (you can also view the original English article)

Kung ikaw ay pamilyar sa object-oriented programming, ikaw malamang ay pamilyar sa subclassing at mana. Gayunpaman, ang mana ay nakakatanggap ng pangit na alegasyon. Naniniwala ako na dahil sa ang ibang mga developer ay nakikita ito bilang isang solusyon para sa lahat kung kailangan mong baguhin ang isang programa.Ang problema dito ay ang class hierarchies ay maaring maging hindi na makontrol.

Mayroon ibang design patterns na maari natin maggamit upang maggawa na ang ating mga apps ay madaling intindihin at handa sa pagbabago. May ipapakita akong mga halimbawa kung paano mo maggamit ang mana at ang decorator at composite pattern upang mapabuti ang disenyo ng iyong programa.

Mana

Ang ideya sa likod ng mana ay ang isang bagay “ay isang” dalubhasang bersyon ng iba pang bagay. Mayroon parent class(kilala din bilang isang superclass) kung saan ay tinutukoy ang base properties ng ating paksa.At mayroon isang child class (subclass) kung saan ay nag-mana ng properties sa parent class.

Isang halimbawa ng mana ay isang aso at isang poodle. Lahat ng aso ay may mga katangian gaya ng apat na paa at ang abilidad na kumahol. Ang isang poodle “ay isang” uri ng aso. Ang SUV ay isang sasakyan. Ang bilog ay isang hugis. Ito ang itsura ng ating class hierarchy kung tayo ay mag-disenyo ng program para sa paglikha ng hugis.

A basic inheritance diagram

Ang benepisyo ng pagkakaroon ng Shape class ay maari natin gamitin muli ang mga properties at mga pamamaraan na ating tinukoy sa ibang mga class.

Pansinin na ang getArea method ay tinukoy muli sa bawat nating subclasses.Hindi na natin kailangan pang tukuyin muli ang pamamaraan na ito, ngunit ginawa natin upang palitan ang pamamaraan ng implementasyon ng ating parent. Iyon ay dahil ang bawat hugis ay magkakaroon ng sarili nitong paraan ng pagkalkula ng area.

Pag-override sa isang parent method na nasa isang child class ay isang halimbawa ng polymorphism. Polymorphism ay ang abilidad para sa mga bagay na magkaroon ng maraming mga anyo. Pinahihintulutan nito ang subclasses na magkaroon ng mga pamamaraan nang may parehas na pangalan bilang kanilang superclass ngunit may ibang mga implementasyon.

Ito ay isang halimbawa ng kung ano ang magiging itsura ng ating code para sa paglikha ng isang Hugis at Bilog na subclass:

Isang sagabal sa disenyong pinili ay kapag ninais mo na kailangan baguhin ang parent class, kung gayon ang mga subclass ay maaring kailangan baguhin din,kasama ang lahat ng mga bagay na ating nilikha.

Halimbawa, sakaling magdesisyon tayo kinalaunan na mas makabubuti kung papalitan ang x at y parameters ng Shape class nang may isang bagay.Dahil diyan, kailangan natin palitan ang constructor para sa lahat ng ating mga subclass at ang mga arguments para sa bawat bagay na ating ginawa.

Nakikita natin kung paano ito kadaling maging problema. Kakailangananin natin makasiguro na nakuha natin ng tama ang ating disenyo sa unang pagkakataon para maiwasan natin ang gumawa ng pagbabago. Ngunit hindi ito praktikal, o ito ba talaga ang ating minimithi. Ang programa ay isang palaging nagbabago na entity,at mas makabubuti para sa atin mga developer kung mayroon tayong kakayahang umangkop para makagawa ng mga pagbabago ng walang hirap. Kumbaga sa pinakamaba, hindi dapat tayo magkaroon ng higit pa sa isang level ng child classes.

Decorator Pattern

Pinahihintulutan tayo ng decorator na ikabit ang properties sa isang bagay pagkatapos nitong malikha.Ang ibig sabihin nito ay makapagdadagdag tayo ng functionality nang walang subclassing o pag-aalala sa implementasyon ng ating bagay.

Imbis na isipin na ang bilog ay isang hugis, maari natin gamitin ang Shape class para lumikha ng mga bilog at balutan ito ng mga karagdagang properties na gusto natin.Narito ang alternatibo para lumikha ng bilog na mga bagay gamit ang decorator:

Maari natin dagdagan o baguhin ang mga miyembro ng ating Shape class sa pamamagitan ng decorator bilang pag-taliwas sa pag-subclassing. Sa pamamagitan ng ating mga halimbawang hugis, maaring mapuna mo na mas gusto mo na lang lumikha ng bilog na bagay nang may lahat ng properties na kailangan mo at gawin din para sa iba pang mga hugis. Iyan ay mainam. Pero pinapahintulutan tayo ng decorator na gamitin muli ang code sa ating Shape class at baguhin ito sa pamamagitan ng functionality na magkaiba sa bawat hugis. Ang resulta, magkakaroon tayo ng mas marami pang mga bagay, ngunit mas maraming mga bagay ang mas madaling pangasiwaan kaysa sa mas maraming subclasses.

Ang pattern na ito ay hindi limitado sa paglikha ng graphics. Maari mo itong gamitin sa kahit anong sitwasyon kung saan ay nais mong magdagdag ng tungkulin sa isang bagay.

Halimbawa, maaring mayroon tayong class na humahawak sa pag-sign up ng mga user sa ating account.Bago natin i-save ang kanilang impormasyon sa ating database,mas makabubuti na suriin na ang input ay wasto at walang nilalaman na anumang malicious scripts. Maari natin i-decorate ang class nang may pamamaraan na mag-papatunay ng impormasyon muna.Ang decorator din na iyan ay maaring gamitin muli kahit saan sa ating aplikasyon kung saan ay tumatanggap tayo ng user input.

Composite Pattern

Ang mga bagay ay maaring buuin ng iba pang mga bagay.Ang view para sa isang app ay maaring maisip bilang isang bahagi na bubuuin ng iba pang mga views. Kung tayo ay gagawa ng laro, ang ating mundo ng laro ay magpapakita ng lahat ng ating mga nilikhang graphic gaya ng mga pabilog at mga parisukat. Sa bawat pagkakataon na i-update ang ating view, kakailanganin natin na iguhit muli ang bawat elemento. Kakailangan natin ng paraan upang mapangasiwaan ang lahat ng mga elemento bilang isang grupo.

Diyan makakatulong ang composite pattern sa atin. Maari tayong lumikha ng isang class na responsable para sa lahat ng mga elemento. Kung gusto natin na iguhit muli ang mga elemento, tatawagin natin itong class’s draw method, at ito ang tatawag sa draw method para sa bawat indibidwal na elemento.

Ang webpage ay maari rin isipin bilang isang bahagi.Ang bahagi na ito ay maaring magkaroon ng menu, sidebar, at blog post. Ang post ay maaring maging isang sub-component na may larawan, titulo at katawan. Ang draw method para sa ating app component ay ang tatawag sa draw sa menu, sidebar at post. Ang post component ay siya naman tatawag sa draw na nasa post na larawan, titulo, at katawan.

Narito ang view kung paano ang web page kapag ito’y hinati-hati sa mga piraso:

The Composite Pattern

Ang pattern na ito ay hindi limitado sa paglikha ng views.Halimbawa, kung gagawa tayo ng laro,maaring mayroon bahagi na mangangasiwa sa mga element na nasa screen, isang bahagi na mangangasiwa sa audio, at isang bahagi na mangangasiwa sa estado ng laro.

Ang lahat ng mga ito ay nasa loob ng isang bahagi na aking tinawag na game engine. Ang game engine ay magkakaroon ng initialize method na tatawag sa initialize method na nasa bawat sub-components nito. Iyan ang kakayahan sa paggamit ng composite pattern. Imbes na pakitunguhan ang mga indibidwal na bagay, maari natin itong itrato bilang isang bagay.

Konklusyon

Hinahayaan tayo ng inheritance na gamitin muli ang code para sa pagtukoy ng bagay sa tuntunin ng ibang bagay.Ang decorator pattern ay nagpapahintulot sa atin na dagdagan ang responsibilidad sa isang bagay na walang binabago sa orihinal na code o subclassing. Ang composite pattern ay huwaran ng part-whole relationships. Ang mga patterns na ito ay hindi nangangahulugan na gamitin nang nakabukod.

Ang JavaScript ay naging lengguwahe ng pagtrabaho sa web. Wala ito kung wala ang learning curves,at maraming mga frameworks at silid-aralan din para maging abala ka. Kung naghahanap ka ng karagdagang mapagkukunan upang pag-aralan o gamitin sa iyong trabaho,tignan kung ano ang mayroon kami sa Envato Market.

Maari silang pagsamahin hangga’t kasya. Ang mga halimbawang ibinigay ko ay hindi lang dapat bilang aplikasyon para sa paggamit ng mga pattrern. Ang mga ito ay gabay lamang. Huwag mag-atubiling gamitin ang iyong pagiging malikhain para i-aply ito. Walang isang paraan para ipatupad ang mga ito o isang gamitan lamang.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.