Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

ШРИ - Code Style

ШРИ - Code Style

Mikhail Davydov

September 23, 2013
Tweet

More Decks by Mikhail Davydov

Other Decks in Education

Transcript

  1. 6 function name(value) -tab->{ -tab->-tab->var a = 0, b =

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

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

  4. 11 var name = function (value) { ....var a =

    0, ........b = 42; ....if (value) { ........return a; ....} }; Код разработчика Б А: Что за говнокод?
  5. 12 function name(value) -tab->{ -tab->-tab->var a = 0, b =

    42; -tab->-tab->if (value) return a -tab->} Код разработчика А Б: У самого говнокод!
  6. 13 var name = function (value) { ....var a =

    0, ........b = 42; ....if (value) { ........return a; ....} }; Код разработчика Б А: Почему так ф-ю написал?
  7. 14 function name(value) -tab->{ -tab->-tab->var a = 0, b =

    42; -tab->-tab->if (value) return a -tab->} Код разработчика А Б: А ты вообще табы используешь!
  8. 15 var name = function (value) { ....var a =

    0, ........b = 42; ....if (value) { ........return a; ....} }; Код разработчика Б А: Зачем тут скобка?
  9. 16 function name(value) -tab->{ -tab->-tab->var a = 0, b =

    42; -tab->-tab->if (value) return a -tab->} Код разработчика А Б: Уайтсмитс? Ты из какой пещеры вылез?
  10. 17 var name = function (value) { ....var a =

    0, ........b = 42; ....if (value) { ........return a; ....} }; Код разработчика Б А: Зачем тут точка с запятой?
  11. 18 function name(value) -tab->{ -tab->-tab->var a = 0, b =

    42; -tab->-tab->if (value) return a -tab->} Код разработчика А Б: А ты зачем перенос не поставил?
  12. 19 var name = function (value) { ....var a =

    0, ........b = 42; ....if (value) { ........return a; ....} }; Код разработчика Б А: RTFM or GTFO!
  13. 20 function name(value) -tab->{ -tab->-tab->var a = 0, b =

    42; -tab->-tab->if (value) return a -tab->} Код разработчика А Б: А в бубен?
  14. 21

  15. 23 Организационный профит Code Style •  Это закон –  Должна

    быть отдельная страница о которой все знают –  Страницу просто найти •  Закон разрешает конфликты –  Не знание закона не освобождает от ответственности •  Решает большинство проблем •  Эту страницу нужно дать прочитать перед началом работы
  16. 28 var name = function (value) { ....var a =

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

    0, ........b = 42; ....if (value) { ........return a; ....} }; Обобщение соседних элементов Перенос строки разрывает обобщение
  18. 30 .b-form { font-family: Arial; font-size: 2em; padding: 0 10px;

    min-height: 100px; } Обобщение соседних элементов Перенос строки разделяет разные типы CSS ствойств и обобщает соседние элементы
  19. 32 var name = function (value) { ....var a =

    0, ........b = 42; ....if (value) { ........return a; ....} }; Вертикаль – список var - список переменных
  20. 33 var name = function (value) { ..var a =

    0 ...., b = 42 ...., c = 42 ...., d = 42 ....; }; Вертикаль – список Coma-first style – его цель уменьшить число ошибок.
  21. 34 var name = function (value) { ..var a =

    0 ...., b = 42 ....c = 42 ...., d = 42 ....; }; Вертикаль – список Отсутствие запятых легко заметить
  22. 35 var a = ..{ b: 2 .., c: 3

    .., d: 4 ..} ..; Вертикаль – список Coma-first style для литералов Object https://gist.github.com/357981
  23. 37 .b-form { -webkit-transition: color; -moz-transition: color; -ms-transition: color; -o-transition:

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

    color; transition: color; } Вертикаль – список Выравнивание по значению Так проще прочитать
  25. 41 if (typeof a !== "undefined" && typeof b !==

    "undefined" && typeof c === "string") { // your stuff } Вертикаль – список Несколько условий – список
  26. 43 var name = function (value) { ....var a =

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

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

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

    100 ; i++ ){ } for (var i = 0; i < 100; i++){ } Разрядка, но без фанатизма Буря Мглою Небо Кроет vs Буря мглою небо кроет
  30. 49 <div class="b-header"></div> Однако не везде она работает В HTML

    перед и после равно пробел как правило не ставят
  31. 51 var name = function (value) { ....var a =

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

    0, ........b = 42; ....if (value) { ........return a; ....} }; Начало блока "видит" конец блока Код представляет из себя "параграфы текста"
  33. 54 <div class="b-header"> ....<div class="b-item"> ........Abc ....</div> ....<div class="b-item"> ........Abc

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

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

    символа var item = $('.b-item')[0]; if (item.innerHTML = "Abc") { // Недостижим }
  36. 59 var name = function (value) { ....var a =

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

    function (value) { } Точка с запятой в Function Expression SyntaxError: missing ; before statement
  38. 62 var name = function (value) { ....var a =

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

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

    0, ........b = 42; ....if (value) ........a = 42; ........return a; }; Скобки у циклов и условий Редкая логическая ошибка
  41. 66 var name = function (value) { ....var a =

    0, ........b = 42; ....if (value) { ........a = 42; ........return a; ....} }; Скобки у циклов и условий
  42. 67 var name = function (value) { ....var a =

    0, ........b = 42; ....if (value) return a; }; Скобки у циклов и условий Много скобок создает много шума
  43. 69 var name = function (value) { ....var a =

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

    0, ........b = 42; ....if (value) { ........return; ............{pewpew: a}; ....} }; Auto semicolon insertion После return будет поставлена ; http://es5.github.com/#x7.9
  45. 72 .b-form { box-shadow: 0 0 400px 200px #000; -webkit-box-shadow:

    0 0 400px 200px #000; } Свойства с префиксами в CSS
  46. 74 .b-form { -webkit-box-shadow: 0 0 400px 200px #000; box-shadow:

    0 0 400px 200px #000; } Свойства с префиксами в CSS Последним должен идти свойство без префикса http://pepelsbey.net/pres/pre-fixes/
  47. 76 Еще несколько слов… •  Документирование неявного кода –  Код

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

    •  У каждого проекта свой Code Style –  Страница в Вики –  Или CONTRIBUTE.md файл в корне проекта •  Есть стиль по умолчанию –  Страница в Вики со стилей по языкам –  Не обязательный – на случай если лень •  Стараемся использовать общепринятый –  Так проще новым разработчикам –  Привычней читать сторонний код •  Code Review –  Зависит от размера проекта –  Как правило новички проходят обязательно
  49. 80 Заключение •  Соглашение Code Style - Must have! • 

    Нужно знать меру –  Разрядка пробелами –  Фигурные скобки •  Все правила имеют на то причину
  50. 81