Хотел бы я знать об этих вредных привычках раньше.

За свои несколько лет работы я написал много дерьмового кода, и у меня есть в этом опыт.

Мои коллеги всегда считают мой код вонючим кодом, но я думаю, что они не ценят мое искусство…

1. Пишите код как можно больше в одну строку

О, Боже мой! Вы хотите, чтобы я был вашим коллегой?

Я удалил все cookies с веб-страницы всего одной строкой кода, разве это не здорово?

document.cookie.split(';').forEach(cookie => document.cookie = cookie.replace(/^ +/, '').replace(/=.*/, `=;expires=${new Date(0).toUTCString()};path=/`))

ой! Пожалуйста, прости меня! Совсем не читается, голова болит, может и стоит это сделать.

const cookies = document.cookie.split(';')

cookies.forEach(cookie => {
  cookie = cookie.replace(/^ +/, '') // 
  cookie = cookie.replace(/=.*/, `=;expires=${new Date(0).toUTCString()};path=/`)
  document.cookie = cookie
})

2. Вывести ошибку на консоль

У вас есть эта привычка кодирования? Просто сосредоточьтесь на успешном статусе запроса и игнорируйте неудачный запрос.

В целях отладки я всегда вывожу сообщение об ошибке на консоль.

try {
  fetch(url, {
    method: 'post',
    ...
  })
} catch (err) {
  // When the request goes wrong, we don't have any perception
  console.log(err)
}

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

try {
  fetch(url, {
    method: 'post',
    ...
  })
} catch (err) {
  Toast(err.message)
}

3. Использование магического числа

Я предполагаю, что вы видели это волшебное число много раз, что оно означает на самом деле?

Может быть, только его первый автор может понять это!

// index1.js
if (status === 1 || status === 2) {
  // ...
} else if (status === 3) {
  // ...
}

// index2.js
if (status === 1 || status === 2) {
  // ...
}

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

const STATUS = {
  // It is an adult and has real-name authentication
  adultRealName: 1,
  // It is a minor and has real-name authentication
  minorRealName: 2,
  // Not real-name authentication
  notRealName: 3,
  // ...
}

// index1.js
if ([ STATUS.adultRealName, STATUS.minorRealName ].includes(status)) {
  // ...
} else if (status === STATUS.notRealName) {
  // ...
}
// index2.js
if ([ STATUS.adultRealName, STATUS.minorRealName ].includes(status)) {
  // ...
}

4. Злоупотребление функциями обратного вызова

Это 2023 год, и мы не должны больше злоупотреблять обратными вызовами, это ужасный ад.

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

fetch('/a')
  .then((a) => {
    fetch('/b', { a })
      .then((b) => {
        fetch('/c', { b })
          .then((c) => {
            console.log(c)
          })
      })
  })

JavaScript предоставляет нам ключевое слово await, поэтому давайте упростим приведенный выше код.

const a = await fetch('/a')
const b = await fetch('/b', { a })
const c = await fetch('/c', { b })

console.log(c)

Вау, это делает наш код проще, его легче читать и поддерживать.

5. Установите 10 параметров функции

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

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

const getUser = (name, weight, mobile, gender, address, hobby, ...) => {
  // ...
  return ...
}

getUser('fatfish', 100, 183, ....)

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

const getUser = (options) => {
  const { name, weight, mobile, gender, address, hobby, ... } = options
  // ...
  return ...
}

getUser({
  name: 'fatfish',
  weight: 100,
  mobile: 183
  ...
})

6. Преобразуйте строку в число, используя знак +

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

const str = '123456'
const num = +str

console.log(num) // 123456

Но использование Number или parseInt должно быть более семантичным и понятным выбором. Потому что по ним видно, что наша цель — преобразовать в числа.

const str = '123456'
const num1 = Number(str)
const num3 = parseInt(str)

console.log({ num1, num2 }) // { "num1": 123456, "num2": 123456 }

7. Измените код непосредственно в node_modules.

Ух ты! Это должно быть очень возмутительно, я изменил код в node_modules напрямую, чтобы исправить проблему с третьим пакетом npm, потому что он был проигнорирован git, поэтому я был единственным, у кого была эта часть на моем компьютере.

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

// .gitignore
node_modules/
dist/
// ...

Окончание

Друзья мои, если у вас есть другие плохие упражнения по JavaScript, напишите их в комментариях, и я с нетерпением жду ваших уроков.

Дополнительные материалы на PlainEnglish.io.

Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .

Заинтересованы в масштабировании запуска вашего программного обеспечения? Ознакомьтесь с разделом Схема.