Berapakah jenis struktur projek bahagian hadapan yang ada?

Menstrukturkan projek Frontend adalah sangat penting untuk membangunkan aplikasi yang cekap dan mudah diselenggara. Struktur yang baik menjadikan kod mudah difahami. dan boleh mengembangkan ciri dengan cekap Terutama apabila menggunakan Next.js dan TypeScript dalam pembangunan Berikut ialah beberapa struktur projek yang biasa digunakan:

1. Struktur Asas

my-next-app/
├── public/              # Static files like images, fonts, etc.
├── src/                 # Source code
│   ├── components/      # Reusable components
│   ├── pages/           # Page components (Next.js routing)
│   ├── styles/          # CSS/SASS files
│   ├── hooks/           # Custom hooks
│   ├── contexts/        # Context API providers
│   ├── utils/           # Utility functions
│   ├── types/           # TypeScript types/interfaces
│   ├── services/        # API calls or services
│   ├── lib/             # Any additional libraries or helpers
│   └── config/          # Configuration files
├── .gitignore           # Git ignore file
├── next.config.js       # Next.js configuration
├── package.json         # npm/yarn package file
└── tsconfig.json        # TypeScript configuration

2. Struktur Reka Bentuk Atom

Reka Bentuk Atom ialah konsep reka bentuk UI yang menekankan pengasingan komponen berdasarkan saiz dan kefungsian. Boleh dibahagikan kepada 5 peringkat: Atom, Molekul, Organisma, Templat dan Halaman

my-next-app/
├── public/                 # Static files
├── src/
│   ├── components/         # UI components
│   │   ├── atoms/          # Smallest elements like buttons, inputs
│   │   ├── molecules/      # Combinations of atoms (e.g., form groups)
│   │   ├── organisms/      # Complex UI components (e.g., header, footer)
│   │   ├── templates/      # Page templates with placeholders
│   │   └── pages/          # Page components
│   ├── pages/              # Next.js routing (can be left for dynamic routing)
│   ├── hooks/              # Custom hooks
│   ├── contexts/           # Context providers
│   ├── utils/              # Utility functions
│   ├── types/              # TypeScript interfaces/types
│   ├── services/           # API services
│   ├── lib/                # Additional libraries/helpers
│   └── config/             # Configurations
├── .gitignore
├── next.config.js
├── package.json
└── tsconfig.json

3. Struktur Berasaskan Ciri

Struktur berasaskan ciri ialah satu lagi cara untuk memudahkan mengurus dan mengembangkan ciri baharu. Mudah sahaja

my-next-app/
├── public/                 # Static files
├── src/
│   ├── features/           # Separate by features/modules
│   │   ├── featureA/
│   │   │   ├── components/ # Components specific to FeatureA
│   │   │   ├── pages/      # Pages related to FeatureA
│   │   │   ├── hooks/      # Hooks specific to FeatureA
│   │   │   ├── services/   # API calls related to FeatureA
│   │   │   └── utils/      # Utility functions for FeatureA
│   │   └── featureB/       # Another feature module
│   ├── shared/             # Shared resources across features
│   │   ├── components/     # Shared components
│   │   ├── hooks/          # Shared hooks
│   │   ├── contexts/       # Shared contexts
│   │   └── utils/          # Shared utilities
│   ├── styles/             # Global styles
│   └── config/             # Configuration files
├── .gitignore
├── next.config.js
├── package.json
└── tsconfig.json

4. Struktur Monorepo dengan NX atau Turborepo

Struktur ini ialah pengurusan projek dengan berbilang projek atau modul di satu tempat. Sesuai untuk pasukan besar atau projek yang memerlukan pemisahan yang jelas bagi setiap bahagian pembangunan

my-next-monorepo/
├── apps/                   # Applications (Next.js, React, etc.)
│   ├── web/                # Next.js app
│   └── admin/              # Another Next.js app or admin panel
├── packages/               # Shared packages or libraries
│   ├── ui/                 # UI component library
│   ├── utils/              # Utility functions
│   ├── hooks/              # Custom hooks
│   └── services/           # API service packages
├── .gitignore
├── nx.json                 # NX configuration (if using NX)
├── turbo.json              # Turborepo configuration (if using Turborepo)
├── package.json
└── tsconfig.json

