JavaScript: соглашения об именовании

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

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

1. Соглашение об именовании переменных

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

var DogName = 'Пушок';
var dogName = 'Боня';
var DOGNAME = 'Мухтар';
console.log(DogName); // "Пушок"
console.log(dogName); // "Боня"
console.log(DOGNAME); // "Мухтар"

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

// Плохо
var dogname = 'Мухтар'; 

// Плохо
var dog_name = 'Мухтар'; 

// Плохо
var DOGNAME = ‘Мухтар’; 

// Плохо
var DOG_NAME = 'Мухтар'; 

// Хорошо
var dogName = 'Мухтар';

Названия переменных должны быть понятными и описывать сохраняемое значение. Например, если вам нужна переменная для хранения клички собаки, вам следует использовать dogName вместо просто Name, поскольку это более осмысленно.

// Плохо
var d = 'Мухтар';

// Плохо
var name = 'Мухтар';

// Хорошо
var dogName = 'Мухтар';

2. Соглашение об именовании логических значений

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

// Плохо
var bark = false;

// Хорошо
var isBark = false;

// Плохо
var ideal = true;

// Хорошо
var areIdeal = true;

// Плохо
var owner = true;

// Хорошо
var hasOwner = true;

3. Соглашение об именовании функций

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

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

// Плохо
function name(dogName, ownerName) { 
    return '${dogName} ${ownerName}';
}

// Хорошо
function getName(dogName, ownerName) { 
    return '${dogName} ${ownerName}';
}

4. Соглашение об именовании констант

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

const LEG = 4;
const TAIL = 1;
const MOVABLE = LEG + TAIL;

Если имя объявления переменной содержит более одного слова, вам следует использовать Snake case, но в верхнем регистре.

const DAYS_UNTIL_TOMORROW = 1;

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

5. Соглашение об именовании классов

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

Основное различие между именами функций и классов заключается в том, что мы должны использовать Pascal case для имен классов.

class DogCartoon { 
    constructor(dogName, ownerName) { 
        this.dogName = dogName; 
        this.ownerName = ownerName; 
    }
}

var cartoon = new DogCartoon('Барбос', 'Дедушка');

6. Соглашение об именовании компонентов

Компоненты JavaScript широко используются во интерфейсных платформах, таких как React. Хотя компоненты используются в DOM, рекомендуется относиться к ним аналогично классам и использовать регистр Pascal case для определения имен.

// Плохо
function dogCartoon(roles) { 
    return ( 
        <div> 
            <span>Dog Name: { roles.dogName }</span> 
            <span>Owner Name: { roles.ownerName }</span> 
        </div> 
    );
} 

// Хорошо
function DogCartoon(roles) { 
    return ( 
        <div> 
            <span>Dog Name: { roles.dogName }</span> 
            <span>Owner Name: { roles.ownerName }</span> 
        </div> 
    );
}

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

<div> 
    <DogCartoon 
        roles={{ dogName: 'Scooby-Doo', ownerName: 'Shaggy' }} 
    />
</div>

7. Соглашение об именовании методов

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

Мы должны использовать Camel Case для объявления методов JavaScript и использовать глаголы в качестве префиксов, чтобы сделать имена более осмысленными.

class DogCartoon {
    constructor(dogName, ownerName) { 
        this.dogName = dogName; 
        this.ownerName = ownerName; 
    }

    getName() { 
        return '${this.dogName}: ${this.ownerName}'; 
    }
}

var cartoon= new DogCartoon('Барбос', 'Дедушка');

console.log(cartoon.getName());
// "Барбос: Дедушка"

8. Соглашение об именовании частных функций

Символы подчеркивания _ широко используются в таких языках, как Python и PHP, для определения переменных, функций и методов. Но в JavaScript символ подчеркивания используется для обозначения частных переменных или функций.

Например, если у вас есть имя частной функции, например toonName, вы можете обозначить ее как частную функцию, добавив знак подчеркивания в качестве префикса _toonName.

class DogCartoon {
    constructor(dogName, ownerName) {
        this.dogName = dogName;
        this.ownerName = ownerName;
        this.name = _toonName(dogName, ownerName);
    }
    _toonName(dogName, ownerName) {
        return `${dogName} ${ownerName}`;
    }
}

var cartoon = new DodCartoon('Барбос', 'Дедушка');

// Хорошо
var name = cartoon.name;
console.log(name);
// "Барбос Дедушка"

// Плохо
name =cartoon._toonName(cartoon.dogName, cartoon.ownerName);
console.log(name);
// "Барбос Дедушка"

9. Соглашение об именовании глобальных переменных

Для глобальных переменных JavaScript не существует специальных стандартов именования.

Рекомендуется использовать Camel case для изменяемых глобальных переменных и верхний регистр для неизменяемых глобальных переменных.

10. Соглашение об именовании файлов

Большинство веб-серверов (Apache, Unix) чувствительны к регистру, когда дело доходит до обработки файлов. Например, flower.jpg не является Flower.jpg.

С другой стороны, веб-серверы, такие как Microsoft IIS, не заботятся о регистре. На таких серверах вы можете использовать Flower.jpg или flower.jpg для доступа к Flower.jpg.

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

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

Заключение

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