Александра Донцова Front-end Developer в Sigma Software, Преподаватель Компьютерной школы Hillel.

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

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

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

Окунитесь в мир качественного кода и откройте для себя лучшие практики, которые сделают вас настоящим мастером своего дела.

ДОГОВОРЁННОСТЬ О НАИМЕНОВАНИИ ПЕРЕМЕННЫХ

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

1. Базовые договоренности:

camelCase для переменных и функций.

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

Примеры:

// Змінні

letuserName="John"; // Коректно

letuser_age=25; // Некоректно (використання нижнього підкреслення)

// Функції

functiongetUserInfo() {

// Коректно

}

functionget_user_info() {

// Некоректно (використання нижнього підкреслення)

}

PASCAL CASE ДЛЯ КЛАССОВ

PascalCase — стиль, где каждое слово начинается с прописной буквы. Эта конвенция используется для именования классов.

Примеры:

classUserAccount {

constructor(userName, userAge) {

this.userName=userName;

this.userAge=userAge;

  }
 
displayInfo() {

console.log(`${this.userName}, ${this.userAge}`);

  }

}

// Використання класу

letuser=newUserAccount("John", 25);

user.displayInfo();

UPPER CASE ДЛЯ КОНСТАНТ

UPPER CASE — стиль, где все буквы пишутся прописными, а слова разделяются нижним подчёркиванием. Эта конвенция используется для именования констант.

Примеры:

constMAX_USERS=100; // Коректно

constmaxUsers=100; // Некоректно (не відповідає конвенції)

constAPI_KEY="12345-abcde"; // Коректно

constapiKey="12345-abcde"; // Некоректно (не відповідає конвенції)

2. ОПИСАНИЕ ПЕРЕМЕННЫХ ИЛИ DESCRIPTIVE NAMES

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

Примеры:

// Змінні

letx=10; // Некоректно (незрозуміле ім'я)

letuserAge=10; // Коректно (чітко описує мету змінної)

// Функції

functioncalc(x, y) {// Некоректно (неясно, що саме обчислюється)

returnx+y;

}

functioncalculateSum(a, b) {// Коректно (чітко описує, що робить функція)

returna+b; 

}

// Класи

classU {

// Некоректно (незрозуміла назва класу)

}

classUser {

// Коректно (зрозуміла назва класу, що описує об'єкт користувача)

}

3. ИЗБЕГАНИЕ АББРЕВИАТУР (AVOID ABBREVIATIONS)

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

Примеры:

// Змінні

letusrNm="John"; // Некоректно (використано абревіатури)

letuserName="John"; // Коректно (повне слово)

// Функції

functioncalcUsrAge(dob) {

// Некоректно (незрозуміла абревіатура)

letage=newDate().getFullYear() -dob.getFullYear();

returnage;

}

functioncalculateUserAge(dateOfBirth) {

// Коректно (повні слова, зрозуміле призначення функції)

letage=newDate().getFullYear() -dateOfBirth.getFullYear();

returnage;

}

// Класи

classPrd {

// Некоректно (незрозуміла абревіатура)

}

classProduct {

// Коректно (повне слово, зрозуміла назва класу)

}

СТРУКТУРА КОДА (CODE STRUCTURE)

Правильная структура кода помогает сделать ваш проект более понятным, легким для поддержки и расширения. Вот некоторые основные принципы:

1. Модульность (Modularity)

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

Примеры:

// Велика функція з кількома відповідальностями (Некоректно)

functionprocessUserData(user) {

validateUserData(user);

letprocessedData=transformData(user);

saveDataToDatabase(processedData);

}

// Маленькі функції з єдиною відповідальністю (Коректно)

functionvalidateUserData(user) {

// Логіка валідації

}

functiontransformData(user) {

// Логіка трансформації даних

returntransformedData;

}

functionsaveDataToDatabase(data) {

// Логіка збереження даних

}

2. ОРГАНИЗАЦИЯ ФАЙЛОВ (FILE ORGANIZATION)

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

Примеры:

// Некоректна організація файлів

project/

├── script1.js

├── script2.js

├── script3.js

// Коректна організація файлів

project/

├── components/

│   ├── Header.js

│   ├── Footer.js

├── services/

│   ├── apiService.js

│   ├── authService.js

├── utils/

│   ├── helpers.js

3. РАЗДЕЛЕНИЕ ОТВЕТСТВЕННОСТЕЙ (SEPARATION OF CONCERNS)

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

Примеры:

// Без розділення відповідальностей (Некоректно)

functionrenderUserProfile(user) {

letuserData=fetchUserData(user.id); // Логіка обробки даних

letuserProfileHTML=`<div>${userData.name}</div>`; // Логіка UI

document.body.innerHTML=userProfileHTML;

}

// З розділенням відповідальностей (Коректно)

functionfetchUserData(userId) {

// Логіка обробки даних

returnuserData;

}

functiongenerateUserProfileHTML(userData) {

// Логіка UI

return`<div>${userData.name}</div>`;

}

functionrenderUserProfile(userId) {

letuserData=fetchUserData(userId);

letuserProfileHTML=generateUserProfileHTML(userData);

document.body.innerHTML=userProfileHTML;

}

ЧИТАБЕЛЬНОСТЬ (READABILITY)

Читаемость кода является ключевой для его понимания и поддержки. Вот несколько важных аспектов:

1. Отступы (Indentation)

Отступы помогают организовать код и делают его более лёгким для чтения. Обычно используется отступ в 2 или 4 пробела.

Примеры:

// Відступ у 2 пробіли (Коректно)

