"If a worker wants to do his job well, he must first sharpen his tools." - Confucius, "The Analects of Confucius. Lu Linggong"
Front page > Programming > What are the rules for naming variables and folders?

What are the rules for naming variables and folders?

Published on 2024-11-08
Browse:246

What are the rules for naming variables and folders?

การตั้งชื่อสำหรับตัวแปรและโฟลเดอร์ในโปรเจกต์มีความสำคัญมากในการรักษาความอ่านง่ายและความเป็นระเบียบของโค้ด ต่อไปนี้คือลักษณะและกฎทั่วไปในการตั้งชื่อ:

การตั้งชื่อตัวแปร

  1. ใช้ camelCase: สำหรับตัวแปร, ฟังก์ชัน, และชื่อของ props หรือ state variables เช่น:

    • userName
    • isLoggedIn
    • handleClick
  2. ตั้งชื่อให้ชัดเจน: ชื่อของตัวแปรควรสื่อความหมายให้ชัดเจนเกี่ยวกับหน้าที่หรือข้อมูลที่มันเก็บ เช่น:

    • cartItems (สำหรับรายการในรถเข็น)
    • authToken (สำหรับโทเคนการยืนยันตัวตน)
  3. ใช้ชื่อที่สื่อถึงประเภทข้อมูล: หากมีหลายประเภทข้อมูลในตัวแปรเดียวกัน เช่น:

    • userAge (ถ้ามีตัวแปรหลายประเภทเกี่ยวกับผู้ใช้)
    • productPrice
  4. หลีกเลี่ยงการใช้ตัวย่อ: ใช้ชื่อเต็มเพื่อความชัดเจน เช่น:

    • ใช้ userProfile แทน usrProf

การตั้งชื่อโฟลเดอร์

  1. ใช้ kebab-case หรือ snake_case: สำหรับชื่อของโฟลเดอร์ เช่น:

    • user-profile (kebab-case)
    • user_profile (snake_case)
  2. ตั้งชื่อให้สื่อความหมาย: ชื่อของโฟลเดอร์ควรสื่อถึงเนื้อหาหรือฟังก์ชันการทำงานของโฟลเดอร์นั้น เช่น:

    • components/ (สำหรับเก็บคอมโพเนนต์ React)
    • services/ (สำหรับเก็บฟังก์ชันบริการหรือ API)
    • hooks/ (สำหรับเก็บ custom hooks)
  3. ใช้รูปแบบที่สม่ำเสมอ: รักษารูปแบบการตั้งชื่อที่สม่ำเสมอในทั้งโปรเจกต์ เพื่อความเป็นระเบียบ เช่น:

    • ถ้าใช้ kebab-case สำหรับโฟลเดอร์หนึ่ง ให้ใช้รูปแบบเดียวกันสำหรับโฟลเดอร์ทั้งหมด
  4. หลีกเลี่ยงการใช้ชื่อทั่วไปหรือคลุมเครือ: ใช้ชื่อที่บ่งบอกถึงเนื้อหาหรือฟังก์ชันของโฟลเดอร์ เช่น:

    • ใช้ utils/ แทน misc/
    • ใช้ store/ แทน data/

ตัวอย่าง

โฟลเดอร์:

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 ควรปฏิบัติตามหลักการที่ช่วยให้เข้าใจง่ายและตรงตามวัตถุประสงค์ นี่คือกฎในการตั้งชื่อค่าคอนฟิก:

กฎในการตั้งชื่อค่าคอนฟิก

  1. ใช้รูปแบบ UPPER_SNAKE_CASE: ชื่อของค่าคอนฟิกหรือค่าคงที่ควรใช้รูปแบบ UPPER_SNAKE_CASE เพื่อแสดงให้เห็นว่านี่คือค่าคงที่และไม่ควรถูกเปลี่ยนแปลง เช่น:

    • DATABASE_CONFIG
    • API_ENDPOINT
    • MAX_RETRY_ATTEMPTS
  2. สื่อความหมายได้ชัดเจน: ชื่อของค่าคอนฟิกควรบ่งบอกถึงการใช้งานหรือวัตถุประสงค์ของมัน เช่น:

    • DATABASE_HOST (สำหรับโฮสต์ของฐานข้อมูล)
    • CACHE_EXPIRATION_TIME (สำหรับเวลาหมดอายุของแคช)
  3. รวมคอนเท็กซ์และการใช้งาน: ค่าคอนฟิกควรมีชื่อที่รวมคอนเท็กซ์หรือการใช้งานเพื่อให้เข้าใจได้ง่าย เช่น:

    • EMAIL_SERVICE_API_KEY (สำหรับคีย์ API ของบริการอีเมล)
    • JWT_SECRET_KEY (สำหรับคีย์ลับของ JSON Web Token)
  4. หลีกเลี่ยงการใช้ชื่อที่คลุมเครือ: ชื่อของค่าคอนฟิกควรเฉพาะเจาะจงและไม่ควรใช้ชื่อที่คลุมเครือหรือทั่วไปเกินไป เช่น:

    • ใช้ DATABASE_PORT แทน PORT
    • ใช้ SESSION_TIMEOUT แทน TIMEOUT
  5. ใช้คำที่สื่อถึงประเภทของค่า: ชื่อค่าคอนฟิกควรสื่อถึงประเภทของค่า เช่น ค่าเชิงตัวเลข, สตริง, หรือ Boolean เป็นต้น เช่น:

    • MAX_CONNECTIONS (ค่าตัวเลขสูงสุดของการเชื่อมต่อ)
    • ENABLE_LOGGING (ค่า 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;
  }
};

การใช้หลักการเหล่านี้จะช่วยให้คุณตั้งชื่อค่าคอนฟิกอย่างมีระเบียบและเข้าใจง่ายครับ

Release Statement This article is reproduced at: https://dev.to/cinderellan/what-are-the-rules-for-naming-variables-and-folders-379k?1 If there is any infringement, please contact [email protected] to delete it
Latest tutorial More>

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