Code Style (in russian)

Михаил Давыдов
Разработчик JavaScript
Code Style

В ролях
- разработчик А
- разработчик Б (новичек)
История про разработчиков

4
Эта история вымышленная
и к Яндексу не относится

Жил-был один разработчик
и писал вот так:

6
function name(value)
-tab->{
-tab->-tab->var a = 0, b = 42;
-tab->-tab->if (value) return a
-tab->}
Код разработчика А

7
В проект пришел еще один и
стал писать так:

8
var name = function (value) {
....var a = 0,
........b = 42;
....if (value) {
........return a;
....}
};
Код разработчика Б

9
И общего Code Style у них
не было…

11
....var a = 0,
........b = 42;
....if (value) {
........return a;
....}
};
А: Что за говнокод?

12
-tab->{
-tab->-tab->var a = 0, b = 42;
-tab->}
Б: У самого говнокод!

13
....var a = 0,
........b = 42;
....if (value) {
........return a;
....}
};
А: Почему так ф-ю
написал?

14
-tab->{
-tab->-tab->var a = 0, b = 42;
-tab->}
Б: А ты вообще табы
используешь!

15
....var a = 0,
........b = 42;
....if (value) {
........return a;
....}
};
А: Зачем тут скобка?

16
-tab->{
-tab->-tab->var a = 0, b = 42;
-tab->}
Б: Уайтсмитс? Ты из
какой пещеры вылез?

17
....var a = 0,
........b = 42;
....if (value) {
........return a;
....}
};
А: Зачем тут точка с
запятой?

18
-tab->{
-tab->-tab->var a = 0, b = 42;
-tab->}
Б: А ты зачем перенос
не поставил?

19
....var a = 0,
........b = 42;
....if (value) {
........return a;
....}
};
А: RTFM or GTFO!

20
-tab->{
-tab->-tab->var a = 0, b = 42;
-tab->}
Б: А в бубен?

22
Нужна договоренность в
стиле кода

23
Организационный профит Code Style
•  Это закон
–  Должна быть отдельная страница о которой все знают
–  Страницу просто найти
•  Закон разрешает конфликты
–  Не знание закона не освобождает от ответственности
•  Решает большинство проблем
•  Эту страницу нужно дать прочитать перед
началом работы

24
Если не понятно, то нужно
дать понять причину ввода
такого Code Style

Применение CS
Для быстрого восприятия кода
Для предотвращения ошибок в коде
Для быстрого написания кода

26
Каждый из следующих
примеров зависит от
восприятия конкретного
человека

Обобщение элементов

28
....var a = 0,
........b = 42;
....if (value) {
........return a;
....}
};
Обобщение соседних элементов

29
....var a = 0,
........b = 42;
....if (value) {
........return a;
....}
};
Перенос строки разрывает обобщение

30
.b-form {
font-family: Arial;
font-size: 2em;
padding: 0 10px;
min-height: 100px;
}
Перенос строки разделяет разные типы CSS
ствойств и обобщает соседние элементы

Вертикаль – список

32
....var a = 0,
........b = 42;
....if (value) {
........return a;
....}
};
var - список переменных

33
..var a = 0
...., b = 42
...., c = 42
...., d = 42
....;
};
Coma-first style – его цель уменьшить число
ошибок.

34
..var a = 0
...., b = 42
....c = 42
...., d = 42
....;
};
Отсутствие запятых легко заметить

35
var a =
..{ b: 2
.., c: 3
.., d: 4
..}
..;
Coma-first style для литералов Object
https://gist.github.com/357981

36
ALL code is ugly.
Yours, mine, everyone's.
Code Is Ugly. Just face it.

37
.b-form {
-webkit-transition: color;
-moz-transition: color;
-ms-transition: color;
-o-transition: color;
transition: color;
}
Выравнивание по свойству

38
.b-form {
-webkit-transition: color;
-moz-transition: color;
-ms-transition: color;
-o-transition: color;
transition: color;
}
Выравнивание по значению
Так проще прочитать

39
<ol class="b-list">
....<li class="b-item">Abc</li>
</ol>

40
jQuery('.clickable')
.....filter('a')
.....click(handler)
.....end()
.....show('slow')
....;
Вызов функций по цепочке – список

41
if (typeof a !== "undefined" &&
typeof b !== "undefined" &&
typeof c === "string") {
// your stuff
}
Несколько условий – список

43
....var a = 0,
........b = 42;
....if (value) {
........return a;
....}
};
Единообразие
Похожий код быстрее воспринять

44
// Этот пробел обязательный
function A(value) {
}
// Этот пробел для единообразия
var A = function (value) {
};
Единообразие
Похожий код быстрее воспринять

