Структура кода
Нажми пробел чтобы продолжить
Стрелка вправо — для быстрой промотки
Что такое говнокод?
1. Трудно читать
2. Сложно отлаживать
3. Невозможно расширять
Почему это важно?
Новая "фича" на старом проекте
Пример
- рукопись романа "Война и мир"
- 4 тома, больше 1000 страниц текста
- автор давно умер, все тайное знание унес с собой
Что дано:
Задача #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
Универсальный способ структурирования кода
Задача
Добавить анимацию в виджет выбора автомобиля
- 1000 строк кода
- затейливая логика
Что дано:
С чего стоит начать?
1. Посмотреть модель данных
Чем определяется состояние (state) виджета?
- Выбранные марка, модель, год выпуска и модификация
- Загруженные каталоги: марки, модели, года выпуска и пр.
- Флаги ожидания ответа от сервера
- Флаг режима "выбор нового авто" vs "редактирование старого"
2. Посмотреть верстку
Как устроена верстка виджета?
- Какие элементы управления (controls) доступны пользователю?
- Где и какие прелоадеры отображаются?
- Где отображаются ошибки ввода?
Subtitle
Удобно когда описание модели данных собрано в одном месте/файле
Аналогично с версткой и её шаблонами - полезно собирать их в одном месте/файле
В этом и заключается Model View Pattern
Спагетти-код
JS. Организация кода
By Evgeny Evseev
JS. Организация кода
- 1,003