Михаил Давыдов — Code Style

8,229 views
8,182 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
8,229
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
7
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Михаил Давыдов — Code Style

  1. 1. Code StyleМихаил ДавыдовРазработчик JavaScript
  2. 2. История про разработчиков В ролях - разработчик А - разработчик Б (новичек)
  3. 3. Эта история вымышленная и к Яндексу не относится4
  4. 4. Жил-был один разработчики писал вот так:
  5. 5. Код разработчика А function name(value) -tab->{ -tab->-tab->var a = 0, b = 42; -tab->-tab->if (value) return a -tab->}6
  6. 6. В проект пришел еще один и стал писать так:7
  7. 7. Код разработчика Б var name = function (value) { ....var a = 0, ........b = 42; ....if (value) { ........return a; ....} };8
  8. 8. И общего Code Style у них не было…9
  9. 9. 10
  10. 10. Код разработчика Б var name = function (value) { ....var a = 0, А: Что за говнокод? ........b = 42; ....if (value) { ........return a; ....} };11
  11. 11. Код разработчика А function name(value) -tab->{ Б: У самого говнокод! -tab->-tab->var a = 0, b = 42; -tab->-tab->if (value) return a -tab->}12
  12. 12. Код разработчика Б var name = function (value) { ....var a = 0, ........b = 42; А: Почему так ф-ю ....if (value) { написал? ........return a; ....} };13
  13. 13. Код разработчика А function name(value) Б: А ты вообще табы -tab->{ -tab->-tab->var a = 0, b = 42; используешь! -tab->-tab->if (value) return a -tab->}14
  14. 14. Код разработчика Б var name = function (value) { А: Зачем тут скобка? ....var a = 0, ........b = 42; ....if (value) { ........return a; ....} };15
  15. 15. Код разработчика А function name(value) -tab->{ -tab->-tab->var a = 0, b = 42; -tab->-tab->if (value) return a -tab->} Б: Уайтсмитс? Ты из какой пещеры вылез?16
  16. 16. Код разработчика Б А: Зачем тут точка с var name = function (value) { ....var a = 0, запятой? ........b = 42; ....if (value) { ........return a; ....} };17
  17. 17. Код разработчика А function name(value) -tab->{ -tab->-tab->var a = 0, b = 42; -tab->-tab->if (value) return a -tab->} Б: А ты зачем перенос не поставил?18
  18. 18. Код разработчика Б var name = function (value) { ....var a = 0, ........b = 42; А: RTFM or GTFO! ....if (value) { ........return a; ....} };19
  19. 19. Код разработчика А function name(value) -tab->{ Б: А в бубен? -tab->-tab->var a = 0, b = 42; -tab->-tab->if (value) return a -tab->}20
  20. 20. 21
  21. 21. Нужна договоренность в стиле кода22
  22. 22. Организационный профит Code Style •  Это закон –  Должна быть отдельная страница о которой все знают –  Страницу просто найти •  Закон разрешает конфликты –  Не знание закона не освобождает от ответственности •  Решает большинство проблем •  Эту страницу нужно дать прочитать перед началом работы23
  23. 23. Если не понятно, то нужно дать понять причину ввода такого Code Style24
  24. 24. Применение CSДля быстрого восприятия кодаДля предотвращения ошибок в кодеДля быстрого написания кода
  25. 25. Каждый из следующих примеров зависит от восприятия конкретного человека26
  26. 26. Обобщение элементов
  27. 27. Обобщение соседних элементов var name = function (value) { ....var a = 0, ........b = 42; ....if (value) { ........return a; ....} };28
  28. 28. Обобщение соседних элементов Перенос строки разрывает обобщение var name = function (value) { ....var a = 0, ........b = 42; ....if (value) { ........return a; ....} };29
  29. 29. Обобщение соседних элементов Перенос строки разделяет разные типы CSS ствойств и обобщает соседние элементы .b-form { font-family: Arial; font-size: 2em; padding: 0 10px; min-height: 100px; }30
  30. 30. Вертикаль – список
  31. 31. Вертикаль – список var - список переменных var name = function (value) { ....var a = 0, ........b = 42; ....if (value) { ........return a; ....} };32
  32. 32. Вертикаль – список Coma-first style – его цель уменьшить число ошибок. var name = function (value) { ..var a = 0 ...., b = 42 ...., c = 42 ...., d = 42 ....; };33
  33. 33. Вертикаль – список Отсутствие запятых легко заметить var name = function (value) { ..var a = 0 ...., b = 42 ....c = 42 ...., d = 42 ....; };34
  34. 34. Вертикаль – список Coma-first style для литералов Object var a = ..{ b: 2 .., c: 3 .., d: 4 ..} ..;35 https://gist.github.com/357981
  35. 35. ALL code is ugly. Yours, mine, everyones. Code Is Ugly. Just face it.36
  36. 36. Вертикаль – список Выравнивание по свойству .b-form { -webkit-transition: color; -moz-transition: color; -ms-transition: color; -o-transition: color; transition: color; }37
  37. 37. Вертикаль – список Выравнивание по значению Так проще прочитать .b-form { -webkit-transition: color; -moz-transition: color; -ms-transition: color; -o-transition: color; transition: color; }38
  38. 38. Вертикаль – список <ol class="b-list"> ....<li class="b-item">Abc</li> ....<li class="b-item">Abc</li> ....<li class="b-item">Abc</li> </ol>39
  39. 39. Вертикаль – список Вызов функций по цепочке – список jQuery(.clickable) .....filter(a) .....click(handler) .....end() .....show(slow) ....;40
  40. 40. Вертикаль – список Несколько условий – список if (typeof a !== "undefined" && typeof b !== "undefined" && typeof c === "string") { // your stuff }41
  41. 41. Единообразие
  42. 42. Единообразие Похожий код быстрее воспринять var name = function (value) { ....var a = 0, ........b = 42; ....if (value) { ........return a; ....} };43
  43. 43. Единообразие Похожий код быстрее воспринять // Этот пробел обязательный function A(value) { } // Этот пробел для единообразия var A = function (value) { };44
  44. 44. Разрядка
  45. 45. Разрядка БуряМглоюНебоКроет vs Буря мглою небо кроет var name = function (value) { ....var a = 0, ........b = 42; ....if (value) { ........return a; ....} };46
  46. 46. Разрядка, но без фанатизма Буря Мглою Небо Кроет vs Буря мглою небо кроет for ( var i = 0 ; i < 100 ; i++ ){ } for (var i = 0; i < 100; i++){ }47
  47. 47. Сильно разряженный код сложно воспринять48
  48. 48. Однако не везде она работает В HTML перед и после равно пробел как правило не ставят <div class="b-header"></div>49
  49. 49. Начало - конец
  50. 50. Начало блока "видит" конец блока Код представляет из себя "параграфы текста" var name = function (value) { ....var a = 0, ........b = 42; if (value) { ....return a; } };51
  51. 51. Начало блока "видит" конец блока Код представляет из себя "параграфы текста" var name = function (value) { ....var a = 0, ........b = 42; ....if (value) { ........return a; ....} };52
  52. 52. Начало блока "видит" конец блока <div class="b-header"> ....<div class="b-item">Abc</div> ....<div class="b-item">Abc</div> ....<div class="b-item">Abc</div> </div>53
  53. 53. Начало блока "видит" конец блока Не везде это применимо: много писать, мельтешение, баги с пробелами <div class="b-header"> ....<div class="b-item"> ........Abc ....</div> ....<div class="b-item"> ........Abc ....</div> </div>54
  54. 54. Предотвращение ошибок
  55. 55. Лишние пробелы Переносы и пробел = +2 лишних пробельных символа <div class="b-header"> ....<div class="b-item"> ........Abc ....</div> ....<div class="b-item"> ........Abc ....</div> </div>56
  56. 56. Лишние пробелы Переносы и пробел = +2 лишних пробельных символа var item = $(.b-item)[0]; if (item.innerHTML = "Abc") { // Недостижим }57
  57. 57. Точка с запятой в FE
  58. 58. Точка с запятой в Function Expression var name = function (value) { ....var a = 0, ........b = 42; ....if (value) { ........return a; ....} }59
  59. 59. cat **/*.js > all.js!60
  60. 60. Точка с запятой в Function Expression SyntaxError: missing ; before statement var name = function (value) { }var name2 = function (value) { }61
  61. 61. Точка с запятой в Function Expression var name = function (value) { ....var a = 0, ........b = 42; ....if (value) { ........return a; ....} };62
  62. 62. Скобки у циклов
  63. 63. Скобки у циклов и условий Лень писать скобки var name = function (value) { ....var a = 0, ........b = 42; ....if (value) ........return a; };64
  64. 64. Скобки у циклов и условий Редкая логическая ошибка var name = function (value) { ....var a = 0, ........b = 42; ....if (value) ........a = 42; ........return a; };65
  65. 65. Скобки у циклов и условий var name = function (value) { ....var a = 0, ........b = 42; ....if (value) { ........a = 42; ........return a; ....} };66
  66. 66. Скобки у циклов и условий Много скобок создает много шума var name = function (value) { ....var a = 0, ........b = 42; ....if (value) return a; };67
  67. 67. Auto semicolon insertion
  68. 68. Auto semicolon insertion var name = function (value) { ....var a = 0, ........b = 42; ....if (value) { ........return ............{pewpew: a}; ....} };69
  69. 69. Auto semicolon insertion После return будет поставлена ; var name = function (value) { ....var a = 0, ........b = 42; ....if (value) { ........return; ............{pewpew: a}; ....} };70 http://es5.github.com/#x7.9
  70. 70. Свойства с префиксами в CSS Последнее свойство перекрывает предшествующее
  71. 71. Свойства с префиксами в CSS .b-form { box-shadow: 0 0 400px 200px #000; -webkit-box-shadow: 0 0 400px 200px #000; }72
  72. 72. Свойства с префиксами в CSS73
  73. 73. Свойства с префиксами в CSS Последним должен идти свойство без префикса .b-form { -webkit-box-shadow: 0 0 400px 200px #000; box-shadow: 0 0 400px 200px #000; }74 http://pepelsbey.net/pres/pre-fixes/
  74. 74. Свойства с префиксами в CSS75
  75. 75. Еще несколько слов… •  Документирование неявного кода –  Код должен быть максимально самодокументируемым •  Написание примеров использования –  Чтобы не рыться в коде •  Сокращение длины строки –  Чтобы не вертеть головой и не скролить •  Уменьшение уровней вложенности –  Быстрее читать код •  Единообразие в модулях и именах •  Автоматизированная проверка кода ♥ –  IDE –  Pre Commit Hook76
  76. 76. Код должен выглядеть так как будто его пишет один человек77
  77. 77. А как в Яндексе?78
  78. 78. Как мы делаем в Яндексе •  Love & Peace •  У каждого проекта свой Code Style –  Страница в Вики –  Или CONTRIBUTE.md файл в корне проекта •  Есть стиль по умолчанию –  Страница в Вики со стилей по языкам –  Не обязательный – на случай если лень •  Стараемся использовать общепринятый –  Так проще новым разработчикам –  Привычней читать сторонний код •  Code Review –  Зависит от размера проекта –  Как правило новички проходят обязательно79
  79. 79. Заключение •  Соглашение Code Style - Must have! •  Нужно знать меру –  Разрядка пробелами –  Фигурные скобки •  Все правила имеют на то причину80
  80. 80. 81
  81. 81. Михаил Давыдов Разработчик JavaScript azproduction@yandex-team.ru azproduction82 Спасибо

×