11.12.2024 09:56
uknowlina 0 1700 Источник

Введение

После обсуждения основных принципов нейминга в предыдущей статье, естественным продолжением будет описание случаев, которые выходят за рамки этих принципов.

Речь идет о ситуациях, когда подход к неймингу переменных и функций строго стандартизирован. Следование этим стандартам — это не просто рекомендация, а устоявшаяся практика, которую важно соблюдать для читаемости и согласованности кода.

В этой статье я поделюсь примерами таких случаев, разделив их на категории для удобства и наглядности. Надеюсь, этот материал будет полезен!

Примеры 

Односимвольные переменные

Обычно односимвольные переменные не приветствуются из‑за их неочевидности. Однако существуют определённые случаи, где их значение всегда понятно благодаря строго определённому контексту. Ниже я приведу некоторые примеры таких контекстов.

Перебор массива

Для итерации массивов наиболее распространённым стандартом является использование переменной i как индекса. Это понятно большинству разработчиков, так как i ассоциируется с index (индекс).

const numbers = [10, 20, 30, 40];

const doubledNumbers = numbers.map((value, i) => {
    console.log(`Элемент с индексом ${i}: ${value}`);
    return value * 2;

});

Строки и столбцы

Для двумерных массивов или таблиц принято использовать i для строк и j для столбцов.

const matrix = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9],
];

matrix.forEach((row, i) => {
    row.forEach((cell, j) => {
        console.log(`Значение в строке ${i}, столбце ${j}: ${cell}`);
    });
});

Рекурсия

В рекурсивных функциях односимвольные переменные вроде n часто обозначают оставшиеся шаги или текущую глубину.

function factorial(n) {
    if (n === 0) return 1;
    return n * factorial(n - 1);
}

console.log(factorial(5));

Координаты

Для работы с координатами используются переменные x, y и, если нужно, z. 

const point = { x: 5, y: 10, z: 15 };
console.log(`Координаты точки: x=${point.x}, y=${point.y}, z=${point.z}`);

Цвета

Цветовые каналы в формате RGB принято обозначать как r, g и b. 

const color = { r: 255, g: 200, b: 100 };
console.log(`Цвет: красный=${color.r}, зелёный=${color.g}, синий=${color.b}`);

Время

Для обозначения времени часто используются t (временной интервал), h (часы), m (минуты), s (секунды).

function formatTime(h, m, s) {
    return `${h}ч ${m}м ${s}с`;
}

console.log(formatTime(2, 30, 15));

События

Переменная e в обработчиках событий всегда ассоциируется с объектом события.

document.addEventListener('click', (e) => {
    console.log(`Клик на элементе с координатами x=${e.clientX}, y=${e.clientY}`);
});

Флаги

Флаги — это переменные, которые содержат логическое значение (true или false). Они часто используются для указания текущего состояния или возможности выполнения определённого действия. Общепринятой практикой является использование следующих префиксов:

  • is — описывает состояние или характеристику объекта.

  • has — указывает на наличие или отсутствие чего‑либо.

  • can — описывает возможность или доступность действия.

Префикс is

Используется для описания состояния объекта.

// Проверка состояния кнопки
const isButtonActive = true;
if (isButtonActive) {
    console.log('Кнопка активна');
}

Префикс has

Используется для указания на наличие свойства, данных или чего‑либо ещё.

// Проверка на наличие ошибок
const hasErrors = formFields.some(field => field.error !== undefined);

if (hasErrors) {
    console.log('Форма содержит ошибки');
}

Префикс can

Используется для определения возможности выполнения действия.

const remainingFunds = 50;
const cost = 40;

// Определение возможности выполнения операции
const canPurchase = remainingFunds >= cost;

console.log(`Покупка возможна: ${canPurchase}`); // true

События

Функции‑обработчики событий всегда начинаются с префикса on, чтобы явно указать, что они реагируют на определённое событие.

Интерфейсные события

Эти события происходят при взаимодействии пользователя с элементами интерфейса: клики, ввод текста, наведение мыши и т. д.

function onButtonClick(e) {
    console.log('Кнопка нажата:', e.target);
}

function onInputChange(e) {
    console.log('Текстовое поле обновлено:', e.target.value);
}

