Что такое говнокод?

1. Трудно читать

2. Сложно отлаживать

3. Невозможно расширять

Почему это важно?

Новая "фича" на старом проекте

Пример

1. рукопись романа "Война и мир"
    
2. 4 тома, больше 1000 страниц текста
    
3. автор давно умер, все тайное знание унес с собой

Что дано:

Задача #1

Изъять из книги Пьера Безухова

Читатели не понимают этого персонажа, адаптируем роман.

Издатель дал вам три дня на подготовку к запуску в тираж

Задача #2

Переместить место действия в Южную Америку

Роману не достает экзотики, книга плохо продается

Издатель согласился с тем что задача сложна и объемна. Поэтому срок - конец следующей недели

Вывод

Не всякий код поддается внесению изменений!

И если не предпринимать усилий то все стремительно скатывается к говнокоду

Как с этим жить?

Понятные названия у всего

let r = 6500

let data = []

let item = null

function update(){...}

let earthRadius = 6500

let usersOnline = []

let cardItem = null

function updateMarkup(){...}

Плохо:

Хорошо:

На английском

let zapros = null

let polzovatel = auth(...)

function dobavitOdin(){...}

let request = null

let user = auth(...)

function incrementByOne(){...}

Плохо:

Хорошо:

Без магии

return stmp + 7200

let secsInTwoHours = 60 * 60 * 2

return timestamp + secsInTwoHours

Плохо:

Хорошо:

Избирательный try catch

try {
  // do some job
  // ...
  let cars = JSON.parse(response)
  // ...
} catch (error) {

  return []
}

try {
  // do some job
  // ...
  let cars = JSON.parse(response)
  // ...
} catch (error) {

  if (error instanceof SyntaxError)
     return []

  throw err;
}

Плохо:

Хорошо:

Замыкания. Пример 1

var countCall = (function() {
   var numberOfCalls = 0

   return function() {
      return ++numberOfCalls
   }

})();

countCall()

Замыкания. Пример модуля

var CountingModule = (function() {
   var numberOfCalls = 0

   return {
      countCall: function() {
        return ++numberOfCalls
      },
      getCount: function() {
        return numberOfCalls
      }
   }
})();

CountingModule.countCall()
CountingModule.getCount()

Без глобальных переменных

Декомпозиция кода

...

И это лишь самый минимум !

Чем сложнее проект, тем  больше ограничений вводится на код

Model View Pattern

Универсальный способ структурирования кода

Задача

Добавить анимацию в виджет выбора автомобиля

1. 1000 строк кода
    
2. затейливая логика

Что дано:

С чего стоит начать?

1. Посмотреть модель данных

Чем определяется состояние (state) виджета?

1. Выбранные марка, модель, год выпуска и модификация
    
2. Загруженные каталоги: марки, модели, года выпуска и пр.
    
3. Флаги ожидания ответа от сервера
    
4. Флаг режима "выбор нового авто" vs "редактирование старого"

2. Посмотреть верстку

Как устроена верстка виджета?

1. Какие элементы управления (controls) доступны пользователю?
    
2. Где и какие прелоадеры отображаются?
    
3. Где отображаются ошибки ввода?

Subtitle

Удобно когда описание модели данных собрано в одном месте/файле

Аналогично с версткой и её шаблонами - полезно собирать их в одном месте/файле

В этом и заключается Model View Pattern