Frontend Academy · Pelajaran

Struktur Folder Berasaskan Ciri

Susun kod mengikut domain ciri dan bukannya jenis, letakkan ujian, gaya dan komponen bersama-sama, serta kuatkuasakan sempadan dengan eslint-plugin-boundaries.

Pelajaran 4 daripada 414 langkah

Struktur Folder Berasaskan Ciri ialah pelajaran Frontend Academy percuma di CoddyKit. Ini ialah pelajaran 4 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Frontend Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Frontend Academy merangkumi sejumlah 4 pelajaran.

Dua Cara Menyusun Kod

Anda boleh mengumpulkan kod mengikut jenis (components/, hooks/, services/, types/) atau mengikut ciri (auth/, checkout/, dashboard/ — setiap satunya mengandungi komponen, cangkuk dan sebagainya sendiri). Pendekatan mengikut ciri lebih sesuai untuk aplikasi sederhana hingga besar.

Mengikut Jenis — Perangkap Lalai

Struktur tutorial React klasik mengumpulkan segala-galanya mengikut jenis. Struktur ini sukar diskalakan: setiap perubahan fail menyentuh berbilang folder yang tidak berkaitan, dan 'cari semua kod checkout' bermaksud mencari menggunakan grep di seluruh pepohon.

// 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.ts

Struktur Mengikut Ciri

Kumpulkan segala-galanya yang berkaitan dengan sesuatu ciri dalam satu folder. Mudah dicari, mudah dipadam dan mudah difahami.

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.ts

Penempatan Bersama dalam Sesuatu Ciri

Folder ciri mengandungi: komponen, cangkuk, perkhidmatan, jenis dan ujian — semua kod yang diperlukan untuk domain tersebut. Pembangun baharu mahu memahami auth? Buka auth/. Mahu memadamkan auth? Padamkan folder itu.

Dikongsi berbanding Ciri

Kod yang digunakan oleh 2 atau lebih ciri dipindahkan ke shared/ (atau lib/). Kod yang digunakan oleh satu ciri kekal di dalamnya. Jangan terburu-buru dengan andaian 'mungkin boleh digunakan semula nanti' — tunggu penggunaan kedua sebelum mengekstraknya.

Peraturan Sempadan Ciri

Ciri tidak sepatutnya mengimport antara satu sama lain secara langsung. Jika dua ciri perlu berkongsi kod, bahagian yang dikongsi itu dipindahkan ke shared/. Jika kedua-duanya perlu diselaraskan, gunakan peristiwa atau stor dikongsi pada peringkat aplikasi.

Menguatkuasakan Sempadan dengan ESLint

Gunakan eslint-plugin-boundaries atau eslint-plugin-import untuk menguatkuasakan peraturan ini: ciri boleh mengimport daripada shared tetapi bukan daripada ciri lain.

// .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"] }
      ]
    }]
  }
}

API Awam bagi Setiap Ciri

Setiap ciri mengeksport API awam melalui features/auth/index.ts. Kod lain mengimport daripada '@/features/auth', bukan laluan yang mendalam. Anda boleh menyusun semula bahagian dalaman tanpa merosakkan penggunaannya.

// 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';

Menyusun Ciri Kecil

Ciri besar boleh mempunyai subfolder: dashboard/widgets/, dashboard/charts/. Elakkan susunan yang lebih dalam daripada 2 hingga 3 tahap — pencarian menjadi menyusahkan.

Tempat Laluan Berada

Halaman/laluan boleh berada dalam folder peringkat teratas pages/ atau routes/. Kandungannya ringkas — ia mendapatkan komponen dan cangkuk daripada ciri lalu menggabungkannya.

src/
  pages/
    Dashboard.page.tsx   // composes Dashboard widgets from features/dashboard/
    Cart.page.tsx        // composes from features/cart/
  features/
  shared/

Memindahkan Aplikasi Sedia Ada

Mulakan dengan ciri baharu sahaja — letakkan kod baharu dalam features/. Jangan susun semula semuanya serentak. Apabila anda menyentuh fail lama, pindahkannya sedikit demi sedikit. Peraturan sempadan ESLint menghalang kemerosotan semula dalam struktur baharu.

Bila Pendekatan Mengikut Jenis Masih Sesuai

Untuk aplikasi yang sangat kecil (kurang daripada 30 komponen) atau pustaka, pendekatan mengikut jenis sudah memadai. Gunakan pendekatan mengikut ciri sebaik sahaja anda mempunyai domain perniagaan yang berbeza (auth, checkout, billing, settings).

Semakan Pantas

Apakah manfaat utama menyusun kod mengikut ciri berbanding mengikut jenis fail?

Jawab dalam pelajaran interaktif

Ringkasan: Struktur Mengikut Ciri

features/ mengandungi kod khusus domain; shared/ mengandungi utiliti merentas ciri. Setiap ciri mengeksport index.ts awam. Ciri tidak mengimport daripada satu sama lain — hanya daripada shared. Kuatkuasakan dengan eslint-plugin-boundaries. Halaman/laluan menggabungkan ciri. Lakukan pemindahan secara berperingkat. Pendekatan mengikut jenis sesuai untuk aplikasi kecil.

Percuma untuk bermula

Pelajari HTML dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 41
Pelajaran: 163

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Struktur Folder Berasaskan Ciri” percuma?

Ya — teks penuh “Struktur Folder Berasaskan Ciri” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Frontend Academy, tingkat taraf kepada CoddyKit PRO. Kursus Frontend Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Struktur Folder Berasaskan Ciri”?

Susun kod mengikut domain ciri dan bukannya jenis, letakkan ujian, gaya dan komponen bersama-sama, serta kuatkuasakan sempadan dengan eslint-plugin-boundaries. Anda berlatih Frontend Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Frontend Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Frontend Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 4 daripada 4.

Berapa lamakah pelajaran “Struktur Folder Berasaskan Ciri” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Frontend Academy ini?

Ya. Setiap pelajaran Frontend Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

Reka Bentuk Atomik: Atom, Molekul dan Organisma
Persediaan Monorepo dengan Turborepo
Micro-frontend: Module Federation
Struktur Folder Berasaskan Ciri

← Kembali ke Frontend Academy