7 способов аккуратно

JavaScript спецификация кода
7 способов аккуратно

Оригинальный адрес:Очистите свой код, применив эти 7 правил ⚡️

Оригинальный автор:Joachim Zeelmaekers

Переводчик и корректор: HelloGitHub-Xiaoyu и HelloGitHub-Duck

Читаемый код можно поддерживать

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

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

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

удалятьненужныйкомментарии к коду

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

Не поймите неправильно. Я не фанат комментариев к коду или JavaScript JSdoc, и в основном я не могу их использовать без них.

Мне не нужны комментарии, чтобы объяснить эту функцию, которая берет массивы X и объединяет их в новый массив.

function mergeArrays(...arrays) {
  let mergedArray = []

  arrays.forEach(array => {
      mergedArray = [...mergedArray, ...array]
  })

  return mergedArray
}

Как и в примере кода, добавление документации не улучшает читабельность. Я хочу, чтобы члены команды знали, что такое оператор спреда. Если они не знают, они должны спросить меня во время проверки кода.

Конечно, не будем забывать и о закомментированных блоках кода. Если мы забудем, здесь есть только одно решение:удалить код. Зачем оставлять это в комментариях, когда классный гит может проверить старый код?

Пожалуйста, перестаньте превращать свою кодовую базу в свалку.

Обратите внимание на название

Если вы видите имя функции Mergearrays, следует ясно, что это функция, которая сочетает в себе X-массивы в новый массив.

Я знаю, что назвать сложно. Чем сложнее функция, тем сложнее ее назвать... У меня есть способ упростить ее, например: функция, которая объединяет два массива и создает новый список уникальных чисел. Как бы вы назвали это? Это так?

function mergeNumberListIntoUniqueList(listOne, listTwo) {
  return [...new Set([...listOne, ...listTwo])]
}

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

function mergeLists(listOne, listTwo) {
  return [...listOne, ...listTwo]
}

function createUniqueList(list) {
  return [...new Set(list)]
}

Конечно, легко создать красивую строку кода, не вызывая новую функцию. Но иногда одна строка кода не очень читабельна.

Если заявление

Я не могу назвать этот вопрос... Смотрите! Трудно назвать...

Но я часто это вижу.

вопрос

if(value === 'duck' || value === 'dog' || value === 'cat') {
  // ...
}

Решение

const options = ['duck', 'dog', 'cat'];
if (options.includes(value)) {
  // ...
}

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

Если опция содержит значение, то ...

механизм раннего выхода

Есть много способов назвать это руководство, но я выбрал название «Ранний выход».

Позвольте мне увидеть кусок кода для вас. Я верю, что вы видели это.

function handleEvent(event) {
  if (event) {
    const target = event.target;
    if (target) {
      // Your awesome piece of code that uses target
    }
  }
}

Давайте проверим объектeventверно, а свойстваtargetэто можно использовать или нет. Проблема в том, что мы использовали два приведенных выше кодаifутверждение.

Давайте посмотрим, как здесь реализовать «ранний выход».

function handleEvent(event) {
  if (!event || !event.target) {
    return;
  }
  // Your awesome piece of code that uses target
}

С «ранним выходом» здесь вы можете проверить,eventа такжеevent.targetТоже не ложный. Очевидно, мы убеждены, что это событиеevent.targetНе ложно. Потому что, если это утверждение ложно, программа не будет выполнять другой код.

присваивание деструктуризации

В JavaScript мы можем деструктурировать данные и объекты.

согласно сdeveloper.mozilla.orgдокументы на ,解构赋值语法是一种 JavaScript 表达式。通过解构赋值,可以将值从数组、属性从对象中取出,赋值给其他变量.

Некоторые примеры кода

// Destructuring an object
const numbers = {one: 1, two: 2};
const {one, two} = numbers;
console.log(one); // 1
console.log(two); // 2

// Destructuring an array
const numbers = [1, 2, 3, 4, 5];
const [one, two] = numbers;
console.log(one); // 1
console.log(two); // 2

Проблема с деструктурированием заключается в том, что иногда оно создает плохое имя для свойства. Лучший пример — получение данных из API и получение объекта ответа со свойством данных.

const url = "http://localhost:8080/api/v1/organizers/1"
const response = await axios.get(url)
const {name} = response.data

В этом примере кода показано, что вы получаете органайзер с идентификатором 1. У объекта-органайзера есть имя, и вы можете деструктурировать его. В этом нет ничего плохого.

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

Этих проблем можно избежать, переименовав свойства.

const url = "http://localhost:8080/api/v1/organizers/1"
const response = await axios.get(url)
const {name: organizerName} = response.data

Этот код становится более читаемым. Всем известно, что переменная — это имя органайзера.

Скаутские правила

Вы когда-нибудь слышали поговорку: «Всегда держите кемпинг, который вы покидаете, в более чистом виде, чем когда вы его нашли»?

Таковы правила бойскаутов. Сделайте код лучше, чем он был, когда он был обнаружен. Вы заметили запах кода? Рефакторинг! Вы нашли неиспользуемую переменную? удалите это!

Мне нравится сравнивать правила бойскаута с уборкой комнаты. Представьте, что все в вашей семье кладут посуду в раковину, весь мусор в прихожую и все белье в ванную. Но каждое воскресенье приходится тратить более 4 часов на уборку всего дома. Вам понравится?

Я уверен, что ответ нет. Так что, если все очистит небольшие части комнаты сразу, в воскресенье будет меньше работы.

Та же база кода. Если каждый небольшой запах кода пахнуть запахом кода остался в кодовой основе, никто не удаляет неиспользуемые переменные, Linter будет сумасшедшим, и есть около 77 предупреждений. А база кода будет иметь много уборки, которые необходимо выполнить, но если все предполагают их обязанности и соблюдают закон бойскаутов, многие проблемы будут решены.

стиль кода

Не менее важно определить стиль кода внутри команды.

Мне все равно, предпочитаете ли вы одиночные или двойные кавычки, пробелы или вкладки или без комиссионных запятых. Выберите стиль и придерживаться этого. Вы можете сделать это с Linter или Cretier.

Существует множество инструментов для решения проблем со стилем кода. Мой любимый использоватьHuskyХук перед фиксацией.PrettierДокументы также имеют страницу о предварительных крюках.

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

резюме

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

Если вы хотите узнать больше о чистом коде, попробуйте прочитать «Чистый код» Роберта Мартина.

Наконец, вы можете присоединиться к серии HelloGitHub «Перевод и танец» и дать волю своим талантам! Делитесь отличными статьями с большим количеством людей. Требовать:

  • Обычно просматривайте GitHub, открытый исходный код, программирование, программисты и другие новости и статьи на английском языке.
  • Я хочу поделиться отличными английскими статьями, которые я читаю с большим количеством людей
  • Перевод точный, но не является прямым переводом или машинным переводом
  • Гарантированно перевести или исправить не менее 1 качественной статьи в месяц
  • Понимание уценки и типографики
  • свяжитесь со мной (примечание: переведено и с этой платформы)

Изображение на обложке через Unsplash Кевина Ку