การตั้งชื่อสำหรับตัวแปรและโฟลเดอร์ในโปรเจกต์มีความสำคัญมากในการรักษาความอ่านง่ายและความเป็นระเบียบของโค้ด ต่อไปนี้คือลักษณะและกฎทั่วไปในการตั้งชื่อ:
ใช้ camelCase: สำหรับตัวแปร, ฟังก์ชัน, และชื่อของ props หรือ state variables เช่น:
ตั้งชื่อให้ชัดเจน: ชื่อของตัวแปรควรสื่อความหมายให้ชัดเจนเกี่ยวกับหน้าที่หรือข้อมูลที่มันเก็บ เช่น:
ใช้ชื่อที่สื่อถึงประเภทข้อมูล: หากมีหลายประเภทข้อมูลในตัวแปรเดียวกัน เช่น:
หลีกเลี่ยงการใช้ตัวย่อ: ใช้ชื่อเต็มเพื่อความชัดเจน เช่น:
ใช้ kebab-case หรือ snake_case: สำหรับชื่อของโฟลเดอร์ เช่น:
ตั้งชื่อให้สื่อความหมาย: ชื่อของโฟลเดอร์ควรสื่อถึงเนื้อหาหรือฟังก์ชันการทำงานของโฟลเดอร์นั้น เช่น:
ใช้รูปแบบที่สม่ำเสมอ: รักษารูปแบบการตั้งชื่อที่สม่ำเสมอในทั้งโปรเจกต์ เพื่อความเป็นระเบียบ เช่น:
หลีกเลี่ยงการใช้ชื่อทั่วไปหรือคลุมเครือ: ใช้ชื่อที่บ่งบอกถึงเนื้อหาหรือฟังก์ชันของโฟลเดอร์ เช่น:
โฟลเดอร์:
src/ ├── components/ │ ├── Button.tsx │ └── Header.tsx ├── hooks/ │ └── useFetch.ts ├── services/ │ └── apiService.ts ├── stores/ │ ├── auth/ │ │ ├── useAuthStore.ts │ │ └── authTypes.ts │ ├── user/ │ │ ├── useUserStore.ts │ │ └── userTypes.ts │ ├── product/ │ │ ├── useProductStore.ts │ │ └── productTypes.ts │ └── cart/ │ ├── useCartStore.ts │ └── cartTypes.ts └── index.ts
ตัวแปร:
// ตัวอย่างใน useAuthStore.ts interface AuthState { isAuthenticated: boolean; user: string | null; login: (username: string) => void; logout: () => void; } // ตัวอย่างใน useUserStore.ts interface UserState { name: string; email: string; updateUser: (name: string, email: string) => void; }
การใช้กฎการตั้งชื่อที่ดีจะช่วยให้โค้ดของคุณดูเป็นระเบียบและเข้าใจง่ายขึ้น
การตั้งชื่อค่าคอนฟิกหรือค่าคงที่เช่น DATABASE_CONFIG ควรปฏิบัติตามหลักการที่ช่วยให้เข้าใจง่ายและตรงตามวัตถุประสงค์ นี่คือกฎในการตั้งชื่อค่าคอนฟิก:
ใช้รูปแบบ UPPER_SNAKE_CASE: ชื่อของค่าคอนฟิกหรือค่าคงที่ควรใช้รูปแบบ UPPER_SNAKE_CASE เพื่อแสดงให้เห็นว่านี่คือค่าคงที่และไม่ควรถูกเปลี่ยนแปลง เช่น:
สื่อความหมายได้ชัดเจน: ชื่อของค่าคอนฟิกควรบ่งบอกถึงการใช้งานหรือวัตถุประสงค์ของมัน เช่น:
รวมคอนเท็กซ์และการใช้งาน: ค่าคอนฟิกควรมีชื่อที่รวมคอนเท็กซ์หรือการใช้งานเพื่อให้เข้าใจได้ง่าย เช่น:
หลีกเลี่ยงการใช้ชื่อที่คลุมเครือ: ชื่อของค่าคอนฟิกควรเฉพาะเจาะจงและไม่ควรใช้ชื่อที่คลุมเครือหรือทั่วไปเกินไป เช่น:
ใช้คำที่สื่อถึงประเภทของค่า: ชื่อค่าคอนฟิกควรสื่อถึงประเภทของค่า เช่น ค่าเชิงตัวเลข, สตริง, หรือ Boolean เป็นต้น เช่น:
ไฟล์คอนฟิก
// ตัวอย่างในไฟล์ config.ts export const DATABASE_CONFIG = { HOST: 'localhost', PORT: 5432, USER: 'dbuser', PASSWORD: 'password', DATABASE_NAME: 'mydatabase' }; export const API_CONFIG = { BASE_URL: 'https://api.example.com', TIMEOUT: 5000, // Timeout in milliseconds API_KEY: 'your-api-key-here' }; export const APP_SETTINGS = { MAX_RETRY_ATTEMPTS: 3, SESSION_TIMEOUT: 3600, // Timeout in seconds ENABLE_LOGGING: true };
การใช้ค่าคอนฟิกในโค้ด
import { DATABASE_CONFIG, API_CONFIG, APP_SETTINGS } from './config'; // การใช้ค่าคอนฟิกในการเชื่อมต่อฐานข้อมูล const dbConnection = connectToDatabase({ host: DATABASE_CONFIG.HOST, port: DATABASE_CONFIG.PORT, user: DATABASE_CONFIG.USER, password: DATABASE_CONFIG.PASSWORD, database: DATABASE_CONFIG.DATABASE_NAME }); // การใช้ค่าคอนฟิกสำหรับ API const fetchData = async () => { try { const response = await fetch(API_CONFIG.BASE_URL '/data', { method: 'GET', headers: { 'Authorization': `Bearer ${API_CONFIG.API_KEY}` }, timeout: API_CONFIG.TIMEOUT }); const data = await response.json(); return data; } catch (error) { if (APP_SETTINGS.ENABLE_LOGGING) { console.error('Error fetching data:', error); } throw error; } };
การใช้หลักการเหล่านี้จะช่วยให้คุณตั้งชื่อค่าคอนฟิกอย่างมีระเบียบและเข้าใจง่ายครับ
Disclaimer: All resources provided are partly from the Internet. If there is any infringement of your copyright or other rights and interests, please explain the detailed reasons and provide proof of copyright or rights and interests and then send it to the email: [email protected] We will handle it for you as soon as possible.
Copyright© 2022 湘ICP备2022001581号-3