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

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

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

1. Используйте соглашения об описательных именах

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

<div class="header-section">
  <h1 class="page-title">Welcome to my Website</h1>
  <nav class="main-navigation">
    <ul class="nav-list">
      <li><a href="#" class="nav-link">Home</a></li>
      <li><a href="#" class="nav-link">About</a></li>
      <li><a href="#" class="nav-link">Services</a></li>
      <li><a href="#" class="nav-link">Contact</a></li>
    </ul>
  </nav>
</div>

В этом примере мы использовали описательные имена для классов, чтобы было понятно, для чего предназначен каждый элемент. Например, «header-section» описывает раздел, содержащий заголовок веб-сайта, «page-title» описывает заголовок страницы, «main-navigation» описывает навигационный раздел веб-сайта, а «nav-link» описывает каждую ссылка в навигации. Это упрощает чтение и понимание кода, а также упрощает внесение изменений или обновлений на веб-сайт в будущем.

2. Следуйте единым стандартам форматирования

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Page Title</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <header>
      <nav>
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <section>
        <h1>Section Title</h1>
        <p>Lorem ipsum dolor sit amet</p>
      </section>
    </main>
    <footer>
      <p>&copy; 2023 My Website. All rights reserved.</p>
    </footer>
  </body>
</html>

В этом примере код отформатирован в соответствии со следующими стандартами:

  • Отступ одинаковый (в данном случае 2 пробела)
  • Открывающий и закрывающий теги находятся на отдельных строках
  • Дочерние элементы имеют отступ от родительского элемента
  • Значения атрибутов заключены в двойные кавычки
  • Объявление <!DOCTYPE> состоит из прописных букв
  • Комментарии используются для разделения различных разделов кода и объяснения того, что делает каждый раздел.

3. Пишите комментарии и документацию

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

// This function calculates the area of a rectangle
function calculateRectangleArea(width, height) {
  /*
   * The formula for calculating the area of a rectangle
   * is width * height, so we simply multiply the two
   * values and return the result.
   */
  const area = width * height;
  return area;
}

/*
 * This function takes an array of numbers and returns
 * the sum of all the numbers in the array.
 */
function calculateSum(numbers) {
  let sum = 0;
  for (let i = 0; i < numbers.length; i++) {
    sum += numbers[i];
  }
  return sum;
}

// This code calls the calculateRectangleArea function and logs the result to the console
const width = 10;
const height = 5;
const area = calculateRectangleArea(width, height);
console.log("The area of the rectangle is: " + area);

В этом примере комментарии и документация используются следующими способами:

  • Однострочные комментарии используются для объяснения назначения функций calculateRectangleArea и calculateSum.
  • Многострочные комментарии используются для объяснения формулы вычисления площади прямоугольника в функции calculateRectangleArea.
  • Комментарии также используются для объяснения назначения кода, который вызывает функцию calculateRectangleArea и записывает результат в консоль.
  • Используемый стиль документации — простой и понятный, в котором используются комментарии для объяснения назначения кода и функциональности функций.

4. Сведите к минимуму дублирование кода

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

// Without minimizing code duplication:
function calculateSquareArea(side) {
  const area = side * side;
  return area;
}

function calculateRectangleArea(width, height) {
  const area = width * height;
  return area;
}

// With minimized code duplication:
function calculateArea(shape, ...args) {
  let area = 0;
  switch(shape) {
    case 'square':
      area = args[0] * args[0];
      break;
    case 'rectangle':
      area = args[0] * args[1];
      break;
    default:
      console.log('Invalid shape');
  }
  return area;
}

// This code calls the calculateArea function with different shapes and logs the result to the console
console.log("The area of the square is: " + calculateArea('square', 5));
console.log("The area of the rectangle is: " + calculateArea('rectangle', 10, 5));

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

5. Эффективно используйте функции и классы

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

// Without using functions and classes effectively:
const firstName = 'John';
const lastName = 'Doe';

function sayHello() {
  console.log("Hello, " + firstName + " " + lastName + "!");
}

