Стандарты кодирования JavaScript для улучшения качества вашего кода
Стандарты кодирования могут помочь в следующем:
- Сохраняет целостность кода
- Легче читать и понимать
- Легче для сопровождающего
Приведенные ниже стандарты кодирования представляют собой мое собственное мнение о том, что может помочь в вышеуказанных вопросах.
При сравнении используйте === вместо ==
Это важно, потому что JavaScript является динамическим языком, поэтому использование == может дать вам неожиданные результаты, так как позволяет использовать другой тип.
Ошибка:
if (val == 2)
Пройден:
if (val === 2)
Никогда не используйте var, используйте вместо него let
Самый простой способ: let поможет с любыми проблемами с областью видимости, которые var вызывают в JavaScript.
Ошибка:
var myVar = 10;
Пройден:
let myVar = 10;
Используйте const вместо let
Это останавливает разработчиков, пытающихся изменить то, что им не следует, и действительно помогает улучшить удобочитаемость.
Ошибка:
let VAT_PERCENT = 20;
Пройден:
const VAT_PERCENT = 20;
Всегда используйте точку с запятой (;)
Хотя это необязательно в JavaScript, поскольку точки с запятой не нужны в качестве терминаторов операторов, как в других языках. Использование ; действительно помогает сохранить согласованность кода и отлично подходит для разделителей операторов.
Ошибка:
const VAT_PERCENT = 20; let amount = 10 return addVat(amount, vatPercent)
Пройден:
const vatPercent = 20; let amount = 10; return addVat(amount, vatPercent);
Соглашения об именах в JavaScript
let должно быть camelCase
const, если в верхней части файла используется верхний регистр "змея". MY_CONST. Если не вверху файла, используйте camelCase
class должно быть PascalCasing. MyClass
functions должно быть camelCase. myFunction
Используйте шаблонные литералы при обращении к строкам
Литералы шаблона - это строковые литералы, допускающие встроенные выражения.
Если вам нужно поддерживать IE11 или ниже, они не поддерживают строковые литералы
Ошибка:
let fullName = firstName + " " + lastName;
Пройден:
let fullName = `${firstName} ${lastName}`;
По возможности используйте стрелочные функции ES6
Стрелочные функции - это более краткий синтаксис для написания выражения функции. Они анонимны и меняют способ this связывания функций.
Ошибки:
var multiply = function(a, b) {
return a* b;
};Пройден:
const multiply = (a, b) => { return a * b};Всегда используйте фигурные скобки вокруг управляющих структур
Скобки необходимы для всех управляющих структур (т.е. if, else, for, do, while, а также любых других)
Это может разделить мнение с помощью однострочных if операторов, но сколько раз это приводило к ошибкам, если не использовались фигурные скобки. Это может привести к тому, что разработчики добавят другие операторы, думая, что условный оператор окружает его.
Например
if (myNumber === 0)
doSomething();
doSomethingElse(); // This will always run!!
// This is actually what is happening
if (myNumber === 0) {
doSomething();
}
doSomethingElse();
Вот так и должно быть:
Ошибка:
if (valid)
doSomething();
if (amount > 100)
doSomething();
else if(amount > 200)
doSomethingElse();
Пройден:
if (valid) {
doSomething();
}
if (amount > 100) {
doSomething();
}
else if(amount > 200) {
doSomethingElse();
}
Кроме того, убедитесь, что в JavaScript фигурная скобка начинается на одной строке с пробелом между ними.
Ошибка:
if (myNumber === 0)
{
doSomething();
}
Проходить:
if (myNumber === 0) {
doSomething();
}
Попробуйте уменьшить вложенность
if внутри if может стать беспорядочным и очень трудным для чтения, очень быстро. Иногда у вас может не получиться обойтись, но всегда смотрите на структуру вашего JavaScript, чтобы увидеть, можете ли вы ее изменить.
Ошибка:
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);
Как видно из приведенного выше примера, это намного легче читать. В большинстве случаев я стараюсь по возможности избегать чужого. Еще один совет - сначала попробуйте провести проверку. Как показано ниже:
Ошибка:
if (valid) {
return buy();
} else {
return error();
}
Пройден:
return valid ? buy() : error();
Попробуйте указать «максимальную» длину строки для файлов и функций
Это может быть сложно, поскольку все приложения разные, но я думаю, что важно иметь руководство, когда вы думаете, что определенные части кода становятся слишком большими. Возможно, вам придется немного поэкспериментировать, чтобы найти подходящую длину.
Примеры:
files максимум 80 строк кода
functions максимум 15 строк кода
Имена файлов в нижнем регистре
MyFile.js должно быть myFile.js
По возможности используйте параметры по умолчанию
В JavaScript, если вы не передаете значение в параметр при вызове функции, оно будет undefined
Ошибка:
myFunction(a, b) {
return a + b;
}
Пройден:
myFunction(a = 0, b = 0) {
return a + b;
}
В операторах переключения должно использоваться break и default
Обычно я стараюсь не рекомендовать использование операторов switch, но вы действительно хотите их использовать, убедитесь, что вы break каждое условие и используете default.
Ошибка:
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;
}
Используйте namedexports
Не используйте default экспорт. Импортируемые модули должны давать имена этим значениям, что может привести к несогласованности в именовании модулей.
Ошибка:
export default class MyClass {
Пройден:
export class MyClass {
Не используйте импорт с подстановочными знаками
Это гарантирует, что у вас будет один экспорт по умолчанию.
Ошибка:
import * as Foo from './Foo';
Пройден:
import Foo from './Foo';
Используйте ярлыки для логических значений
Ошибка:
if (isValid === true) if (isValid === false)
Пройден:
if (isValid) if (!isValid)
Старайтесь избегать ненужных троичных операторов
Ошибка:
const boo = a ? a : b;
Пройден:
const boo = a || b;
Используйте только одну переменную в объявлении
Это может снова разделиться во мнениях, но я чувствую, что объявляя сразу несколько, иногда их можно упустить.
Ошибка:
let a = 1, b = 2;
Пройден:
let a = 1; let b = 2;
Заключение
Стандарты кодирования на любом языке действительно могут помочь с удобочитаемостью приложения и удобством сопровождения. Одна вещь, которая может быть сложной, если вы работаете в команде, - это соблюдение стандартов кодирования. Вот несколько идей, которые могут вам помочь:
- Рецензии, просматривающие код построчно.
- Линтинг или какой-то анализатор кода
- Создание согласованного приложения, в котором каждый разработчик знает, что ему нужно создать / обновить.
- Создавая что-то новое, позвольте одному из ваших старших разработчиков начать это, так как другие разработчики могут использовать этот код в качестве руководства.
