Рубрики
Без рубрики

Руководство младшего разработчика для написания супер чистого и читаемого кода

Запись кода – это одно, но написание чистого чистота, читаемый код – это другое. Но что такое «чистый код?» Я создал этот короткий чистый код для начинающих руководств, чтобы помочь вам на пути к освоению и пониманию искусства чистого кода. Представьте, что вы читаете статью. Там’

Автор оригинала: FreeCodeCamp Community Member.

Запись кода – это одно, но написание чистого чистота, читаемый код – это другое. Но что такое «чистый код?» Я создал этот короткий Чистый код для начинающих Guide Чтобы помочь вам на пути к освоению и пониманию искусства чистого кода.

Представьте, что вы читаете статью. Там есть параграф, который дает вам краткий обзор того, о чем в статье. Есть заголовки, каждый с кучей абзацев. Параграфы структурированы с соответствующими битами информации, сгруппированными вместе и приказали таким образом, чтобы статью «течь» и читает хорошо.

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

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

  1. Чистый код сосредоточен – каждая функция, каждый класс и модуль должен сделать одну вещь и делать это хорошо.
  2. Это должно быть элегантным – чистый код должен быть простой читать. Чтение Это должно заставить вас улыбаться. Это должно оставить вас задуматься: «Я точно знаю, что делает этот код»
  3. Чистый код заботится о. Кто-то занял время, чтобы держать его простым и упорядоченным. Они уделили соответствующее внимание деталям. Они заботились.
  4. Тесты должны проходить – сломанный код не чистый!

На большой вопрос дня – как вы на самом деле пишу чистый код как младший разработчик? Вот мои лучшие советы, чтобы начать.

Используйте согласованные форматирование и отступ

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

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

Добро

function getStudents(id) { 
     if (id !== null) { 
        go_and_get_the_student(); 
     } else { 
        abort_mission(); 
     } 
}
  • На первый взгляд вы можете сказать, что есть Если/else Заявление в рамках функции
  • Брекеты и постоянные отступы позволяют легко увидеть, где код блоков и заканчивается
  • Брекеты являются последовательными – обратите внимание, как открывающая скобка для Функция и для Если находятся на одной линии

Плохо

function getStudents(id) {
if (id !== null) {
go_and_get_the_student();} 
    else 
    {
        abort_mission();
    }
    }

Вуа! Так много неправильно здесь.

  • Отступ повсюду – вы не можете сказать, где функция заканчивается, или где Если/else Блок запускается (да, есть ли, если/else Block там!)
  • Брекеты запутаны и не являются последовательными
  • Интервал между линией несовместимо

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

Хорошая новость заключается в том, что есть много плагинов IDE, которые вы можете использовать для автоматического формата кода для вас. Аллилуйя!

Используйте четкие переменные и имена методов

В начале я говорил о том, как важно, чтобы ваш код легко читать. Большой аспект этого – это название, которое вы выбираете (это одно из ошибок , которые я сделал, когда я был младшим разработчиком ). Давайте посмотрим на пример хорошего имена:

function changeStudentLabelText(studentId){                  
     const studentNameLabel = getStudentName(studentId); 
}
function getStudentName(studentId){ 
     const student = api.getStudentById(studentId); 
     return student.name; 
}

Этот фрагмент кода хорош для ряда способов:

  • Функции четко называются хорошо называемыми аргументами. Когда разработчик читает это, в их разуме ясно, «если я позвоню» getStudentname () Метод с StudentiD , я получу имя студента «- им не нужно ориентироваться к getstudentname () Метод, если им не нужно!
  • В пределах getstudentname () Метод, переменные и вызовы методов снова четко называются – легко увидеть, что метод вызовет API , получить Студент объект и возвращает Имя имущество. Легкий!

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

  • Выберите стиль именования и быть последовательным. Либо камера или under_scores Но не оба!
  • Назовите вашу функцию, методы и переменные тем, что делает то, что делает то, или что такая вещь. Если ваш метод получить что-то, положить получить во имя. Если ваша переменная магазины Цвет автомобиля, назовите это Carcolour , Например.

