Разбираем стандарты нейминга на примерах

Введение

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

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

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

Примеры 

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

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

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

Для итерации массивов наиболее распространённым стандартом является использование переменной 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;

Заключение

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

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