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

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

Что такое анти-шаблон?

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

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

Обратите внимание, что мы не можем указать здесь на все антипаттерны JS, потому что они действительно основаны на вас и на том, насколько вы плохой и не исследовательский парень. В вашей кодовой базе будет расти количество антишаблонов, если вы недостаточно хорошо исследуете. :)

1. Циклы JavaScript

Я могу с уверенностью сказать, что самый распространенный анти-шаблон, который мы использовали в наших кодах, связан с вещами, связанными с циклами, и неправильным выбором for…of, forEach и карты.

Начнем с ужасного использования карты JS:

[1,2,3].map(i => console.log(`Logged to console ${i} times`))
// log
Logged to console 1 times
Logged to console 2 times
Logged to console 3 times

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

Карта JavaScript — это метод массива, предназначенный для перебора массива и возврата массива в качестве вывода и результата вам! согласно описанию MDN, `Метод map() создает новый массив, заполненный результатами вызова предоставленной функции для каждого элемента в вызывающем массиве.`, поэтому это означает, что когда вы хотите иметь массив в качестве вывода вы можете использовать этот метод, как в приведенном ниже примере:

const myArray = [1, 4, 9, 16];
const myMap = myArray.map(x => x * 2);
console.log(myMap);
// expected output: Array [2, 8, 18, 32]

Итак, какова схема входа в консоль 5 раз? Когда вы думаете об этом и вспоминаете метод или HOF, который вы запомнили и использовали ранее в своем коде, просто найдите и прочитайте документацию на официальном сайте и посмотрите, какова цель этого метода и как вы можете использовать его в своем коде. лучше всего, например, мы можем просто войти в консоль с помощью for…of в JavaScript

for (let step = 0; step < 3; step++) {
  // Runs 3 times
  console.log(`Logged to console ${step + 1} times`)
}
// log
Logged to console 1 times
Logged to console 2 times
Logged to console 3 times

2. const, var и пусть

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

В отличие от цикла, этот предмет легче изучить и адаптировать к лучшим практикам.

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

{ 
   var greeting= "Hello" 
}
console.log(greeting);
// log
Hello !!!!!!!!

Так что делать? Просто используйте здесь ключевые слова с блочной областью действия, такие как const и let.

{ 
   let greeting= "Hello" 
}
console.log(greeting);
// log
Uncaught ReferenceError: greetings is not defined

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

// Correct
const THIS_VARIABLE_WILL_NOT_CHANGE = "JS is not weird";
// Wrong
let THIS_VARIABLE_WILL_NOT_CHANGE = "JS is not weird";

3. Unnecessary nesting

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

То, что может сделать ваш код спагетти и антипаттерном, заключается в использовании множества вложенных шагов в разделе Promises. Позвольте мне показать вам это на примере:

// Bad example! Spot 3 mistakes!

doSomething()
  .then(function (result) {
    // Forgot to return promise from inner chain
    // unnecessary nesting
    doSomethingElse(result)
      .then((newResult) => doThirdThing(newResult));
  })
  .then(() => doFourthThing());
// Forgot to terminate chain with a catch!

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

doSomething()
  .then(function (result) {
    return doSomethingElse(result);
  })
  .then((/* result ignored */) => doFourthThing())
  .catch((error) => console.error(error));

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

Другие ненужные вложенные вещи обычно случаются, когда вы забываете return и break в JavaScript!

function is_old_aged(age) {
  if (age) {
     if (age > 60) { 
      return 'old' 
     } else {
      return 'young'
     };
  }
}

Я ненавижу эти условия вложенных уровней, потому что ваш код будет жалким после еще 2 уровней вложенных условий, и никто не сможет точно прочитать ваш код, но что делать?

function is_old_aged(age) {
  if (!age) {
     return false;
  }
  return age > 60 ? 'old' : 'young'
}

Намного чище, не так ли?

Подведение итогов

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

Подробнее обо всех функциях и методах JavaScript можно прочитать на официальном сайте MDN.

Другие мои статьи вы можете прочитать по ссылкам ниже:

Ускорение JS:



Как я делаю свои приложения JavaScript в 2 раза быстрее
В этой статье мы кратко рассмотрим приемы, которые можно использовать для максимально быстрого создания веб-приложения. .javascript.plainenglish.io



Основные веб-жизненные показатели:



Основные веб-жизненные показатели и повышение скорости вашего веб-сайта!
В этой статье мы кратко рассмотрим веб-жизненные показатели и используем их для повышения производительности нашего веб-приложенияjavascript.plainenglish.io



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