46
....var a = 0,
........b = 42;
....if (value) {
........return a;
....}
};
Разрядка
БуряМглоюНебоКроет vs
Буря мглою небо кроет

47
for ( var i = 0 ; i < 100 ; i++ ){
}
for (var i = 0; i < 100; i++){
}
Разрядка, но без фанатизма
Буря Мглою Небо Кроет vs
Буря мглою небо кроет

48
Сильно разряженный код
сложно воспринять

49
<div class="b-header"></div>
Однако не везде она работает
В HTML перед и после равно пробел как
правило не ставят

51
....var a = 0,
........b = 42;
if (value) {
....return a;
}
};
Начало блока "видит" конец блока
Код представляет из себя "параграфы
текста"

52
....var a = 0,
........b = 42;
....if (value) {
........return a;
....}
};
Код представляет из себя "параграфы
текста"

53
<div class="b-header">
....<div class="b-item">Abc</div>
</div>

54
....<div class="b-item">
........Abc
....</div>
........Abc
....</div>
</div>
Не везде это применимо: много писать,
мельтешение, баги с пробелами

Предотвращение ошибок

56
........Abc
....</div>
........Abc
....</div>
</div>
Лишние пробелы
Переносы и пробел = +2 лишних пробельных
символа

57
Лишние пробелы
Переносы и пробел = +2 лишних пробельных
символа
var item = $('.b-item')[0];
if (item.innerHTML = "Abc") {
// Недостижим
}

Точка с запятой в FE

59
....var a = 0,
........b = 42;
....if (value) {
........return a;
....}
}
Точка с запятой в Function Expression

61
}var name2 = function (value) {
}
SyntaxError: missing ; before statement

62
....var a = 0,
........b = 42;
....if (value) {
........return a;
....}
};

64
....var a = 0,
........b = 42;
....if (value)
........return a;
};
Скобки у циклов и условий
Лень писать скобки

65
....var a = 0,
........b = 42;
....if (value)
........a = 42;
........return a;
};
Редкая логическая ошибка

66
....var a = 0,
........b = 42;
....if (value) {
........a = 42;
........return a;
....}
};

67
....var a = 0,
........b = 42;
....if (value) return a;
};
Много скобок создает много шума

69
....var a = 0,
........b = 42;
....if (value) {
........return
............{pewpew: a};
....}
};
Auto semicolon insertion

70
....var a = 0,
........b = 42;
....if (value) {
........return;
............{pewpew: a};
....}
};
Auto semicolon insertion
После return будет поставлена ;
http://es5.github.com/#x7.9

Последнее свойство перекрывает
предшествующее
Свойства с префиксами в CSS

72
.b-form {
box-shadow: 0 0 400px 200px #000;
-webkit-box-shadow: 0 0 400px 200px #000;
}

73

74
.b-form {
-webkit-box-shadow: 0 0 400px 200px #000;
box-shadow: 0 0 400px 200px #000;
}
Последним должен идти свойство без
префикса
http://pepelsbey.net/pres/pre-ﬁxes/

75

76
Еще несколько слов…
•  Документирование неявного кода
–  Код должен быть максимально самодокументируемым
•  Написание примеров использования
–  Чтобы не рыться в коде
•  Сокращение длины строки
–  Чтобы не вертеть головой и не скролить
•  Уменьшение уровней вложенности
–  Быстрее читать код
•  Единообразие в модулях и именах
•  Автоматизированная проверка кода ♥
–  IDE
–  Pre Commit Hook

77
Код должен выглядеть так
как будто его пишет один
человек

78
А как в Яндексе?

79
Как мы делаем в Яндексе
•  Love & Peace
•  У каждого проекта свой Code Style
–  Страница в Вики
–  Или CONTRIBUTE.md файл в корне проекта
•  Есть стиль по умолчанию
–  Страница в Вики со стилей по языкам
–  Не обязательный – на случай если лень
•  Стараемся использовать общепринятый
–  Так проще новым разработчикам
–  Привычней читать сторонний код
•  Code Review
–  Зависит от размера проекта
–  Как правило новички проходят обязательно

80
Заключение
•  Соглашение Code Style - Must have!
•  Нужно знать меру
–  Разрядка пробелами
–  Фигурные скобки
•  Все правила имеют на то причину

82
Михаил Давыдов
Разработчик JavaScript
azproduction@yandex-team.ru
azproduction
Спасибо

Code Style (in russian)

More Related Content

Viewers also liked (8)

Similar to Code Style (in russian) (20)

More from Mikhail Davydov (10)

Code Style (in russian)