5 вредных привычек кодирования в JS, сколько вы знаете?

Автор: Дмитрий Павлютин

Переводчик: Front-end Xiaozhi

Источник: дмитрипавлутин

Вы когда-нибудь чувствовали себя так, читая код JavaScript?

• Вы едва понимаете, что делает код?

• Код использует много приемов JavaScript?

• Слишком произвольный стиль именования и кодирования?

Все это признаки плохих привычек кодирования.

В этом посте я описываю 5 распространенных вредных привычек кодирования в JavaScript. Важно отметить, что эта статья даст несколько практических советов, как избавиться от этих привычек.

1. Не используйте неявные преобразования типов

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

большинство операторов+ - * / ==(без учета===) Неявное преобразование выполняется при обработке различных типов операндов.

утверждениеif（condition）{...},while（condition）{...}Неявно преобразует условие в логическое значение.

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

console.log("2" + "1");  // => "21"
console.log("2" - "1");  // => 1

console.log('' == 0);    // => true

console.log(true == []); // -> false
console.log(true == ![]); // -> false

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

Теперь давайте реализуем функцию для получения свойств объекта. Если свойство не существует, функция возвращает значение по умолчанию.

function getProp(object, propertyName, defaultValue) {
  if (!object[propertyName]) {
    return defaultValue;
  }
  return object[propertyName];
}

const hero = {
  name: 'Batman',
  isVillian: false
};

console.log(getProp(hero, 'name', 'Unknown'));     // => 'Batman'

getProp()читатьnameстоимость имущества, т.'Batman'.

затем попробуйте получить доступisVillianАтрибуты:

console.log(getProp(hero, 'isVillian', true)); // => true

Это ошибка. Несмотря на тоheroсвойстваisVillianзаfalse, функцияgetProp()также возвращает ошибкуtrue.

Это связано с тем, что проверка существования свойства зависит отif（！object [propertyName]）{...}Неявно преобразованное логическое значение.

Эти ошибки трудно обнаружить, чтобы исправить функцию, явно проверьте тип значения:

function getPropFixed(object, propertyName, defaultValue) {
   if (object[propertyName] === undefined) {
     return defaultValue;
   }
   return object[propertyName];
}

const hero = {
  name: 'Batman',
  isVillian: false
};

console.log(getPropFixed(hero, 'isVillian', true)); // => false

object[propertyName] === undefinedТочно проверьте, что свойствоundefined.

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

function getPropFixedBetter(object, propertyName, defaultValue) {
  if (!(propertyName in object)) {
    return defaultValue;
  }
  return object[propertyName]
}

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

Список лучших практик:

• Всегда используйте операторы строгого равенства===Сравнивать

• Не используйте свободный оператор равенства==

• оператор сложенияoperand1 + operand2: Оба операнда должны быть числами или строками.

• арифметические операторы- * /％**: Оба операнда должны быть числами

• if（condition）{...},while（condition）{...}Эквивалентное заявление:conditionДолжно быть логическое значение

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

2. Не используйте ранние приемы JavaScript

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

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

Типичный пример — посмотреть, содержит ли массив определенный элемент. я никогда не люблю использоватьarray.indexOf（item）！== -1Проверять.

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

Доступно в ES6array.includes(item)заменитьarray.indexOf(item) !== -1

3. Не загрязняйте область действия функции

До ES2015 вы, вероятно, привыкли объявлять все переменные в области видимости функции.

Давайте посмотрим пример:

function someFunc(array) {
  var index, item, length = array.length;
  /*
   * Lots of code
   */
  for (index = 0; index < length; index++) {
    item = array[index];
    // Use `item`
  }
  return someResult;
}

Переменнаяindex、itemиlengthв объеме функций. Но эти переменные влияют на область действия функции, потому что они находятся только вfor()Требуется только в области блока.

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

function someFunc(array) {
  /*
   * Lots of code
   */
  const length = array.length;
  for (let index = 0; index < length; index++) {
    const item = array[index];
    // Use `item`
  }
  return someResult;
}

indexиitemПеременные ограниченыfor()Объем блока цикла. длина перемещается ближе к тому месту, где она используется.

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

Определение переменных в используемой области блока

если область блока

