ホームページ > ウェブフロントエンド > jsチュートリアル > 変数やフォルダーの命名規則は何ですか?

変数やフォルダーの命名規則は何ですか?

王林
リリース: 2024-08-13 14:30:40
オリジナル
839 人が閲覧しました

What are the rules for naming variables and folders?

プロジェクト内の変数とフォルダーの名前付けは、コードの読みやすさと順序を維持するために非常に重要です。一般的な命名規則とルールをいくつか示します:

変数に名前を付ける

  1. キャメルケースを使用します: 変数、関数、小道具や状態変数の名前には次のようになります。

    • ユーザー名
    • ログイン中
    • ハンドルクリック
  2. 明確に名前を付けます: 変数の名前は、その機能や保持する情報を明確に伝える必要があります。次に例を示します。

    • CartItems (カート内のアイテム用)
    • authToken (認証トークン用)
  3. データ型にわかりやすい名前を使用します: 同じ変数に複数のデータ型がある場合、たとえば次のようになります。

    • userAge (ユーザーに関して複数の変数がある場合)
    • 商品価格
  4. 略語を避ける: 明確にするためにフルネームを使用します。例:

    • usrProf の代わりに userProfile を使用します。

フォルダーの名前付け

  1. フォルダーの名前には kebab-case または Snake_case を使用します: 例:

    • ユーザープロファイル (ケバブケース)
    • user_profile (snake_case)
  2. わかりやすい名前を付けます: フォルダーの名前は、その内容または機能を反映する必要があります。例:

    • コンポーネント/ (React コンポーネントを保存するため)
    • services/ (サービス関数または API の保存用)
    • hooks/ (カスタムフックの保存用)
  3. 一貫した形式を使用する: プロジェクト全体で一貫した名前付け形式を維持します。注文の場合:

    • フォルダーにkebab-caseを使用する場合すべてのフォルダーに同じ形式を使用します
  4. 一般的な名前や曖昧な名前は避ける: フォルダーの内容や機能を反映した名前を使用します。

    • misc/ の代わりに utils/ を使用してください
    • data/ の代わりに store/ を使用する

フォルダ:

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;
  }
};
ログイン後にコピー

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

以上が変数やフォルダーの命名規則は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:dev.to
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート