Когда я делал групповой проект в университете, когда пытался обновить код, написанный другими членами команды, я столкнулся с тем, что код не был чистым. Чистый код легко читать, легко понимать и легко поддерживать.
Написание чистого кода очень важно для веб-разработчика. Это облегчает другим разработчикам понимание и изменение вашего кода, уменьшает количество багов и ошибок и повышает качество кода. И это также может быть причиной получить работу, когда вы подаете заявление о приеме на работу.
В этой статье я даю 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>© 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 советов, вы сможете писать код, который легче читать, легче поддерживать и надежнее. Не забывайте использовать описательные соглашения об именах, согласованное форматирование и эффективные функции и классы. Пишите комментарии и документацию, правильно обрабатывайте ошибки и тестируйте свой код. Избегайте жестко заданных значений, используйте контроль версий и продолжайте учиться и совершенствовать свои навыки. Это может производить высококачественное программное обеспечение и стать лучшим программистом. Не забывайте постоянно практиковаться и улучшать свои навыки. Чистый код полезен не только вам, но и вашей команде.
Помните, что чистый код не только делает ваш код красивым, но и делает его более эффективным и простым в обслуживании, а также уменьшает количество ошибок. Используя чистый код, вы можете повысить свою производительность, а также повысить качество.