functioncalculateTotal(price, tax) {

lettotal=price+tax;

returntotal;

}

// Відступ у 4 пробіли (Коректно)

functioncalculateTotal(price, tax) {

lettotal=price+tax;

returntotal;

}

// Невідповідний відступ (Некоректно)

functioncalculateTotal(price, tax) {

lettotal=price+tax;

returntotal;

}

2. ДЛИНА СТРОК (LINELENGHT)

Длина строк должна быть умеренной, обычно не более 80-100 символов. Это делает код более лёгким для чтения и просмотра.

Примеры:

// Короткі рядки (Коректно)

functiongetUserInfo(userId) {

letuser=fetchUserFromDatabase(userId);

returnuser;

}

// Довгі рядки (Некоректно)

functiongetUserInfo(userId) { letuser=fetchUserFromDatabase(userId); returnuser; }

3. КОММЕНТАРИИ (COMMENTS)

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

Примеры:

// Очевидні коментарі (Некоректно)

letuserName="John"; // Змінна userName встановлюється значення "John"

// Пояснювальні коментарі (Коректно)

letuserName=fetchUserName(); // Отримання імені користувача з бази даних

// Складна логіка

functioncalculateDiscount(price, discount) {

// Перевірка, чи знижка не перевищує ціну

if (discount>price) {

returnprice;

  }

returnprice-discount;

}

ИЗБЕГАНИЕ СЛОЖНОСТИ (AVOIDING COMPLEXITY)

Избегание сложности кода делает код более лёгким для чтения, понимания и поддержки. Вот несколько важных аспектов:

1. Упрощение логики (SimplifyLogic)

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

Преимущества:

- понятность: код становится более лёгким для чтения и понимания;
- поддержка: проще найти и исправить ошибки в меньшей функции.

Примеры:

// Глибоке вкладення умов (Некоректно)

functionprocessOrder(order) {

if (order.isValid) {

if (order.items.length>0) {

if (order.paymentStatus==='paid') {

// Виконати замовлення

      }

    }

  }

}

// Розділення логіки на менші функції (Коректно)

functionisOrderValid(order) {

returnorder.isValid&&order.items.length>0&&order.paymentStatus==='paid';

}

functionprocessOrder(order) {

if (isOrderValid(order)) {

// Виконати замовлення

  }

}

2. ПРИНЦИП DRY (DON'T REPEAT YOURSELF)

Принцип DRY (Don'tRepeatYourself) означает повторное использование кода везде, где это возможно во избежание дублирования. Выносите повторяющийся код в функции или модуле.

Преимущества:

- уменьшение кода: меньше кода для поддержки;
- лёгкость обновления: изменения следует вносить только в одном месте.

Примеры:

// Дублювання коду (Некоректно)

functioncalculateAreaOfRectangle(width, height) {

returnwidth*height;

}

functioncalculateAreaOfTriangle(base, height) {

return0.5*base*height;

}

// Використання загальної функції (Коректно)

functioncalculateArea(shape, dimension1, dimension2) {

if (shape==='rectangle') {

returndimension1*dimension2;

  } elseif (shape==='triangle') {

return0.5*dimension1*dimension2;

  }

}

// Використання загальної функції

letrectangleArea=calculateArea('rectangle', 5, 10);

lettriangleArea=calculateArea('triangle', 5, 10);

ОБРАБОТКА ОШИБОК (ERROR HANDLING)

Обработка ошибок является важной частью написания надёжного и устойчивого кода. Вот несколько ключевых аспектов:

1. Качественная обработка ошибок (ErrorHandling)

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

Преимущества:

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

Примеры:

// Якісна обробка помилок

functionfetchUserData(userId) {

try {

letresponse=fetch(`https://api.example.com/users/${userId}`);

if (!response.ok) {

thrownewError('Network response was not ok');

    }

letuserData=response.json();

returnuserData;

  } catch (error) {

console.error('Fetch user data failed:', error);

return { error:'Failed to fetch user data. Please try again later.' };

  }

}

2. ВАЛИДАЦИЯ (VALIDATION)

Валидация означает проверку входных данных для функций и введенных пользователями данных, чтобы предотвратить возникновение ошибок из-за некорректных данных.

Примеры:

// Валідація вхідних даних

functioncalculateTotal(price, tax) {

if (typeofprice!=='number'||typeoftax!=='number') {

thrownewError('Invalid input: price and tax should be numbers');
 
}
returnprice+tax;

}

// Валідація користувацького вводу

functionhandleFormSubmit(event) {

event.preventDefault();

letuserName=document.getElementById('userName').value;

if (!userName) {

alert('User name is required');

return;
  
}

// Обробка форми

}

ПОЧЕМУ ЭТО ВАЖНО?

Удобство чтения и понимания кода: использование согласованных наименований переменных делает код более понятным и более лёгким для чтения, особенно для новых членов команды. Чёткие и описательные имена, упрощенная логика и хорошо организованные файлы способствуют лучшему пониманию кода.
Облегчение поддержки: когда весь код написан в одном стиле и структурирован логически, его легче поддерживать, обнаруживать и исправлять ошибки. Валидация и правильная обработка ошибок обеспечивают надёжность и стойкость приложений.
Увеличение производительности: согласованность уменьшает время, потраченное на понимание кода, что позволяет разработчикам быстрее ориентироваться в кодовой базе и сосредоточиться на решении задач. Повторное использование кода (принцип DRY) уменьшает дублирование и облегчает поддержку.

РЕКОМЕНДАЦИЯ

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

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