Ominaisuuspohjainen hakemistorakenne
Järjestä koodi ominaisuusalueiden eikä tyyppien mukaan, sijoita testit, tyylit ja komponentit rinnakkain ja valvo rajoja eslint-plugin-boundariesilla.
Ominaisuuspohjainen hakemistorakenne on ilmainen Frontend Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Frontend Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Frontend Academy-kurssilla on yhteensä 4 oppituntia.
Koodin kaksi jäsentelytapaa
Voit ryhmitellä koodin tyypin mukaan (components/, hooks/, services/, types/) tai ominaisuuden mukaan (auth/, checkout/, dashboard/ — jokainen sisältää omat components-, hooks- ja muut vastaavat hakemistonsa). Ominaisuuspohjainen rakenne toimii paremmin keskisuurissa ja suurissa sovelluksissa.
Tyyppipohjainen rakenne — oletusansa
Klassinen React-opetusohjelman rakenne ryhmittelee kaiken tyypin mukaan. Se skaalautuu huonosti: jokainen tiedostomuutos koskettaa useita toisiinsa liittymättömiä kansioita, ja kaiken checkout-koodin etsiminen tarkoittaa greppaamista koko hakemistopuusta.
// Type-based (avoid for large apps):
src/
components/
Button.tsx
LoginForm.tsx
CartItem.tsx
hooks/
useAuth.ts
useCart.ts
services/
auth.ts
cart.ts
types/
User.ts
CartItem.tsOminaisuuspohjainen rakenne
Ryhmittele kaikki ominaisuuteen liittyvä koodi yhteen kansioon. Koodi on helppo löytää, poistaa ja ymmärtää.
src/
features/
auth/
LoginForm.tsx
SignupForm.tsx
useAuth.ts
auth.service.ts
auth.types.ts
auth.test.tsx
cart/
CartItem.tsx
CartSummary.tsx
useCart.ts
cart.service.ts
cart.types.ts
shared/
components/
Button.tsx
hooks/
useDebounce.tsYhteissijoittelu ominaisuuden sisällä
Ominaisuuskansio sisältää komponentit, hookit, palvelut, tyypit ja testit — kaiken kyseiseen toimialueeseen tarvittavan koodin. Haluatko uuden kehittäjän ymmärtävän auth-toiminnallisuuden? Avaa auth/. Haluatko poistaa auth-toiminnallisuuden? Poista kansio.
Jaettu ja ominaisuuskohtainen koodi
Vähintään kahden ominaisuuden käyttämä koodi siirretään kansioon shared/ (tai lib/). Yhden ominaisuuden käyttämä koodi pysyy sen sisällä. Vältä ajatusta, että koodi saattaa olla myöhemmin uudelleenkäytettävää — odota toista käyttökertaa ennen irrottamista.
Ominaisuuksien rajojen säännöt
Ominaisuudet eivät saa tuoda koodia toisistaan suoraan. Jos kaksi ominaisuutta tarvitsee samaa koodia, jaettu osa siirretään kansioon shared/. Jos niiden on koordinoitava toimintaansa, käytä tapahtumia tai sovellustason jaettua storea.
Rajojen valvonta ESLintillä
Käytä eslint-plugin-boundaries- tai eslint-plugin-import-lisäosaa valvomaan seuraavaa sääntöä: ominaisuudet voivat tuoda koodia shared-kansiosta, mutta eivät toisistaan.
// .eslintrc.json
{
"plugins": ["boundaries"],
"settings": {
"boundaries/elements": [
{ "type": "feature", "pattern": "src/features/*" },
{ "type": "shared", "pattern": "src/shared/*" }
]
},
"rules": {
"boundaries/element-types": ["error", {
"default": "disallow",
"rules": [
{ "from": "feature", "allow": ["shared"] },
{ "from": "shared", "allow": ["shared"] }
]
}]
}
}Julkinen API jokaiselle ominaisuudelle
Jokainen ominaisuus tarjoaa julkisen API:n tiedoston features/auth/index.ts kautta. Muu koodi tuo sen tiedostosta '@/features/auth', ei syvistä poluista. Näin voit järjestellä sisäisen toteutuksen uudelleen rikkomatta käyttäjiä.
// features/auth/index.ts
export { LoginForm } from './LoginForm';
export { useAuth } from './useAuth';
export type { User, AuthState } from './auth.types';
// Consumers:
import { LoginForm, useAuth } from '@/features/auth';
// NOT: import { LoginForm } from '@/features/auth/LoginForm';Alitoiminnallisuuksien sisäkkäisyys
Suurilla ominaisuuksilla voi olla alikansioita: dashboard/widgets/, dashboard/charts/. Vältä yli 2–3 tason syvyyttä — haku muuttuu tuskalliseksi.
Reittien sijainti
Sivut ja reitit voivat olla ylätason pages/- tai routes/-kansiossa. Ne ovat ohuita: ne hakevat komponentit ja hookit ominaisuuksista ja koostavat niistä kokonaisuuksia.
src/
pages/
Dashboard.page.tsx // composes Dashboard widgets from features/dashboard/
Cart.page.tsx // composes from features/cart/
features/
shared/Olemassa olevan sovelluksen siirtäminen
Aloita vain uusista ominaisuuksista — sijoita uusi koodi kansioon features/. Älä refaktoroi kaikkea kerralla. Kun käsittelet vanhoja tiedostoja, siirrä niitä vähitellen. ESLintin rajat estävät uuden rakenteen rapautumisen.
Milloin tyyppipohjainen rakenne toimii edelleen
Erittäin pienissä sovelluksissa (alle 30 komponenttia) tai kirjastoissa tyyppipohjainen rakenne toimii hyvin. Käytä ominaisuuspohjaista rakennetta heti, kun sovelluksessa on erillisiä liiketoiminta-alueita (auth, checkout, billing, settings).
Pikatarkistus
Mikä on koodin ominaisuuspohjaisen eikä tiedostotyypin mukaan ryhmittelyn tärkein rakenteellinen hyöty?
Kertaus: ominaisuuspohjainen rakenne
features/ sisältää toimialuekohtaisen koodin; shared/ sisältää ominaisuuksien yhteiset apuohjelmat. Jokainen ominaisuus tarjoaa julkisen index.ts-tiedoston. Ominaisuudet eivät tuo koodia toisistaan — vain shared-kansiosta. Valvo tätä eslint-plugin-boundaries-lisäosalla. Sivut ja reitit koostavat ominaisuuksista kokonaisuuksia. Siirrä koodia vähitellen. Tyyppipohjainen rakenne sopii pieniin sovelluksiin.
Opi HTML tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 41
- Oppitunnit
- 163
Usein kysytyt kysymykset
Onko oppitunti ”Ominaisuuspohjainen hakemistorakenne” ilmainen?
Kyllä – oppitunnin ”Ominaisuuspohjainen hakemistorakenne” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Frontend Academy-kurssin, päivitä CoddyKit PROhon. Frontend Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Ominaisuuspohjainen hakemistorakenne”?
Järjestä koodi ominaisuusalueiden eikä tyyppien mukaan, sijoita testit, tyylit ja komponentit rinnakkain ja valvo rajoja eslint-plugin-boundariesilla. Harjoittelet Frontend Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Frontend Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Frontend Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 4/4.
Kuinka kauan ”Ominaisuuspohjainen hakemistorakenne”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Frontend Academy-oppitunnilla?
Kyllä. Jokainen Frontend Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Atominen suunnittelu: atomit, molekyylit ja organismit
- Monorepon käyttöönotto Turborepolla
- Mikrofrontendit: Module Federation
- Ominaisuuspohjainen hakemistorakenne