Бонусный совет – Если вы не можете назвать свою функцию или метод, то эта функция делает слишком много. Продолжай и сломайте его на меньшие функции! E.G Если вы получите вызов вашей функции UpdateCarandsave () Создать 2 метода UpdateCar () и Savecar () Отказ

Используйте комментарии, где это необходимо

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

Комментарии документации – это комментарии, которые описывают, что делает конкретную функцию или класс. Если вы пишете библиотеку, это будет полезно для разработчиков, которые используют вашу библиотеку. Вот пример из usejsdoc:

/** * Solves equations of the form a * x = b 
* @example * 
// returns 2 * globalNS.method1(5, 10); 
* @example * 
// returns 3 * globalNS.method(5, 15); 
* @returns {Number} Returns the value of x for the equation. */ globalNS.method1 = function (a, b) { return b / a; };

Уточнение комментариев предназначено для всех (включая ваше будущее Я), который может потребоваться сохранить, рефакторировать или расширить свой код. Чаще всего можно избежать разъяснений комментариев в пользу «самодокуменного кода». Вот пример разъяснения комментария:

/* This function calls a third party API. Due to some issue with the API vender, the response returns "BAD REQUEST" at times. If it does, we need to retry */ 
function getImageLinks(){ 
     const imageLinks = makeApiCall(); 
     if(imageLinks === null){ 
        retryApiCall(); 
     } else { 
        doSomeOtherStuff(); 
     } 
}

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

Избыточные комментарии, которые не добавляют значение:

// this sets the students age 
function setStudentAge();

Вводящие в заблуждение комментарии:

//this sets the fullname of the student 
function setLastName();

Смешные или оскорбительные комментарии:

// this method is 5000 lines long but it's impossible to refactor so don't try 
function reallyLongFunction();

Помните сухое принцип (не повторяйте себя)

Сухой принцип указан как:

На самом простом уровне это в основном означает, что вы должны стремиться снизить количество дублированного кода, который существует. (Обратите внимание, что я сказал: « Уменьшить» И не «Устранить» – Есть несколько случаев, когда дублированный код не является концом мира!)

Дублированный код может быть кошмаром для поддержания и изменения. Давайте посмотрим на пример:

function addEmployee(){ 
    // create the user object and give the role
    const user = {
        firstName: 'Rory',
        lastName: 'Millar',
        role: 'Admin'
    }
    
    // add the new user to the database - and log out the response or error
    axios.post('/user', user)
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });
}

function addManager(){  
    // create the user object and give the role
    const user = {
        firstName: 'James',
        lastName: 'Marley',
        role: 'Admin'
    }
    // add the new user to the database - and log out the response or error
    axios.post('/user', user)
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });
}

function addAdmin(){    
    // create the user object and give the role
    const user = {
        firstName: 'Gary',
        lastName: 'Judge',
        role: 'Admin'
    }
    
    // add the new user to the database - and log out the response or error
    axios.post('/user', user)
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });
}

Представьте себе, что вы создаете веб-приложение для персонала для клиента. Это приложение позволяет администраторам добавлять пользователей ролями в базу данных через API. Есть 3 роля; Сотрудник, менеджер и админ. Давайте посмотрим на некоторые функции, которые могут существовать:

Прохладный! Код работает, и все хорошо в мире. Через некоторое время наш клиент приходит и говорит:

Поэтому, прежде чем мы прыгаем и начните кодировать, давайте вернемся. Помните в начале этого чистого кода для начинающих статьи, когда я сказал «Чистый код должен быть сосредоточен». I.e, Сделай одну вещь и сделай это хорошо? Здесь наш текущий код имеет небольшую проблему. Код, который делает вызов API и обрабатывает ошибку, повторяется, что означает, что мы должны изменить код в 3 места для удовлетворения новых требований. Раздражающий!

Итак, что если мы увековерили это на быть более сосредоточенным ? Посмотрите на следующее:

function addEmployee(){ 
    // create the user object and give the role
    const user = {
        firstName: 'Rory',
        lastName: 'Millar',
        role: 'Admin'
    }
    
    // add the new user to the database - and log out the response or error
    saveUserToDatabase(user);
}

function addManager(){  
    // create the user object and give the role
    const user = {
        firstName: 'James',
        lastName: 'Marley',
        role: 'Admin'
    }
    // add the new user to the database - and log out the response or error
    saveUserToDatabase(user);
}