// 不好
let message;
// ...
if (notFound) {
  message = 'Item not found';
  // Use `message`
}

// 好
if (notFound) {
  const message = 'Item not found';
  // Use `message`
}

для области блока

// 不好
let item;
for (item of array) {
  // Use `item`
}

// 好
for (const item of array) {
  // Use `item`
}

4. Старайтесь избегать undefined и null

Неназначенные переменные по умолчанию назначаютсяundefined. Например

let count;
console.log(count); // => undefined

const hero = {
  name: 'Batman'
};
console.log(hero.city); // => undefined

countПеременная была определена, но не инициализирована значением. JavaScript неявно присваивает емуundefined.

получить доступ к несуществующему свойствуhero.city, также возвращаетundefined.

Зачем использовать напрямуюundefinedЭто плохая привычка? потому что сundefinedПри сравнении вы имеете дело с переменными в неинициализированном состоянии.

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

JS предлагает многое, чтобы избежать иundefinedспособ сравнить.

Проверить, существует ли свойство

// 不好
const object = {
  prop: 'value'
};
if (object.nonExistingProp === undefined) {
  // ...
}

// 好
const object = {
  prop: 'value'
};
if ('nonExistingProp' in object) {
  // ...
}

свойства объектов по умолчанию

// 不好
function foo(options) {
  if (object.optionalProp1 === undefined) {
    object.optionalProp1 = 'Default value 1';
  }
  // ...
}

// 好
function foo(options) {
  const defaultProps = {
    optionalProp1: 'Default value 1'
  };
  options = {
    ...defaultProps,
    ...options
  }
}

Параметры функции по умолчанию

// 不好
function foo(param1, param2) {
  if (param2 === undefined) {
    param2 = 'Some default value';
  }
  // ...
}
// 好
function foo(param1, param2 = 'Some default value') {
  // ...
}

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

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

function bar(something) {
  if (something) {
    return foo({ value: 'Some value' });
  } else {
    return foo(null);
  }
}

function foo(options) {
  let value = null;
  if (options !== null) {
    value = options.value;
    // ...
  }
  return value;
}

попробуй написать, что не связаноnullкод. Альтернативой являетсяtry /catchмеханизм, использование объектов по умолчанию.

5. Не используйте произвольные стили кодирования, применяйте стандарт

Что может быть более пугающим, чем чтение кода со случайным стилем кодирования? Вы никогда не знаете, что произойдет!

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

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

Несколько примеров полезных стилей кодирования:

• Руководство по стилю Airbnb JS
• Руководство по стилю Google JS

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

Я сам всегда говорю: оставьте код прежним и обновите его позже, но «позже» означает никогда.

Рекомендуется использовать eslint для стандартизации стиля кодирования.

1. Установитьeslint
2. Настройте eslint на тот стиль кодирования, который вам больше всего подходит
3. Настройте хук перед фиксацией для запуска проверки eslint перед фиксацией.

Суммировать

Написание высококачественного и чистого кода требует дисциплины и преодоления вредных привычек кодирования.

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

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

Единый стиль кодирования во всей кодовой базе улучшает читабельность. Хорошие навыки программирования — это всегда беспроигрышное решение.

---

Ошибки, которые могут существовать после развертывания кода, нельзя узнать в режиме реального времени.Чтобы решить эти ошибки впоследствии, много времени тратится на отладку логов.Кстати, всем рекомендую полезный инструмент мониторинга ошибок.Fundebug.

оригинал:Рисовая поездка avlutin.com/unlearn-just av…

Все говорили, что нет проекта для написания резюме, поэтому я помог вам найти проект, и это было с бонусом.【Учебник по строительству】.

общаться

Статья постоянно обновляется каждую неделю. Вы можете выполнить поиск «Big Move to the World» в WeChat, чтобы прочитать и обновить ее как можно скорее (на одну или две статьи раньше, чем в блоге). Эта статья находится на GitHub.GitHub.com/QQ449245884…Он был включен, и многие мои документы были разобраны. Добро пожаловать в Звезду и совершенство. Вы можете обратиться в тестовый центр для ознакомления во время собеседования. Кроме того, обратите внимание на паблик-аккаунт и ответьте в фоновом режиме.Благосостояние, вы можете увидеть преимущества, вы знаете.