function onFormSubmit(e) {
    e.preventDefault();
    console.log('Форма отправлена.');
}

Системные события

Это события, связанные с системными процессами, например, изменения состояния соединения, завершение загрузки или другие действия вне интерфейса.

function onConnectionLost() {
    console.log('Соединение потеряно. Попытка переподключения...');
}

function onDataLoaded(data) {
    console.log('Данные успешно загружены:', data);
}

function onServerError(error) {
    console.error('Ошибка сервера:', error.message);
}

Кастомные события

Кастомные события создаются разработчиками для управления сложными процессами, например, взаимодействия между модулями и компонентами.

function onUserLogin(user) {
    console.log('Пользователь вошёл в систему:', user.name);
}

function onCartUpdate(cart) {
    console.log('Корзина обновлена. Новое количество товаров:', cart.items.length);
}

function onThemeChange(theme) {
    console.log('Тема изменена на:', theme);
}

Составные события

Иногда одно событие может инициировать несколько действий, и требуется обработка каждого из них в отдельных функциях.

function onFileUploadStart(file) {
    console.log('Загрузка начата для файла:', file.name);
}

function onFileUploadProgress(file, progress) {
    console.log(`Загрузка файла ${file.name} завершена на ${progress}%`);
}

function onFileUploadComplete(file) {
    console.log('Файл успешно загружен:', file.name);
}

Хуки в React

Хуки в React — это функции, которые позволяют использовать состояния и другие возможности React в функциональных компонентах. Для поддержания читаемости кода и согласованности существует стандарт: все пользовательские хуки должны начинаться с префикса use.

Встроенные хуки

React предоставляет несколько встроенных хуков для работы с состояниями, эффектами и контекстами, например, useState и useEffect.

import { useState } from 'react';

function Counter() {
    const [count, setCount] = useState(0);

    function increment() {
        setCount(count + 1);
    }

    useEffect(() => {
        console.log('Компонент смонтирован');
        return () => console.log('Компонент размонтирован');
    }, []);

    return <button onClick={increment}>Count: {count}</button>;
}

Кастомные хуки

Кастомные хуки используются для объединения логики, которая может быть повторно использована в разных компонентах.

Пример: useAuth для проверки статуса авторизации.

import { useState, useEffect } from 'react';

function useAuth() {
    const [isAuthenticated, setIsAuthenticated] = useState(false);

    useEffect(() => {
        // Симуляция проверки авторизации
        const authStatus = localStorage.getItem('auth') === 'true';
        setIsAuthenticated(authStatus);
    }, []);

    return isAuthenticated;
}

export default useAuth;

Пример: useModal для управления состоянием модального окна.

import { useState } from 'react';

function useModal() {
    const [isOpen, setIsOpen] = useState(false);

    function openModal() {
        setIsOpen(true);
    }

    function closeModal() {
        setIsOpen(false);
    }

    return { isOpen, openModal, closeModal };
}

export default useModal;

Константы

Константы используются для хранения неизменяемых значений. Они выделяются среди других переменных благодаря использованию верхнего регистра с разделением слов через символ подчеркивания (snake_case).

Это общепринятый стандарт, который упрощает идентификацию констант в коде.

Глобальные константы

Глобальные константы обычно содержат конфигурационные параметры, которые используются в разных модулях приложения.

// Указание базового URL для API-запросов
const API_URL = 'https://api.example.com/v1/'; 

// Установка стандартного таймаута для асинхронных операций
const DEFAULT_TIMEOUT = 5000; 

Константы в модулях

На уровне отдельных модулей константы применяются для определения лимитов, значений по умолчанию или других неизменяемых параметров, специфичных для определенного функционала.

// Ограничение количества попыток повторного выполнения запроса
const MAX_RETRIES = 3;

// Минимальная высота элемента интерфейса
const MIN_HEIGHT = 100;

Заключение

Стандарты нейминга в программировании — это не просто соглашение, а важный инструмент поддержки качества кода. Следование этим стандартам помогает сделать код не только лучше для чтения, но и легче для сопровождения.

Буду рада вашим мыслям, вопросам и предложениям!

Комментарии (0)