Skip to content

Latest commit

 

History

History
427 lines (354 loc) · 13.7 KB

JavaScript.md

File metadata and controls

427 lines (354 loc) · 13.7 KB
Raw

Правила оформления JavaScript-кода

  1. Объекты
    1.1. Создание объекта
    1.2. Зарезервированные слова
    1.3. Ключевые слова
    1.4. Создание обьекта на 3 и более элементов
  2. Переменные
  3. Функции
    3.1. Именование функции
    3.2. Передача функции в функцию
  4. Отступы
    4.1. Горизонтальные отступы
    4.2. Вертикальные отступы
  5. Пробелы
  6. Скобки
  7. Кавычки
  8. Точка с запятой
  9. Комментарии

1. Объекты

1.1 Создание объекта

Для создания объекта используйте фигурные скобки. Не создавайте объекты через конструктор new Object.

Хорошо

let item = {};

Плохо

let item = new Object();

1.2 Зарезервированные слова

Не используйте зарезервированные слова в качестве ключей объектов. Они не будут работать в IE8.

Подробнее

Хорошо

let superman = {
  defaults: { clark: 'kent' },
  hidden: true
};

Плохо

let superman = {
  default: { clark: 'kent' },
  private: true
};

1.3 Ключевые слова

Не используйте ключевые слова (в том числе измененные). Вместо них используйте синонимы.

Хорошо

let superman = {
  type: 'alien'
};

Плохо

let superman = {
  class: 'alien'
};

1.4 Создание обьекта на 3 и более элементов.

При создании обьектов, равно как и массивов, содержащих большое количество свойств(элементов), и тем самым образующих строки, длиной более 20 символов, необходимо выполнять ряд условий:

  • Открывающая скобка располагается на той же строке;
  • Каждое свойство оформляется на новой строке;
  • Пробел после двоеточия;
  • Закрывающая скобка располагается на новой строке.

Хорошо

let superman = {
  defaults: { clark: 'kent' },
  type: 'alien',
  hidden: true
};

Плохо

let superman = {
  defaults:{clark:'kent'},
  type:'alien',
  hidden:true
};

Плохо

let superman = {defaults: { clark: 'kent' }, type: 'alien', hidden: true};

2. Переменные

Для именования переменных используйте существительные на английском языке.

  • Не используйте транслит (слова на русском языке латинскими буквами).
  • Имя переменной должно быть осмысленным.
  • Имя переменной не должно состоять из одной буквы (кроме итераторов циклов i и j).
  • Для имён, состоящих из нескольких слов, используйте camelCase.

Имя может состоять из букв, цифр, символов $ и _, не должно начинаться с цифры.

Хорошо

let vegetables;
let hasPositiveSaldoAccount;

Плохо

let rrfgov;
let ovoschi;
let HasPositiveSaldoAccount;
let has_positive_saldo_account;
let a;

3. Функции

3.1 Именование функции

Имя функции должно быть глаголом (кроме функций констуркторов) на английском языке или начинаться с него.

  • Не используйте транслит (слова на русском языке латинскими буквами).
  • Имя функции должно быть осмысленным.
  • Для имён, состоящих из нескольких слов, используйте camelCase. Исключением являются функции конструкторы.

Хорошо

function editName() {
  // тело функции
};

function Vehicle(name) {
  // тело функции
}

Плохо

function pravkaspiska() {
  // тело функции
};

function GetVehicle(name) {
  // тело функции
}

3.2 Передача функции в функцию

При передаче функции, как аргумент в другую функцию, оформляйте код как в примере ниже.

let arr = ['Яблоко', 'Апельсин', 'Груша'];
arr.forEach(function(item, i, arr){
  alert(i + ': ' + item + ' (массив:' + arr + ')');
});

arr.forEach((item, i, arr) => alert(i + ': ' + item + ' (массив:' + arr + ')'));

4. Отступы

4.1 Горизонтальные отступы

Отступ при вложенности - 2 пробела на каждый уровень вложенности.

  • Не используйте символы табуляции.
  • Отступы должны быть равномерными. Для каждого вложенного блока, отступ должен увеличиваться ровно на 2 пробела. Отступ должен быть таким, чтобы по одному отступу можно было понять, к какому блоку относится действие.
  • В редакторе кода, символ табуляции можно заменить на 2 пробела.
  • Включите отображение нивидимых символов.
  • Для корректности отступов желательно использовать расширение indent-rainbow (расширение расскрашивает блоки отступов в разные цвета). При использовании расширения, отступов, выделеным красным цветом не должно быть.

