Чистый код JavaScript - быстрые рекомендации

Сделайте ваш код понятным для людей

Вступление

Если вы заботитесь о самом коде и о том, как он написан, а не беспокоитесь только о том, работает он или нет, вы можете сказать, что практикуете и заботитесь о чистом коде.

Профессиональный разработчик напишет код для будущего себя и для «другого парня», а не только для машины.

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

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

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

1. Проверки строгого типа

Используйте === вместо ==

2. Переменные

Назовите свои переменные таким образом, чтобы они раскрывали намерение, стоящее за этим.

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

Плохо 👎

Хорошо 👍

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

Плохо 👎

let nameValue;
let theProduct;

Хорошо 👍

let name;
let product;

Не заставляйте запоминать переменный контекст

Плохо 👎

Хорошо 👍

Не добавляйте ненужный контекст

Плохо 👎

Хорошо 👍

Используйте один и тот же словарь для одного и того же типа переменной

Плохо 👎

getUserInfo();
getClientData();
getCustomerRecord();

Хорошо 👍

getProduct();

3. Функции

Используйте длинные и описательные имена.

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

Их имя должно говорить о том, чем они занимаются.

Плохо 👎

function email(user) {
  // implementation
}

Хорошо 👍

function sendEmailUser(emailAddress) {
  // implementation
}

Избегайте длинных аргументов

В идеале функция должна иметь два или меньше аргументов.

Чем меньше аргументов, тем легче проверить функцию.

Плохо 👎

function getProducts(fields, fromDate, toDate) {
  // implementation
}

Хорошо 👍

Используйте аргументы по умолчанию вместо условных выражений

Плохо 👎

function createShape(type) {
  const shapeType = type || "circle";
  // ...
}

Хорошо 👍

function createShape(type = "circle") {
  // ...
}

Избегайте выполнения нескольких действий в рамках одной функции

Плохо 👎

Хорошо 👍

Используйте '`Object.assign’` , чтобы установить объекты по умолчанию

Плохо 👎

Хорошо 👍

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

Плохо 👎

Хорошо 👍

Не загрязняйте глобалы

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

Плохо 👎

Array.prototype.myFunction = function myFunction() {
  // implementation
};

Хорошо 👍

class SuperArray extends Array {
  myFunc() {
    // implementation
  }
}

4. Условные выражения

Избегайте отрицательных условных выражений.

Плохо 👎

function isPostNotPublished(post) {
  // implementation
}
if (!isPostNotPublished(post)) {
  // implementation
}

Хорошо 👍

function isPostPublished(user) {
  // implementation
}
if (isPostPublished(user)) {
  // implementation
}

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

Это может быть тривиально, но о нем стоит упомянуть.

Используйте этот подход только для логических значений и если вы уверены, что значение не будет undefined или null.

Плохо 👎

if (isValid === true) {
  // do something...
}
if (isValid === false) {
  // do something...
}

Хорошо 👍

if (isValid) {
  // do something...
}
if (!isValid) {
  // do something...
}

По возможности избегайте условных выражений

Вместо этого используйте полиморфизм и наследование.

Плохо 👎

Хорошо 👍

5. Классы ES

Классы - это новый синтаксический сахар в JavaScript.

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

Плохо 👎

Хорошо 👍

Использовать цепочку методов

Многие библиотеки, такие как jQuery и Lodash, используют этот шаблон.

В результате ваш код будет менее подробным.

В вашем классе просто возвращайте this в конце каждой функции, и вы можете связать с ним дополнительные методы класса.

Плохо 👎

Хорошо 👍

6. Избегайте использования Eval

Функция Eval позволяет нам передать строку компилятору JavaScript и выполнить ее как JavaScript.

Проще говоря, все, что вы передаете во время выполнения, выполняется так, как если бы оно было добавлено во время разработки.

eval("alert('Hi');");

Появится всплывающее окно с сообщением «Привет».

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

7. Используйте JSLint.

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

Вы можете использовать другие сайты, такие как JavaScriptLint.com, или вы можете использовать один из множества загружаемых инструментов JSLint.

Например, Visual Studio имеет надстройку для JSLint, которая позволит вам проверять наличие ошибок во время компиляции (или вручную).

Это сделает ваш код чище и поможет предотвратить появление этих надоедливых ошибок в рабочей среде.

8. Избегайте вообще

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

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

А насчет мертвого кода, ну, это то, что говорит его название.

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

Вам следует выполнить поиск этих частей в своей кодовой базе и удалить все ненужные функции и блоки кода.

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

Заключение

Это лишь часть того, что вы можете сделать для улучшения своего кода.

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

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

Возможно, в начале проекта код аккуратный и чистый, но когда дело доходит до соблюдения сроков, принципы часто игнорируются и переносятся в «TODO» или раздел РЕФАКТОР.

Спасибо за внимание и до встречи в следующей статье!

Чистый код JavaScript - быстрые рекомендации