От автора: три основных принципа разработки программного обеспечения: возможность рефакторинга, возможность повторного использования и читаемость.
Хороший код легко понять и поддерживать. Это достигает за счет трех R архитектуры программного обеспечения: Refactorability, Reusability и Readability.
Достижение трех R всегда было важно, но стало еще более значительным в последние годы. Продукты часто реализуются различными способами для различных аудиторий, устройств и платформ. Все это делает совместную работу и повторное использование компонентов абсолютно необходимым.
Код, который сложно выделить, повторно использовать и понять, не будет принят другими проектами. Вы можете проверить свой собственный код, опубликовав компоненты в Bit. Если вы создали его правильно, вам будет очень легко публиковать компоненты и повторно использовать их в других проектах.
Переменные
Значимые имена
Убедитесь, что переменные названы осмысленно. Это уменьшает необходимость в дополнительных комментариях, так как ваш код говорит сам за себя.
//BAD cosnt ddmmyyyy = new Date(); //GOOD const date = new Date();
Имена переменных с возможностью поиска
Мы тратим больше времени на чтение кода, чем на его написание. Вот почему важно, чтобы он был читабельным и доступным для поиска. Если вы видите значение и не знаете, что оно делает или должно делать, это может сбить с толку.
//BAD //Reader would have no clue on what 86400000 is setTimeout(randomFunction, 86400000); //GOOD // Declare them as capitalized named constants. const MILLISECONDS_IN_A_DAY = 86_400_000; setTimeout(blastOff, MILLISECONDS_IN_A_DAY);
Избегайте ментального сопоставления
Не заставляйте людей запоминать контекст переменных. Переменные должны быть понятны, даже когда читатель не сумел проследить всю историю их появления.
// BAD
const names = ["John", "Jane", "Joseph"];
names.forEach(v => { doStuff(); doSomethingExtra(); // ... // ... // ... // What is this 'v' for? dispatch(v);
}); // GOOD
const names = ["John", "Jane", "Joseph"];
names.forEach(name => { doStuff(); doSomethingExtra(); // ... // ... // ... // 'name' makes sense now dispatch(name);
});Не добавляйте нежелательный контекст
Если класс или имя объекта говорит вам, что это такое, не включайте это в имя переменной.
// BAD
const Book = { bookName: "Programming with JavaScript", bookPublisher: "Penguin", bookColour: "Yellow"
}; function wrapBook(book) { book.bookColour = "Brown";
} // GOOD
const Book = { name: "Programming with JavaScript", publisher: "Penguin", colour: "Yellow"
}; function wrapBook(book) { book.colour = "Brown";
}Используйте аргументы по умолчанию
Вместо использования метода короткого замыкания мы предоставляем переменные по умолчанию для получения более чистого результата.
// BAD
function addEmployeeType(type){
const employeeType = type || "intern";
//............
} // GOOD
function addEmployeeType(type = "intern"){
//............
}Используйте строгие проверки типа
Используйте === вместо ==. Это поможет избежать всевозможных ненужных проблем в дальнейшем. Если код не обрабатывается должным образом, это может существенно повлиять на логику программы.
0 == false // true 0 === false // false 2 == "2" // true 2 === "2" // false
Функции
Используйте описательные имена, которые говорят сами за себя
Рассматривая функции, которые представляют определенное поведение, имя функции должно быть глаголом или фразой, полностью раскрывающими намерение, стоящее за ними, а также намерение аргументов. Их имя должно описывать, что они делают.
//BADfunction sMail(user){
//........
} //GOODfunction sendEmail(emailAddress){
//.........
}Минимум аргументов функции
В идеале вам следует избегать большого количества аргументов. Ограничение количества параметров функции поможет легче протестировать функцию.
Один или два аргумента — идеальный случай, и, если возможно, следует избегать создания трех. Что-то большее, чем это, должно быть консолидировано. Обычно, если у вас более двух аргументов, ваша функция пытается сделать слишком много. В тех случаях, когда это не так, как правило в качестве аргумента будет достаточно объекта более высокого уровня.
//BAD
function createMenu(title, body, buttonText, cancellable) { // ...
} createMenu("Foo", "Bar", "Baz", true); //GOOD
function createMenu({ title, body, buttonText, cancellable }) { // ...
} createMenu({ title: "Foo", body: "Bar", buttonText: "Baz", cancellable: true
});Функции должны делать только одно
Это одно из самых важных правил в разработке программного обеспечения. Когда ваша функция делает больше чем что-то одно, ее сложнее тестировать, составлять и понимать. Когда вы изолируете функцию только одним действием, ее можно легко реорганизовать, и ваш код будет читаться намного чище.
Функции должны делать одно действие. Они должны делать это хорошо. Они должны делать только это. — Роберт К. Мартин (дядя Боб)
//BAD
function notifyListeners(listeners) { listeners.forEach(listener => { const listenerRecord = database.lookup(listener); if (listenerRecord.isActive()) { notify(listener); } });
} //GOOD
function notifyActiveListeners(listeners) { listeners.filter(isListenerActive).forEach(notify);
} function isListenerActive(listener) { const listenerRecord = database.lookup(listener); return listenerRecord.isActive();
}Удалите дубликаты кода
Вы должны сделать все возможное, чтобы избегать дублирования кода. Вместо того, чтобы одно изменение влияло на все соответствующие модули, вы должны найти все дубликаты модулей и повторить это изменение.
Часто дублирование кода происходит из-за того, что два или более модулей имеют небольшие отличия, потому что у вас есть две или более слегка отличающиеся вещи, которые имеют много общего.
Небольшие различия приводят к созданию очень похожих модулей. Удаление дублированного кода означает создание абстракции, которая может обрабатывать этот набор разных вещей с помощью только одной функции / модуля / класса.
//BAD
function showDeveloperList(developers) { developers.forEach(developer => { const expectedSalary = developer.calculateExpectedSalary(); const experience = developer.getExperience(); const githubLink = developer.getGithubLink(); const data = { expectedSalary, experience, githubLink }; render(data); });
} function showManagerList(managers) { managers.forEach(manager => { const expectedSalary = manager.calculateExpectedSalary(); const experience = manager.getExperience(); const portfolio = manager.getMBAProjects(); const data = { expectedSalary, experience, portfolio }; render(data); });
} //GOOD
function showEmployeeList(employees) { employees.forEach(employee => { const expectedSalary = employee.calculateExpectedSalary(); const experience = employee.getExperience(); const data = { expectedSalary, experience }; switch (employee.type) { case "manager": data.portfolio = employee.getMBAProjects(); break; case "developer": data.githubLink = employee.getGithubLink(); break; } render(data); });
}Не загрязняйте глобалы
Загрязнение глобальных объектов является плохой практикой в JavaScript, поскольку вы можете столкнуться с другой библиотекой, и пользователь вашего API будет в неведении, пока не получит исключение в рабочей среде. Например, если вы хотите расширить нативный метод JavaScript Array, чтобы получить метод diff, который будет показывать разницу между двумя массивами. Вы можете написать свой метод Array.prototype, но он может конфликтовать с другой библиотекой, которая пыталась вызвать тот же метод diff для реализации другой функции.
Вот почему было бы намного лучше просто использовать классы ES2015 / ES6 и просто расширить глобальные Array.
//BAD
Array.prototype.diff = function diff(comparisonArray) { const hash = new Set(comparisonArray); return this.filter(elem => !hash.has(elem));
}; //GOOD
class SuperArray extends Array { diff(comparisonArray) { const hash = new Set(comparisonArray); return this.filter(elem => !hash.has(elem)); }
}Хотя это обширная тема, я ограничил ее только переменными и функциями, чтобы сделать пост коротким. Я включил лишь часть того, что вы можете сделать, чтобы написать чистый код.
Автор: Mahdhi Rezvi
Источник: https://blog.bitsrc.io
Редакция: Команда webformyself.