function addAdmin(){    
    // create the user object and give the role
    const user = {
        firstName: 'Gary',
        lastName: 'Judge',
        role: 'Admin'
    }
    
    // add the new user to the database - and log out the response or error
    saveUserToDatabase(user);
}

function saveUserToDatabase(user){
    axios.post('/users', user)
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log("there was an error " + error);
  });
}

Мы переместили логику, которая создает вызов API в собственный метод SaveUserTodatabase (пользователь) (Это хорошее имя? Вы решаете!) Какие другие методы позвоню Чтобы сохранить пользователя. Теперь, если нам нужно снова изменить логику API, нам нужно только обновить 1 метод. Аналогично, если мы должны добавить другой метод, который создает пользователей, метод сохранения пользователя в базу данных через API уже существует. Ура!

Пример рефакторинга, используя то, что мы узнали до сих пор

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

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

function addNumbers(number1, number2)
{
    const result = number1 + number2;
        const output = 'The result is ' + result;
        console.log(output);
}

// this function substracts 2 numbers
function substractNumbers(number1, number2){
    
    //store the result in a variable called result
    const result = number1 - number2;
    const output = 'The result is ' + result;
    console.log(output);
}

function doStuffWithNumbers(number1, number2){
    const result = number1 * number2;
    const output = 'The result is ' + result;
    console.log(output);
}

function divideNumbers(x, y){
    const result = number1 / number2;
    const output = 'The result is ' + result;
    console.log(output);
}

Каковы проблемы?

  • Отступ несовместим – это не имеет большого значения, какой формат отступа мы используем, так же, как это согласуется
  • 2-я функция имеет некоторые избыточные комментарии – мы можем сказать, что происходит, чтение имени функции и код внутри функции, поэтому нам действительно нужен комментарий здесь?
  • 3-й и 4-й функции не используют хорошее название – Достофвитнурники () Разве не лучшее имя функции, так как он не говорит, что это делает. (х, у) не описательные переменные тоже – это X & Y Функции? Числа? Бананы?
  • Методы делать больше, чем одна вещь – Выполняет расчет, но также отображает выход. Мы можем разделить Дисплей Логика на отдельный метод – согласно Сухой принцип

Теперь мы будем использовать то, что мы узнали в этом чистом коде для начинающих руководств по рефакторе все, чтобы наш новый код выглядел:

function addNumbers(number1, number2){
	const result = number1 + number2;
	displayOutput(result)
}

function substractNumbers(number1, number2){
	const result = number1 - number2;
	displayOutput(result)
}

function multiplyNumbers(number1, number2){
	const result = number1 * number2;
	displayOutput(result)
}

function divideNumbers(number1, number2){
	const result = number1 * number2;
	displayOutput(result)
}

function displayOutput(result){
	const output = 'The result is ' + result;
	console.log(output);
}
  • Мы исправили отступ, чтобы это соответствовало
  • Скорректировано именование функций и переменных
  • Убрал ненужные комментарии
  • Переместил DisplayOutput () логика в свой собственный метод – если вывод должен изменить, нам нужно только изменить его одно место

Поздравляю! Теперь вы можете поговорить о том, как вы знаете принципы чистого кода в интервью и когда написание вашего убийцы резюме !

Не «за чистый» ваш код

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

Будьте внимательны к чистому коду, но не переверните его на ранних этапах ваших проектов. Убедитесь, что ваш код работает, и хорошо проверен. Во время этапа рефакторинга – это когда вы действительно должны подумать о том, как убирать код с использованием сухого принципа и т. Д.

В этом чистом коде для начинающих руководства мы узнали, как:

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

Если вам понравилось это руководство, обязательно проверим Чистый код: Справочник Agile программного обеспечения мастерство Роберт С Мартином Отказ Если вы серьезно относитесь к написанию чистого кода и вырвалось из младшего уровня разработчика, я настоятельно рекомендую эту книгу.

Спасибо за прочтение!

Чтобы получить последние руководства и курсы для младших разработчиков прямо в свой почтовый ящик, обязательно присоединитесь к списку рассылки на www.chrisblakely.dev !

Читайте ещё по теме: