Si një zhvillues fillestar që mëson JavaScript vanilje, mund të jetë e frikshme në fillim të kuptosh mundësitë e gjuhës më të njohur të programimit në botë. Në këtë tutorial unë synoj të tregoj se si mund të përdorim Orientimin e Objekteve në JavaScript për t'i dhënë disa karaktere një SPA (Aplikacioni Single Faqe). Shpresoj se do të mësojmë më shumë për klasat dhe përfitimet e Orientimit në Objekte gjatë rrugës.

Si shembull ne do të përdorim një aplikacion të tipit filozofik Hub që kam ndërtuar kohët e fundit të quajtur SOPHIA. Sophia do t'i lejojë përdoruesit tanë të krijojnë një panteon klientësh me filozofë nga të gjitha moshat nga të cilat dëshirojnë të mësojnë. Aq thellë, e di…

Së pari, pse të përdorni një modal? Në JavaScript ka shumë mënyra për të kryer të njëjtat detyra, dhe kjo është vetëm një rrugë që dikush mund të zgjedhë për të zbritur. Ne po ndërtojmë një aplikacion me një faqe në këtë shembull, sepse është një mënyrë e shkëlqyeshme për të njohur se çfarë mund të bëjë JavaScript si gjuhë e përparme.

Kjo do të thotë që ne duam të kemi akses në të gjitha funksionet tona CRUD pa u larguar asnjëherë nga faqja aktuale. Përdorimi i CSS dhe JavaScript për të krijuar një modal do t'i japë faqes sonë të vetme dhe të vetme më shumë thellësi duke na lejuar të hapim dhe mbyllim "dritaret" për gjëra të tilla si format dhe ekranet. Mjaft i zoti!

Programimi i faqes së përparme të uebit ka tre shtylla thelbësore:

1. Manipulimi i modelit të objektit të dokumentit (DOM)
2. Njohja e ngjarjeve JS
3. Komunikimi me serverin

Të tre këto shtylla do të shfaqen në këtë tutorial dhe janë ato që e bëjnë të mundur në radhë të parë një aplikacion me një faqe.

Një shënim i shpejtë mbi orientimin në objekt:
OO nuk është thelbësor për të shkruar kodin, por është një strategji e fuqishme dhe efikase e projektimit që abstrakton kodin tonë duke e bërë më të lehtë ndryshimin, më mirë në kontrollin e të dhënave, më e lehtë për t'u përsëritur dhe më e lehtë për t'u kuptuar. Për një zhytje më të thellë, shikoni këtë artikull.

Me grupin tonë të themeleve, le të ndërtojmë…

Ne fillojmë duke ndërtuar arkitekturën e pjesës sonë të përparme duke përdorur konventat e orientuara nga objekti: Dosja jonë kryesore përmban një skedar index.html, index.js dhe style.css me një nënfolder me skedarë të veçantë për secilën nga klasat tona dhe shërbimin përkatës API të tyre thirrjet.

Ne ndajmë thirrjet tona API nga klasat tona të objekteve për të mbajtur komunikimin tonë me serverin të ndarë nga funksionaliteti i objekteve që krijojmë nga komunikimi me serverin.

CSS që do të përdorim për këtë shembull vjen nga ky burim në w3schools.com. Shkoni përpara dhe kopjoni këtë CSS në skedarin tuaj style.css. Kjo do të na japë një pikënisje bazë për modalin tonë që jeni të mirëpritur ta personalizoni më vonë.

Më pas, shtoni këtë HTML në trupin e skedarit tuaj index.HTML. Ky është div i synuar që ne do të operojmë.

Tani, ne krijojmë një skedar modal.js ku do të jetojë klasa jonë modale dhe i japim deklaratën bazë të klasës.

Filloni duke ndërtuar dy funksione "merr". Metodat e marrjes na lejojnë të kthejmë një vlerë të llogaritur sikur të ishte një pronë objekti dhe ne do t'i përdorim ato këtu për të kthyer pjesë të ndryshme të modalit tonë për funksionim.

Funksioni i parë 'merr modal' do të kthejë të gjithë div prind duke kërkuar për "#myModal". Funksioni i dytë 'merr kryesor' do të kthejë ndarjen e brendshme që do të duam të bëjmë shumicën e shtesave tona duke kërkuar për id "modal-main".

Më pas do të krijojmë një variabël modale që do të na lejojë të aksesojmë këto metoda nga kudo në aplikacionin tonë. Shkoni te index.js dhe shtoni
“const modal = new Modal();.

Ne vendosëm variablin modal të barabartë me një shembull të ri të klasës sonë Modal dhe tani duke thirrur "modal" ne kemi akses në funksionet që po ndërtojmë në klasën Modal!

Për ta provuar këtë, mund të hapni faqen tuaj index.HTML në shfletues, hapni konsolën tuaj dhe shkruani modal.modal dhe modal.main. Shohim që na i kthen div-et që kërkuam në hapin e fundit.

Duke u kthyer në klasën tonë modale, tani do të ndërtojmë funksione që mund t'i thërrasim për të hapur dhe mbyllur modalin tonë.

Nëse i hedhim një sy vetive tona CSS që kemi ngjitur, mund të shohim se ekrani i paracaktuar për modalin tonë është vendosur në "asnjë".

