Структура кода

Нажми пробел чтобы продолжить

Стрелка вправо — для быстрой промотки

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

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.js

Функции

Классы

Модуль api.js

...

Основной управляющий код - main.js

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

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

Model View Pattern

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

Задача

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

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

Что дано:

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

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

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

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

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

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

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

Subtitle

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

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

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

Спагетти-код

JS. Организация кода

By Evgeny Evseev

JS. Организация кода

  • 1,003