5. Struktur Seni Bina Berlapis

Reka bentuk seni bina berlapis memudahkan untuk mengasingkan fungsi projek

my-next-app/
├── public/                 # Static files
├── src/
│   ├── presentation/       # UI components, pages, and routing
│   │   ├── components/     # UI components
│   │   ├── pages/          # Next.js pages
│   │   └── routes/         # Custom routing logic
│   ├── domain/             # Business logic and entities
│   │   ├── entities/       # Domain entities
│   │   ├── useCases/       # Business use cases
│   │   └── repositories/   # Interfaces for data repositories
│   ├── infrastructure/     # Data access and external services
│   │   ├── api/            # API service implementations
│   │   ├── db/             # Database access
│   │   └── thirdParty/     # Third-party integrations
│   ├── shared/             # Shared utilities and configurations
│   │   ├── utils/          # Utility functions
│   │   └── config/         # Configuration files
│   └── styles/             # Global styles
├── .gitignore
├── next.config.js
├── package.json
└── tsconfig.json

6. Struktur Dipacu Komponen dengan Buku Cerita

Menggunakan Buku Cerita ialah ujian sistematik dan pembangunan komponen UI yang dipisahkan. Memudahkan untuk menguji kefungsian komponen

my-next-app/
├── public/                 # Static files
├── src/
│   ├── components/         # UI components
│   │   ├── Button/         # Button component
│   │   │   ├── Button.tsx
│   │   │   ├── Button.stories.tsx
│   │   │   └── Button.test.tsx
│   │   └── Input/          # Input component
│   ├── pages/              # Next.js pages
│   ├── hooks/              # Custom hooks
│   ├── utils/              # Utility functions
│   ├── styles/             # Global styles
│   └── config/             # Configuration files
├── .storybook/             # Storybook configuration
│   ├── main.js
│   └── preview.js
├── .gitignore
├── next.config.js
├── package.json
└── tsconfig.json

Faktor yang Perlu Dipertimbangkan Apabila Memilih Struktur

Memilih struktur projek bergantung pada banyak faktor, seperti

1. Saiz projek: Jika projek itu besar Pilih struktur yang memudahkan untuk mengurus dan mengembangkan projek anda.
2. Saiz pasukan pembangunan: Jika anda mempunyai pasukan yang besar Anda harus memilih struktur yang memisahkan setiap bahagian dengan jelas untuk bekerja bersama
3. Kerumitan Projek: Jika projek itu rumit. Anda harus memilih struktur yang boleh menangani kerumitan tersebut
4. Teknologi yang digunakan: Teknologi yang digunakan seperti Next.js, TypeScript dan Buku Cerita mungkin disusun dengan betul dan disyorkan

Amalan Terbaik untuk Struktur Projek

• Pastikan Komponen Kecil dan Boleh Digunakan Semula: Komponen harus melakukan satu perkara dan melakukannya dengan baik. Guna semula komponen merentas

projek.

• Gunakan Konteks dengan Bijak: Manfaatkan API Konteks Reaksi untuk mengurus keadaan merentas komponen yang memerlukan akses kepada data yang sama.
• Atur Gaya: Susun fail CSS/SASS anda dengan cekap, menggunakan modul CSS atau komponen bergaya untuk kemodulatan.
• Gunakan TypeScript untuk Keselamatan Jenis: Tentukan jenis dan antara muka untuk memastikan keselamatan jenis dan kebolehbacaan kod yang lebih baik.
• Ujian Tulis: Sertakan ujian unit dan penyepaduan untuk komponen dan utiliti untuk memastikan kefungsian.

Alat untuk Dipertimbangkan

• Buku cerita: Untuk pembangunan dan ujian Komponen UI
• Jest: Untuk menguji dan menyemak kod
• ESLint: Untuk menyemak dan memformat kod
• Lebih Cantik: untuk pemformatan kod automatik
• Husky & Lint-Staged: Untuk menyediakan cangkuk pra-komit
• Pelayan Tersuai Next.js: untuk menggunakan logik sebelah pelayan

Semoga maklumat ini membantu anda memilih struktur projek yang sesuai untuk pembangunan Frontend anda!

Atas ialah kandungan terperinci Berapakah jenis struktur projek bahagian hadapan yang ada?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!