Kuidas parandada oma JavaScripti oskusi, kirjutades oma veebiarenduse raamistiku

Pilt @ryoji__iwata saidilt Unsplash

Kas olete kunagi endalt küsinud, kuidas raamistik töötab?

Kui ma pärast jQuery õppimist mitu aastat tagasi AngularJS-i avastasin, tundus AngularJS mulle tumeda maagiana.

Siis tuli välja Vue.js ja analüüsides, kuidas see kapoti all töötab, julgustati mind proovima kirjutada oma kahesuunaline köitesüsteem.

Selles artiklis näitan teile, kuidas kirjutada kaasaegset JavaScripti raamistikku koos kohandatud HTML-i elementide atribuutide, reaktsioonivõime ja topeltköitmisega.

Kuidas reaktsioonivõime töötab?

Hea oleks alustada mõistmisega, kuidas reaktsioonivõime töötab. Hea uudis on see, et see on lihtne. Tegelikult, kui kuulutate Vue.js-s uue komponendi, puhverdab raamistik puhverserveri kujundusmustrit kasutades iga atribuuti (getterid ja setterid).

Nii on see võimeline tuvastama vara väärtuse muutusi nii koodist kui ka kasutajate sisenditest.

Kuidas puhverserveri kujundusmuster välja näeb

Puhverserveri mustri mõte on lihtsalt objektile juurdepääsu ülekoormamine. Analoogiaks päriselus võiks olla juurdepääs teie pangakontole.

Näiteks ei pääse te otse juurde oma pangakonto jäägile ja väärtust saate vastavalt oma vajadustele muuta. Teil on vaja küsida kelleltki, kellel on see luba, antud juhul oma panka.

Ülaltoodud näites on kontoobjektile juurdepääsu saamiseks pangaobjekti kasutamisel hankefunktsioon ülekoormatud ja see tagastab alati vara väärtuse asemel 9 000 000, isegi kui seda vara pole olemas.

Määratud funktsiooni üle laadimisega on võimalik selle käitumisega manipuleerida. Saate väärtust muuta, et selle asemel mõnda muud atribuuti värskendada või isegi mitte midagi teha.

Reaktiivsuse näide

Nüüd, kui olete puhverserveri kujundusmustri toimimises kindel, alustame meie JavaScripti raamistiku kirjutamist.

Lihtsuse huvides jäljendame selle tegemiseks AngularJS-i süntaksi. Kontrolleri deklareerimine ja malli elementide sidumine kontrolleri omadustega on üsna lihtne.

Esiteks määrake atribuutidega kontroller. Seejärel kasutage seda kontrollerit mallis. Lõpuks kasutage atribuuti ng-bind, et võimaldada elemendi väärtusega topelt sidumist.

Sõeluge mall ja jäljendage kontroller

Atribuutide sidumiseks peame leidma koha (ehk kontrolleri), kus need atribuudid deklareerida. Seega on vaja määratleda vastutav töötleja ja tutvustada seda meie raamistikuga.

Kontrolleri deklaratsiooni käigus otsib raamistik elemente, millel on ng-controller atribuudid.

Kui see sobib ühega deklareeritud kontrolleritest, loob see selle kontrolleri uue eksemplari. See kontrolleri eksemplar vastutab ainult selle konkreetse malli eest.

Siin näeb välja käsitöökontrollerite muutuja deklaratsioon. Kontrolleriobjekt sisaldab kõiki kontrollereid, mis on deklareeritud raamistikus, kutsudes lisandmooduli Controller.

Käsitsi valmistatud kontrollerite määratlus

Iga kontrolleri jaoks salvestatakse tehase funktsioon, et vajadusel uus kontroller käivitada. Samuti salvestab raamistik mallis kasutatud sama kontrolleri kõik uued eksemplarid.

Otsin köiteid

Sellel hetkel on meil olemas selle juhtumi abil kontrolleri eksemplar ja tükk malli.

Järgmine samm on seoste elementide otsimine, mis kasutavad kontrolleri omadusi.

Üsna lihtne, see salvestab kõik objekti köited (kasutatakse räsikaardina). See muutuja sisaldab kõiki atribuute, mis seotakse praeguse väärtusega, ja kõiki DOM-i elemente, mis seda omadust seovad.

Käsitsi valmistatud köidete deklaratsioon

Topeltköidise kontrolleri omadused

Kui raamistik on eeltöö ära teinud, tuleb nüüd huvitav osa: topeltköide.

See hõlmab kontrolleri atribuudi sidumist DOM-i elementidega, et DOM-i värskendada, kui kood atribuudi väärtust värskendab.

Ärge unustage ka DOM-i elemente kontrolleri atribuudiga siduda. Nii värskendab ta kontrolleri atribuuti, kui kasutaja muudab sisendväärtust. Siis värskendab see ka kõiki teisi selle atribuudiga seotud elemente.

Tuvastage värskendused koodist puhverserveri abil

Nagu eespool selgitatud, mähistab Vue komponendid puhverserveris, et reageerida omaduste muutustele. Teeme sama, puhverserverit seades ainult kontrolleriga seotud atribuutide jaoks.

Kui seotakse atribuut, kontrollib puhverserver kõiki selle atribuudiga seotud elemente. Siis värskendab see neid uue väärtusega.

Selles näites toetame ainult sisendielementide sidumist, kuna ainult väärtuse atribuut on määratud.

Reageerige sündmuste elementidele

Viimane asi, mida teha, on reageerimine kasutajate interaktsioonidele. DOM-elemendid käivitavad väärtuse muutuse tuvastamisel sündmused.

Kuulake neid sündmusi ja värskendage seotud omadust sündmuse uue väärtusega. Kõik muud sama atribuudiga seotud elemendid värskendatakse tänu puhverserverile automaatselt.

Kui olete kõik kokku pannud, saate käsitsi valmistatud topeltsidemeid. Siin on toimiv demo, mis sisaldab kogu koodi.

Täname, et lugesite Loodan, et see aitas teil demobiliseerida JavaScripti raamistike toimimist.

Palju õnne! Olete välja töötanud populaarsed funktsioonid, nagu kohandatud HTML-i elementide atribuudid, reaktsioonivõime ja topeltköitmine!

Kui leidsite, et see artikkel on kasulik, klõpsake mõned korrad nuppu , et teised leiaksid selle artikli üles ja näitaksid teie tuge!

Ärge unustage, et jälgite mind, et saada teada minu tulevastest artiklitest

Vaadake minu muid postitusi

https://medium.com/@jbardon/latest

➥ reageeri algajatele

  • Kiire juhend reaalajas õppimiseks ja selle virtuaalse DOM-i toimimiseks
  • Kuidas viia reaktsioonivõime reageerima riikidega

➥ JavaScript

  • Vue.js-ga töötamisel levinud vead
  • Lõpetage valulik JavaScripti silumine ja ühendage Intellij lähtekaardiga
  • Kuidas vähendada tohutult JavaScripti kimpe ilma pingutusteta