Ju mund të keni vënë re nëse keni parë në index.HTML tuaj se asgjë nuk shfaqet ende. Kjo eshte mire. Ne duam që modali ynë të fshihet si parazgjedhje pasi do të na lejojë ta operojmë në prapaskenë bazuar në ndërveprimet tona të përdoruesve dhe ta përdorim këtë div për disa veçori të ndryshme.

Funksioni ynë i hapur do ta vendosë ekranin nga "asnjë" i paracaktuar në "bllokim" duke e bërë atë të shfaqet në ekran. Mbyllja do të bëjë të kundërtën dhe do ta kthejë ekranin nga "blloku" në "asnjë".

Vini re fjalën "kjo" në të dy këto funksione. "Ky" mund të jetë një koncept sfidues për t'u kuptuar në JavaScript, por një koncept i rëndësishëm për t'u kuptuar. Këtu fjala jonë kyçe "kjo" i referohet objektit modal që thërret funksionin (për ne do të jetë ndryshorja modale që kemi deklaruar në index.js). duke thirrur "this.modal.style" ne po thërrasim objektin dhe më pas thërrasim funksionin tonë "merr modal" që përcaktuam në hapin e mëparshëm për të kapur div tonë prind për të operuar.

Edhe një herë ne mund ta kontrollojmë këtë në shfletuesin tonë duke rifreskuar faqen tonë dhe duke shtypur "modal.open()" në tastierën tonë.

Nuk ka shumë për të parë ende, por ne mund të shohim se po shfaqet dritarja jonë modale në ekran. Shtypja "modal.close()" duhet të heqë dritaren.

Ne duam që përdoruesi ynë të jetë në gjendje të mbyllë këtë dritare pop-up ose duke klikuar X në këndin e sipërm djathtas ose duke klikuar kudo jashtë dritares. Ne do t'i referohemi këtij funksioni fillimisht në metodën tonë të konstruktorit.

Metodat e konstruktorit janë mënyra për të programuar se çfarë vetish do të kenë të gjitha objektet pas instancimit. Kështu, duke shtuar dëgjuesin e ngjarjes mbyllëse në funksionin tonë të konstruktorit, ne sigurojmë që ky funksionalitet të jetë i integruar në variablin tonë modal që po e deklarojmë me një objekt të ri Modal në index.js.

Së fundi, për klasën tonë modale, ne do të ndërtojmë dëgjuesin e ngjarjeve të afërta që iu referuam në hapin e fundit.

Edhe një herë ne po e përdorim "këtë" dhe po e thërrasim marrësin modal që bëmë më herët dhe ngjarjen te prindi ynë. Ne përdorim || për të na dhënë një kusht "ose" për të lejuar mbylljen e të dyjave nëse klikohet X ose përdoruesi klikon nga modali ynë. (vini re se id "my modal" është prindi i ndarjes "modal-main". "modal-main" është dritarja aktuale që shfaqet, ndërsa "my modal" është ekrani i errësuar pas saj.)

Sa e thjeshtë; Klasa jonë modale është tashmë plotësisht funksionale dhe e gatshme për zbatim.

Ne mund të përdorim modalin tonë për të shfaqur objektet që kemi përvetësuar dhe dhënë nëpërmjet kërkesave të marra në një bazë të dhënash:

Modalet janë një mënyrë e shkëlqyer për të zbatuar formularët në një aplikacion me një faqe të vetme. Duket bukur, e mban formën tuaj të ndarë nga pjesa tjetër e përmbajtjes suaj, dhe ju lejon të kapni dhe dërgoni të dhëna në një bazë të dhënash, ndërsa të dhënat që shfaqen vetëm nëse keni nevojë, ri-përpunoni.

Thjesht ndryshoni modal.main.innerHTML në çfarëdo forme ose përmbajtje që dëshironi. Paraqitni përmbajtjen, shtoni dëgjues të ngjarjeve, shtoni çdo nyje që ju nevojitet dhe përfundoni funksionet tuaja duke thirrur "modal.open()".

Modali juaj do të mbyllet me butonin X ose duke klikuar, ose nëse ju duhet të mbyllet bazuar në një ndërveprim të caktuar midis përdoruesit dhe kontekstit tuaj, p.sh.: duke klikuar dërgoni në një formular, pa problem, thjesht përdorni "modal.close() ” në çfarëdo funksioni të thirrjes mbrapa është dëgjimi i ngjarjes në fjalë.

Misioni u realizua!

Aftësia për të manipuluar DOM-in në këtë mënyrë, dëgjimi i ngjarjeve të përdoruesit, aktivizimi i funksioneve të bazuara në ngjarjet e përmendura dhe komunikimi me një server pa nevojën për të rifreskuar një faqe janë ato që e bëjnë JavaScript-in të fuqishëm dhe shprehës.

Kombinimi i kësaj me modelet e dizajnit të Orientimit të Objekteve na lejon të depozitojmë të dhënat dhe funksionalitetin tonë në mënyrë të rregullt në "qelizat" e tyre, në mënyrë që ato të mund të komunikojnë në mënyrë më efektive dhe efikase me qelizat e tjera që përbëjnë organizmin që është softueri ynë.

Shpresoj që ky tutorial t'ju mësojë një veçori të re të mrekullueshme që mund ta ndërtoni në projektet tuaja JavaScript me vanilje dhe shpresoj që t'ju ketë dhënë disa njohuri të dobishme gjatë rrugës!

Cilat veçori interesante keni zbatuar me JavaScript duke përdorur Orientimin në Objekt?