Лучший способ создать читаемый, понятный и поддерживаемый код - Часть 1

вступление

Вы когда-нибудь испытывали трудности с чтением чужого кода? или даже понять это? а может, в вашем случае это ваш собственный код ?! 😓

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

Тогда как мы можем добиться более чистого кода? Что ж, в этой статье мы поговорим о 10 советах по чистому коду для JavaScript и CSS. так что, без дальнейших выплат, приступим! 😉

Обзор

JavaScript

  • Значимые имена
  • Функции
  • Комментарии
  • Форматирование
  • Обработка ошибок

CSS

  • Часть 2

Часть 1. Чистый код JavaScript

Значимые имена

  1. Используйте имена, раскрывающие намерение

2. Избегайте дезинформации

3. Используйте имена с возможностью поиска.

4. Избегайте ментального картирования

5. Не будь милым

Функции

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

2. Один уровень абстракции для каждой функции

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

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

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

4. Функциональные аргументы

Идеальное количество аргументов для функции - ноль (ниладическое). Далее идет один (монадический), за которым следуют два (диадические). По возможности следует избегать трех аргументов (триадных). Более трех (полиадических) требует особого обоснования - и их в любом случае не следует использовать.

  • Пометить аргументы
  • Объекты аргументов

5. СУХОЙ! (Не повторяйся)

Комментарии

  1. Объясни себя в коде

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

2. Хорошие комментарии

  • Юридический
  • Информативный
    комментарий может быть просто информативным. особенно если вы хотите, чтобы читатель получил такое же восприятие того, что вы пишете
  • Объяснение намерения
    иногда комментарий может быть больше, чем просто информативным. вы можете написать комментарий, когда вам действительно нужно выразить намерение, стоящее за решением.
  • TODO Комментарии

3. Плохие комментарии

  • Избыточный
    чтение комментария занимает больше времени, чем чтение кода 😂
  • Журнал
    вы забыли использовать GIT? 😹
  • Шум
    зачем говорить очевидную вещь?
  • Маркеры положения
    нет, только не так. В самом деле.

Форматирование

Форматирование - это одна из тех вещей, о которых, возможно (только возможно), знают не все разработчики / инженеры. большинство из них (включая меня 😅) больше внимания уделяли результату, и пока он работает, мы не обращаем внимания на форматирование и просто переходим к следующему шагу.

ну, если честно, это абсолютно плохо, поскольку код, который вы пишете прямо сейчас, когда-нибудь будет прочитан другими и, конечно же, с другими привычками / стилем письма. итак .. как решить такую ​​«проблему» в будущем? Что ж, нам лучше иметь хотя бы одно руководство по стилю кодирования. это помогает нам / другим поддерживать код с лучшей видимостью в будущем.

Говоря о форматировании, существует тонны руководства по форматам кодирования / стилям. и все еще есть разные точки зрения друг на друга. поэтому вместо того, чтобы спорить о том, что правильно / лучше, давайте возьмем и воспользуемся тем, что лучше для вас. в этом разделе я не буду помещать все руководство по стилю для javascript, но я помещу большую часть базового и общего руководства по стилю, которое, как мне кажется, вам необходимо знать. давай проверим!

  1. Операторы сравнения и равенство
  • Используйте === и !== вместо == и !=

2. Блоки

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

3. Комментарии

  • Используйте /** ... */ для многострочных комментариев
  • Используйте // для однострочных комментариев. Поместите однострочные комментарии на новую строку над темой комментария. Поместите пустую строку перед комментарием, если он не находится в первой строке блока.
  • Начинайте все комментарии с пробела, чтобы их было легче читать

4. Пробелы

  • Используйте мягкие табуляции (пробел), равные 2 пробелам
  • Поставьте 1 пробел перед ведущей скобкой
  • Поместите 1 пробел перед открывающей скобкой в ​​управляющих операторах (if, while и т. Д.). Не оставляйте пробелов между списком аргументов и именем функции в вызовах и объявлениях функций.
  • Выделите операторы пробелами

5. Запятые.

  • Запятые в начале

6. Точка с запятой
серьезно? давай, просто используй ; 😐

7. Соглашения об именах

  • Используйте camelCase при именовании объектов, функций и экземпляров
  • Используйте PascalCase при именовании конструкторов или классов

Несколько слов о руководстве по стилю

Что ж ... есть еще много правил / руководств по стилям JavaScript, которые не упомянуты в этой статье. Если вы хотите знать больше, чем основы, описанные выше, просто найдите ссылку от Airbnb в конце этой статьи :)

ps: вы можете обнаружить, что в приведенном выше примере я также делаю много «не очень форматирования», просто игнорируйте это 😝. но, по крайней мере, теперь вы это поняли: D

Обработка ошибок

1. Сначала напишите заявление "Try-Catch-finally"
иногда мы забываем, что есть еще один способ обработки ошибки, помимо использования if-else, особенно когда мы знаем, что существует возможность неожиданной ошибки времени выполнения в функции, но нам все равно нужно продолжать запускать следующую функцию

Все еще не понимаете? Вы можете проверить это: Вопрос по JavaScript: что использовать: try catch или if Conditional? 😄

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

Завершение первой части

Наконец-то! это конец чистого кода, часть 1 (JavaScript).

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

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

Еще есть кофе? перейдем к Части 2 (CSS)!

использованная литература