Хорошо

if (age < 98) {
  let a = 15;
  for (let i = 0, iMax = items.length; i < iMax; ++i) {
    // тело цикла
    if(i < 15) {
      // тело условной конструкции
      let b = 30;
      let c = a + b;
      console.log(c * 2);
    }
  }
}

Плохо

if (age < 98) {
for (let i = 0, iMax = items.length; i < iMax; ++i) {
// тело цикла
let a = 15;
if(i < 15) {
// тело условной конструкции
let b = 30;
let c = a + b;
console.log(c * 2);
}
}
}

Плохо

if (age < 98) {
 for (let i = 0, iMax = items.length; i < iMax; ++i) {
 // тело цикла
 let a = 15;
    if(i < 15) {
 // тело условной конструкции
 let b = 30;
let c = a + b;
   console.log(c * 2);
 }
}
}

Плохо

// присутствуют символы табуляции
if (age < 98) {
	for (let i = 0, iMax = items.length; i < iMax; ++i) {
		console.log(i);
	}
}

// присутствуют как символы табуляции, так и символы пробелов
if (age < 98) {
	for (let i = 0, iMax = items.length; i < iMax; ++i) { // на этой строке, отступ сделан табуляцией
  	console.log(i); // на этой строке, отступ сделан сначала пробелами, а затем табуляцией
  } // на этой строке, отступ сделан пробелами
}

4.2 Вертикальные отступы

Между логическими блоками(циклами, функциями и т.д.) следует оставлять пустую строку. Это делает код более читабельным. Избегайте блоков кода более 9 строк подряд. Не добавляйте пустую строку после каждого действия.

Хорошо

let i;
let iMax = items.length;
for (i = 0; i < iMax, ++i) {
  // тело цикла
}

function showName() {
  // тело функции
}

Плохо

let i;
let iMax = items.length;

for (i = 0; i < iMax, ++i) {
  // тело цикла
}
function showName() {
  // тело функции
}

Плохо

let a = 15;

let b = 30;

let c = a + b;

console.log(c * 2);

5. Пробелы

  • Используйте пробелы между параметрами и не используйте между именем функции и скобкой;

Хорошо

function edit(name, age) {
  // тело функции
}

Плохо

function edit (name,age) {
  // тело функции
}
  • При создании анонимной функции (функции без имени) необходимо использовать пробел перед скобкой;

Хорошо

function (name, age) {
  // тело функции
}

Плохо

function(name,age) {
  // тело функции
}
  • Используйте пробелы вокруг операторов.

Хорошо

if (age < 100) {
  // тело условной конструкции
}

Плохо

if (age<100) {
  // тело условной конструкции
}

6. Скобки

  • Открывающая фигурная скобка располагается на той же строке.
  • Перед скобкой пробел.
  • Закрывающая скобка располагается на новой строке.
  • Всегда добавляйте фигурные скобки для циклов и условных конструкций, даже, когда блок состоит из одного действия.

Хорошо

function edit(name, age) {
  if (age < 100) {
    // тело условной конструкции
  }
}

Плохо

function edit(name, age)
{
  if (age < 100) {/*тело условной конструкции*/}
}

Плохо

function edit(name, age)
{
  if (age < 100) /*тело условной конструкции*/
}

Плохо

function edit(name, age)
{
  if (age < 100) 
    /*тело условной конструкции*/
}

7. Кавычки

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

Хорошо

let string = 'строка';
let phrase = "you're next";

Плохо

let string = "строка";

8. Точка с запятой

В конце выражения обязательна точка с запятой.

Хорошо

alert('Привет');
alert('Мир');

Плохо

alert('Привет')
alert('Мир')

9. Комментарии

Для пояснения кода используются комментарии. Комментарии не исполняются интерпретатором JavaScript.

  • Однострочные комментарии начинаются с двойного слэша //. За ним обязательно должен идти пробел;
  • Многострочные комментарии располагаются между /* и */. За символом начала комментария обязательно должен идти пробел. Символ конца комментария располагается на новой строке.
  • Никогда не оставляйте закомментированный код. Комментарии должны использоваться для пояснения программы, а не скрытия иной реализации действий.

Хорошо

/* Пример комментария.
Многострочного комментария.
*/

// Пример однострочного комментария.

Плохо

/*Пример комментария.
Многострочного комментария.*/

//Пример однострочного комментария.