15 простых стандартов программирования JS, которые сделают ваш код чище

Автор | Даниэль Андерсон

Эта статья была первоначально опубликована на веб-сайте Medium, переведена и опубликована с разрешения автора.

Стандарты кодирования могут помочь:

• поддерживать согласованность кода
• Легко читать и понимать
• легко поддерживать

Следующие стандарты кодирования являются полезными для меня в отношении вышеизложенных пунктов.

1. Используйте === вместо == при сравнении

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

Потерпеть неудачу:

if (val == 2)

Проходить:

if (val === 2)

2. Никогда не используйте var, вместо этого используйте let

использоватьletпоможет избежатьJavaScriptразличныйvarиз-за проблем с масштабом.

Потерпеть неудачу:

var myVar = 10;

Проходить:

let myVar = 10;

3. Используйте const вместо let

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

Потерпеть неудачу:

let VAT_PERCENT = 20;

Проходить:

const VAT_PERCENT = 20;

4. Всегда используйте точку с запятой (;)

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

Потерпеть неудачу:

const VAT_PERCENT = 20;
let amount = 10
return addVat(amount, vatPercent)

Проходить:

const vatPercent = 20;
let amount = 10;
return addVat(amount, vatPercent);

5. Соглашения об именах в JavaScript

• letВы должны использовать верблюд с именем.

• constПри использовании обозначения змеи в верхнем регистре в верхней части файла. Если нет в верхней части файла, используйте верблюжий регистр.

• classДолжна быть номенклатура Паскаля:MyClass

• functionsФункции должны быть в верблюжьем регистре:myFunction

6. Используйте шаблонные строки при объединении строк

Встроенные выражения разрешены в строках шаблона.

Потерпеть неудачу:

let fullName = firstName + " " + lastName;

Проходить:

let fullName = `${firstName} ${lastName}`;

7. Используйте стрелочные функции ES6, когда это возможно

Стрелочные функции — это более краткий синтаксис для написания функциональных выражений.

Потерпеть неудачу:

var multiply = function(a, b) {
  return a* b;
};

Проходить:

const multiply = (a, b) => { return a * b};

8. Всегда используйте фигурные скобки вокруг управляющих структур

Все управляющие структуры должны использовать фигурные скобки (например,if,else,for,do,whileи т. д.), так что при последующем обслуживании не так легко допустить ошибку.

Потерпеть неудачу:

if (valid)
   doSomething();
if (amount > 100) 
    doSomething();
else if(amount > 200)
    doSomethingElse();

Проходить:

if (valid) {
   doSomething();
}
if (amount > 100) {
   doSomething();
} 
else if(amount > 200) {
    doSomethingElse();
}

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

Потерпеть неудачу:

if (myNumber === 0)
{
    doSomething();
}

Проходить:

if (myNumber === 0) {
    doSomething();
}

10. Попробуйте уменьшить вложенность

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

Потерпеть неудачу:

if (myNumber > 0) {
  if (myNumber > 100) {
       if (!hasDiscountAlready) {
           return addDiscountPercent(0);
       } else {
           return addDiscountPercent(10);
       }
  } else if (myNumber > 50) {
    if (hasDiscountAlready) {
       return addDiscountPercent(5);
    }
  } else {
    if (!hasDiscountAlready) {
      return addDiscountPercent(0);
    } else {
      return addDiscountPercent(1);
    }
  }
} else {
     error();
}

Проходить:

if (myNumber <= 0) {
   return error;
}
if (!hasDiscountAlready) {
    return addDiscountPercent(0);
}
if (myNumber > 100) { 
    return addDiscountPercent(10);
}
if (myNumber > 50) { 
    return addDiscountPercent(5);
}
return addDiscountPercent(1);

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

11. По возможности используйте параметры по умолчанию

существуетJavaScript, если вы вызываете функцию без передачи аргумента, ее значение равноundefined

Потерпеть неудачу:

myFunction(a, b) {
  return a + b;
}

Проходить:

myFunction(a = 0, b = 0) { 
   return a + b;
}

12. Оператор `Switch` должен использовать `break` и иметь `default`

обычно стараюсь не использоватьswitchУтверждение, но вы хотите его использовать, убедитесь, что каждое условиеbreak, и написалdefalut.

Потерпеть неудачу:

switch (myNumber)
{
  case 10: 
   addDiscountPercent(0);
  case 20: 
   addDiscountPercent(2);
  case 30:
   addDiscountPercent(3);
}

Проходить:

switch (myNumber)
{
  case 10: 
    addDiscountPercent(0);
    break;
  case 20: 
    addDiscountPercent(2);
    break;
  case 30:
    addDiscountPercent(3);
    break;
  default: 
    addDiscountPercent(0);
    break;
}

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

Потерпеть неудачу:

import * as Foo from './Foo';

Проходить:

import Foo from './Foo';

14. Использование логических ярлыков

Потерпеть неудачу:

if (isValid === true)
if (isValid === false)

Проходить:

if (isValid)
if (!isValid)

15. Старайтесь избегать ненужных троичных операторов

Потерпеть неудачу:

const boo = a ? a : b;

Проходить:

const boo = a || b;

Суммировать

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

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

Исходная ссылка: https://medium.com/javascript-in-plain-english/19-simple-javascript-coding-standards-to-keep-your-code-clean-7422d6f9bc0