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

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

Итак, когда кто-то (или вы) вернется, чтобы добавить или изменить ваш код, вам будет легко понять, что делает каждая строка кода. В противном случае большая часть вашего времени будет потрачена на то, чтобы просто понять код. Та же проблема возникнет и у нового разработчика, работающего над вашей кодовой базой. Они не поймут код, если он не чистый. Поэтому очень важно писать чистый код.

Что такое чистый код?

Чистый код в основном относится к коду, который является

1. Легко понять
2. Легко отлаживать
3. Простота обслуживания
4. Комментарии написаны хорошо, кратко и понятно
5. Нет дублирующего (избыточного) кода и соответствует правилу KISS (Будь проще, глупый!)

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

Почему важен чистый код?

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

1. Читабельность и сопровождение: Код легко читать и понимать, если он хорошо написан, имеет хорошие комментарии и соответствует лучшим практикам. Как только возникнет проблема или ошибка, вы точно знаете, где ее найти.

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

3. Улучшенное качество и надежность: Чистый код следует лучшим практикам конкретных языков и отдает приоритет хорошо структурированному коду. Это повышает качество и надежность. Таким образом, это устраняет ошибки, которые могут возникнуть из-за ошибок и неструктурированного кода.

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

Принципы чистого кода

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

Давайте посмотрим на это подробнее.

1. Избегайте жестко закодированных номеров

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

Пример

function getDate() {
  const date = new Date();
  return "Today's date: "   date;
}

function getFormattedDate() {
  const date = new Date().toLocaleString();
  return "Today's date: "   date;
}

В этом коде в какой-то момент происходит изменение: вместо «Сегодняшняя дата:» нужно становится «Дата:». Это можно улучшить, присвоив эту строку одной переменной.

Улучшенный код:

const todaysDateLabel = "Today's date: ";

function getDate() {
  const date = new Date();
  return todaysDateLabel   date;
}

function getFormattedDate() {
  const date = new Date().toLocaleString();
  return todaysDateLabel   date;
}

В приведенном выше коде можно легко изменить строку даты, когда это необходимо. Это улучшает ремонтопригодность.

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

Правила в отношении имен

1. Выбирайте описательные и недвусмысленные имена.
2. Проведите значимое различие.
3. Используйте произносимые имена.
4. Используйте имена, доступные для поиска.
5. Замените магические числа именованными константами.
6. Избегайте кодировок. Не добавляйте префиксы и не вводите информацию.

Пример

// Calculate the area of a rectangle
function calc(w, h) {
    return w * h;
}

const w = 5;
const h = 10;
const a = calc(w, h);
console.log(`Area: ${a}`);

Здесь код правильный, но есть некоторая неясность в коде. Давайте посмотрим код, в котором используются описательные имена.

Улучшенный код

// Calculate the area of a rectangle
function calculateRectangleArea(width, height) {
    return width * height;
}

const rectangleWidth = 5;
const rectangleHeight = 10;
const area = calculateRectangleArea(rectangleWidth, rectangleHeight);
console.log(`Area of the rectangle: ${area}`);

Здесь имена всех переменных говорят сами за себя. Таким образом, код легко понять, и это повышает его качество.

3. Используйте комментарии только там, где это необходимо
Не нужно везде писать комментарии. Просто напишите там, где это необходимо, и напишите коротко и понятно. Слишком много комментариев приведет к путанице и беспорядку в кодовой базе.

Правила комментариев

1. Всегда старайтесь объясниться в коде.
2. Не будьте лишними.
3. Не добавляйте явный шум.
4. Не используйте комментарии в закрывающих скобках.
5. Не комментируйте код. Просто удалите.
6. Использовать в качестве объяснения намерений.
7. Используйте для пояснения кода.
8. Используйте в качестве предупреждения о последствиях.

Пример

// Function to get the square of a number
function square(n) {
    // Multiply the number by itself
    var result = n * n; // Calculate square
    // Return the result
    return result; // Done
}

var num = 4; // Number to square
var squared = square(num); // Call function

// Output the result
console.log(squared); // Print squared number

Здесь мы видим, что комментарии используются для определения шагов, которые легко понять, прочитав код. Эти комментарии не нужны и загромождают код. Давайте посмотрим правильное использование комментариев.

Улучшенный код

/**
 * Returns the square of a number.
 * @param {number} n - The number to be squared.
 * @return {number} The square of the input number.
 */
function square(n) {
    return n * n;
}

var num = 4;
var squared = square(num); // Get the square of num

console.log(squared); // Output the result

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

4. Напишите функции, которые делают только одну вещь
Когда вы пишете функции, не добавляйте к ним слишком много обязанностей. Следуйте принципу единой ответственности (SRP). Это облегчает понимание функции и упрощает написание для нее модульных тестов.

Правила функций

1. Сохраняйте компактность.
2. Сделай одно дело.
3. Используйте описательные имена.
4. Предпочитаете меньше аргументов.
5. Разбить метод на несколько независимых методов, которые можно вызывать из клиента.

Пример

async function fetchDataAndProcess(url) {
    // Fetches data from an API and processes it in the same function
    try {
        const response = await fetch(url);
        const data = await response.json();

        // Process data (e.g., filter items with value greater than 10)
        const processedData = data.filter(item => item.value > 10);

        console.log(processedData);
    } catch (error) {
        console.error('Error:', error);
    }
}

// Usage
const apiUrl = 'https://api.example.com/data';
fetchDataAndProcess(apiUrl);

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

Улучшенный код

async function fetchData(url) {
    // Fetches data from an API
    try {
        const response = await fetch(url);
        return await response.json();
    } catch (error) {
        console.error('Error:', error);
        throw error;
    }
}

function processData(data) {
    // Processes the fetched data (e.g., filter items with value greater than 10)
    return data.filter(item => item.value > 10);
}

// Usage
const apiUrl = 'https://api.example.com/data';

fetchData(apiUrl)
    .then(data => {
        const processedData = processData(data);
        console.log(processedData);
    })
    .catch(error => {
        console.error('Error:', error);
    });

В этом примере обязанности разделены: функция fetchData обрабатывает вызов API, а функцияprocessData обрабатывает данные. Это упрощает понимание, поддержку и тестирование кода.

5. Избегайте дублирования кода (следуйте принципу DRY — не повторяйте себя)

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

Другие общие правила написания чистого кода

• Следуйте стандартным соглашениям (для случая JavaScript Camel).
• Держать его просто глупо. Чем проще, тем лучше. Максимально уменьшите сложность.
• Правило бойскаутов. Оставьте палаточный лагерь чище, чем вы его нашли.
• Всегда находите первопричину. Всегда ищите причину проблемы.
• Пишите простой для понимания код

С сегодняшнего дня применяйте эти практики и принципы для написания чистого кода.