Kako dodati datoteku konstanti u svoj reagirajući projekt

Kako sam posljednjih nekoliko tjedana gradio React projekte, počeo sam prelaziti od pravljenja koda koji jednostavno djeluje na fokusiranje na to kako svoju projektnu strukturu mogu učiniti što čišćom i što razumljivijom.

Osim osnovnih stvari poput nazivanja varijabli što je jasnije moguće, nešto što radim u posljednje vrijeme kako bih očistio svaku komponentu jest prebaciti sve svoje konstante u vlastiti dio projekta.

Zasto se zamarati?

Pogledajmo samo kako je izgledao jedan moj element prije mojih promjena:

… U odnosu na sada:

Mislim da je iznad toga da je opciju br. 2 puno lakše čitati i da prisutan kôd omogućava korisnicima koji pokušavaju razumjeti što se događa usredotočiti na ono što se zapravo radi u životnom ciklusu te određene komponente kao nasuprot pokušaju da se smisle konstante koje su definirane.

Ovdje je postavljanje zapravo jednostavno. Za početak, stvorio sam novu mapu unutar src / zvane "konstante" za držanje svih konstanti koje koristim u svim svojim komponentama. Unutar te mape jednostavno stvorim datoteku /src/constants/index.js za pohranjivanje svih svojih komponenti, a zatim je svaku dodam sa „izvozom“, tako da je svaka konstanta dostupna za uvoz na drugo mjesto poput:

export const DJISYMBOL = "& simbol = DJI"

Zbog vlastite sigurnosti razumjet ću koje konstante sam koristio više puta u svom projektu. Ne postoji razlog da se oni dva puta definiraju i na taj način mogu zapravo smanjiti svoj kod prilično značajno u mjerilu, samo što ih moram ovdje definirati.

Nakon što steknem sve svoje konstante jedinstveno definirane u indeksu.js, nastavim dalje i razvalim svaku šaržu konstanti tako da mogu jasno razumjeti koja komponenta koristi koju komponentu. Ovo očito postavlja neke manje probleme kada je u pitanju pojašnjenje kada se komponenta koristi dva puta, ali prilično je jednostavno jednostavno dodati malu bilješku ovdje da biste to pojasnili.

Evo što trenutno imam:

Odmah ćete primijetiti da u gornjem slučaju zapravo imam dvije konstante iste vrijednosti, ali su različito imenovane. To sam učinio jer sam smatrao da kad na pozivu "Constant.NEWACCOUNTURL" na svojoj registracijskoj stranici jasnije pročitam prilikom izrade novog računa, za razliku od "Constant.EXISTINGACCOUNTURL" kada kontekstualno zapravo stvaramo novi račun.

Drugi način da se to riješi bilo bi napisati nešto poput:

uvoz {EXISTINGACCOUNTURL kao NEWACCOUNTURL} iz './constants'

… Kako biste stvorili pseudonim za svoju prvu konstantu kada ga uvozi. Svakoj svojoj, ali zapravo radije uvozi sve svoje konstante u jednom potezu ovako:

import * kao konstante iz './constants'

... to može biti malo manje učinkovito, jer uvozi neke konstante koje možda neću koristiti u komponenti, ali volim da moj kod čita kao konstante. [CONSTANTNAME] u svojoj komponenti, tako da je jasno gdje nabavljam konstante iz ako korisnik previdi moj uvoz na vrhu datoteke s komponentama.

Bez obzira na to kako volite uvesti konstante u svoje komponente, stvari možete još olakšati. Sve što trebate učiniti je uzeti svaki odjeljak svojih konstanti koji su trenutno unutar index.js i staviti ih u svoju potpuno novu datoteku u / src / konstante i povezati ih s našom datotekom konstanta / index.js radi lakšeg referenciranja.

Na primjer, imao sam četiri konstante gore za svoju komponentu "Matcher". Zapravo ih mogu izvući iz index.js i stvoriti novu datoteku na src / constants / matcher.js i od tamo izvoziti svoje konstante:

//matcher.js
export const POSTURL = "http: // localhost: 4000 / api / v1 / pattern"
export const DELETEURL = "http: // localhost: 4000 / api / v1 / pattern /"
export const DeleteButton = zahtjev ('../ images / delete-icon.png')
export const LoadingWheel = zahtijeva ('../ slike / loading-wheel.gif')

Tada sve što moram učiniti u datoteci index.js zamijenimo kod koji sam upravo premjestio na matcher.js na sljedeće:

//index.js
izvoz * iz './matcher';

Kad se to završi, i dalje imam istu funkciju koju sam imao ranije, ali jasnije mogu razumjeti strukturu mog projekta jednostavnim pregledanjem datoteka o konstanti za svaku komponentu. Nadalje, još uvijek mogu sve navesti na isti način kao što sam to učinio prije s jednostavnim uvozom * kao konstante ili bih mogao učiniti i nešto poput:

import {POSTURL} iz 'konstante / matcher';

… Ako bih radije nazvao jednu konstantu koja je prethodno definirana.

Razbijanje konstanta nevjerojatan je način da svoj projekt učinite jasnijim onima koji čitaju vaš kôd, istovremeno smanjujući nepotrebno ponavljanje konstanti iz komponente u komponentu. Bilo mi je izuzetno korisno i toplo preporučujem svima da ga dodaju što prije u svoje projekte ako ga već nisu uključili.

Javite mi u komentarima ispod kako strukturirate svoje konstante. Postoji nekoliko različitih načina na koje se to može razlikovati od moje gore navedene strategije, a volio bih vas čuti od svih!

Daljnje čitanje:

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