Konstandite faili lisamine oma React projekti

Kuna olen viimastel nädalatel ehitanud Reacti projekte, olen hakanud üleminekut tegema lihtsalt toimiva koodi loomisest keskendumisele sellele, kuidas saan oma projekti ülesehituse võimalikult puhtaks ja võimalikult arusaadavaks muuta.

Lisaks põhilistele asjadele, nagu muutujate võimalikult selgeks nimetamine, on viimasel ajal iga komponendi puhastamiseks teinud kõik minu konstandid oma projekti sektsiooni.

Miks vaevata?

Vaatame lihtsalt seda, milline üks minu elementidest enne muudatusi välja nägi:

… Versus nüüd:

Ma arvan, et see ületab seda, et valikut nr 2 on palju lihtsam lugeda ja et olemasolev kood võimaldab kasutajatel, kes üritavad aru saada, keskenduda sellele, mida selle konkreetse komponendi elutsükli jooksul tegelikult tehakse, nagu vastandatakse määratletud konstantide mõistmisele.

Seadistamine on siin tegelikult väga lihtne. Alustuseks olen loonud uue kausta src-s / nn konstandid, et hoida kõiki konstante, mida ma kasutan kõigis oma komponentides. Selles kaustas loon lihtsalt kõigi oma komponentide salvestamiseks faili /src/constants/index.js ja lisan siis igaüks eelnevalt "ekspordiga", nii et iga konstant on saadaval mujale importimiseks, näiteks nii:

eksport const DJISYMBOL = "& symbol = DJI"

Enda mõistlikkuse huvides vaatan siis ringi ja näen, milliseid konstante olen oma projekti jooksul mitu korda kasutanud. Pole põhjust neid kaks korda määratleda ja seega saan ma oma koodi tegelikult ulatuslikult üsna oluliselt kärpida, kui pean neid siin ainult üks kord määratlema.

Kui olen saanud kõik oma konstandid, mis on üheselt määratletud kataloogis index.js, siis lähen edasi ja eraldan iga konstandite partii veelgi, et saaksin selgelt aru, mida komponent seda komponenti kasutab. Komponendi kahekordse kasutamise täpsustamisel tekitab see ilmselgelt väikseid probleeme, kuid selle selgitamiseks on üsna lihtne siia lisada väike märkus.

Praegu on mul siin järgmine teave:

Võite kohe märgata, et ülaltoodud juhul on mul tegelikult kaks konstanti, millel on sama väärtus, kuid mida nimetatakse erinevalt. Tegin seda seetõttu, et tundsin, et kui ma oma registreerimislehel helistan “Constant.NEWACCOUNTURL”, on uue konto ehitamisel selgem lugeda kui “Constant.EXISTINGACCOUNTURL”, kui kontekstis loome tegelikult uut kontot.

Teine viis selle lahendamiseks oleks kirjutada midagi sellist:

impordi {EXISTINGACCOUNTURL kui NEWACCOUNTURL} kaustast ./constants

… Selleks, et luua varjunimi esimesele konstandile selle importimisel. Igaühele oma, aga tegelikult eelistan importida kõik oma konstandid ühe korraga nii:

import * konstanditena './konstanditest'

... see võib olla pisut vähem efektiivne, kuna see impordib mõnda konstanti, mida ma võib-olla ei kasuta komponendis, kuid mulle meeldib, kui mu koodi loetakse konstanditeks. [CONSTANTNAME] minu komponendis, nii et on selge, kuhu ma oma konstandid teen alates siis, kui kasutaja jätab komponendi faili ülaosas tähelepanuta minu impordi.

Sõltumata sellest, kuidas teile meeldib oma konstandid oma komponentidesse importida, saate asju tegelikult veelgi lihtsamaks teha. Kõik, mida peate tegema, on võtta iga sektsioon oma konstantidest, mis asuvad hetkel index.js-s, ja panna need oma uhiuue faili alla kataloogi / src / constants ja linkida need meie konstantide / index.js-failiga hõlpsaks viitamiseks.

Nii oli mul näiteks komponendi “Matcher” jaoks neli konstanti. Ma saan need tõepoolest kataloogist.js välja tõmmata ja luua uue faili aadressil src / konstandid / matcher.js ja eksportida sealt oma konstandid:

//matcher.js
export const POSTURL = "http: // localhost: 4000 / api / v1 / patterns"
export const DELETEURL = "http: // localhost: 4000 / api / v1 / patterns /"
export const DeleteButton = nõua ('../ images / delete-icon.png')
export const LoadingWheel = nõuda ('../ images / loading-wheel.gif')

Siis pean kõik oma index.js failis tegema, et asendada kood, mille kolisin just matcher.js, järgmisele:

//index.js
eksport * kataloogist './matcher';

Kui see on lõpule jõudnud, on mul endiselt sama funktsionaalsus, mis mul varem, kuid saan oma projekti ülesehitusest selgemalt aru, kui lihtsalt vaatan iga komponendi konstandtifaili läbi. Lisaks võin ma kõigele samastada konstantidena kõike samamoodi nagu enne lihtsa impordiga *, või võiksin teha ka midagi sellist:

impordi {POSTURL} konstanditest / sobitajast;

Kui ma eelistaksin helistada lihtsalt ühele eelnevalt määratletud konstandile.

Konstandite eraldamine on hämmastav viis muuta oma projekt selgemaks neile, kes teie koodi loevad, vähendades samal ajal konstandite mittevajalikku kordamist komponentide vahel. See on olnud minu jaoks äärmiselt kasulik ja soovitan kõigil seda võimalikult kiiresti oma projektidesse lisada, kui neil seda veel pole.

Allolevates kommentaarides andke mulle teada, kuidas teie konstandid struktureerite. Minu ülaltoodud strateegiast erinevad mitmel erineval viisil, mida saab teha, ja ma tahaksin teile kõigile kuulda!

Lisalugemist:

  • https://medium.com/@z_callan/javascript-project-architecture-constants-deddfde3c8a8