function calculateRectangleArea(width, height) {
  const area = width * height;
  return area;
}

// With using functions and classes effectively:
class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }

  sayHello() {
    console.log("Hello, " + this.firstName + " " + this.lastName + "!");
  }
}

class Rectangle {
  constructor(width, height) {
    this.width = width;
    this.height = height;
  }

  calculateArea() {
    const area = this.width * this.height;
    return area;
  }
}

// This code creates a new Person and a new Rectangle object, and calls their methods to output messages and calculate an area
const john = new Person('John', 'Doe');
john.sayHello();

const rect = new Rectangle(10, 5);
const area = rect.calculateArea();
console.log("The area of the rectangle is: " + area);

В этом примере функции и классы эффективно используются следующими способами:

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

6. Реализовать обработку ошибок

Правильная обработка ошибок может снизить вероятность непредвиденных ошибок и обеспечить удобство для пользователей. Исключения можно обрабатывать с помощью блока try-catch, и важно предоставить осмысленное сообщение об ошибке.

function divideNumbers(a, b) {
  if (b === 0) {
    throw new Error("Cannot divide by zero");
  }
  return a / b;
}

try {
  const result = divideNumbers(10, 0);
  console.log("The result is: " + result);
} catch (error) {
  console.log("An error occurred: " + error.message);
}

В этом примере обработка ошибок реализована с помощью блока try-catch и инструкции throw, которая выдает пользовательскую ошибку, если второй параметр, переданный функции divideNumbers, равен нулю.

Блок try вызывает функцию divideNumbers с аргументами 10 и 0. Поскольку вторым аргументом является 0, при использовании оператора throw выдается ошибка. Сообщение об ошибке передается в качестве аргумента конструктору Error.

Блок catch перехватывает все ошибки, возникающие в блоке try, и выводит сообщение об ошибке на консоль. В этом случае регистрируется сообщение "Невозможно разделить на ноль".

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

7. Протестируйте свой код

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

// The function to be tested
function sum(a, b) {
  return a + b;
}

// The test case
test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

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

Функция test принимает два аргумента: строку, описывающую тест, и функцию, содержащую код теста. Внутри тестовой функции функция expect используется для указания ожидаемого результата функции sum при передаче аргументов 1 и 2. Сопоставитель toBe проверяет, равен ли фактический результат функции sum ожидаемому результату.

Если тест выполняется с помощью Jest, он будет пройден, если функция sum вернет 3 для аргументов 1 и 2, и завершится ошибкой, если это не так.

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

8. Избегайте жестко заданных значений

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

const MAX_USERNAME_LENGTH = 20;

function validateUsername(username) {
  if (username.length > MAX_USERNAME_LENGTH) {
    return false;
  }
  return true;
}

В этом примере максимальная длина имени пользователя хранится в постоянной переменной с именем MAX_USERNAME_LENGTH. Функция validateUsername принимает в качестве аргумента имя пользователя и проверяет, не превышает ли его длина MAX_USERNAME_LENGTH. Если это так, функция возвращает false, указывая на то, что имя пользователя недействительно. Если длина меньше или равна MAX_USERNAME_LENGTH, функция возвращает true.

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

9. Используйте контроль версий

Контроль версий упрощает управление изменениями кода и сотрудничество с другими разработчиками. Можно использовать систему контроля версий, такую ​​как git, которая позволяет отслеживать изменения, отменять изменения и объединять изменения с другими разработчиками.

# Create a new repository
git init myproject

# Add files to the repository
cd myproject
touch index.html
git add index.html

# Commit the changes
git commit -m "Initial commit"

# Make changes to the file and commit again
echo "Hello, world!" > index.html
git add index.html
git commit -m "Add greeting message"

# View the commit history
git log

В этом примере мы создаем новый репозиторий Git с именем myproject, добавляем в него файл с именем index.html и делаем две фиксации. Первая фиксация — это начальная фиксация, которая добавляет файл index.html в репозиторий. Вторая фиксация изменяет файл index.html, добавляя приветственное сообщение.

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

10. Продолжайте учиться и совершенствоваться

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

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

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

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