Сразу скажем, что здесь мы начнем разбирать уже со второго шага, так как первый разобрали у нас в телеграме.
Вот тут пост. Переходите и даже можете подписаться! Там много интересного.
Чтож, начнем.
Как не сойти с ума, разбирая чужой код: 1+7 простых шагов
ШАГ 2: Открывайте только нужные вам файлы
Когда вы поигрались с конечным результатом, увидели, как код работает в пользовательском интерфейсе, и определили, что именно хотите выяснить, спускайтесь на уровень ниже. Если у репозитория логичная структура с понятными названиями папок и компонентов, вы безошибочно определите все нужные файлы.ШАГ 3: Разберитесь, что делают функции, и протестируйте их методом черного ящика
Вы должны чётко понимать, за что отвечает каждая функция. Предлагаем делать это последовательно:Посмотрите на юнит-тесты.
Это самый простой способ понять, что делает каждая функция, — ведь юнит-тесты чётко описывают ввод-вывод и помогают подтвердить, что каждая функция выполняет именно то, что должна. Но юнит-тесты будут далеко не везде. Если вам не повезло или остались вопросы — переходите ко второму способу.Просмотрите комментарии к каждой функции.
Если над функцией в коде есть комментарии, изучите их. Но не верьте комментариям «на слово» — сравните, совпадает ли описание с тем, что происходит в коде на самом деле. Если же код совсем плохо сопровождался и в нём нет ни комментариев, ни тестов — переходите к третьему способу.Сделайте логическое предположение и проверьте его.
Если разработчик пишет код по правилам, то по имени функции должно быть понятно, что она делает. Функция с именем generateImageUrl обычно (но не всегда) выдаёт URL изображения. Из имени функции можно сделать разумное предположение, затем прочитать код и удостовериться, что она действительно выдаёт URL картинки.ШАГ 4: Сконцентрируйтесь на нужных функциях и игнорируйте все остальные
Раз вы проверяете, как первая панель фильтра влияет на вторую, а вторая — на третью, можете смело пропускать функции, которые на этом этапе неактуальны, например generateImageUrl. Смотрите на те функции, которые относятся к вашей цели: loadX, loadY, triggerSearch и так далее.ШАГ 5: Отследите последовательность действий в нужных функциях
Чтение кода — это не чтение книги. Нельзя прочитать код от начала до конца, думая, что он выполняется последовательно. Чтобы понять, что за чем следует, воспользуйтесь командой console.log.- Для функции Х: console.log("I am at loadX").
- Для функции Y: console.log("I am at loadY").
- Для функции Z: console.log("I am at loadZ").
- Для функции triggerSearch: console.log("I am at triggerSearch").
В итоге вы получите примерно такую последовательность: loadX → triggerSearch → loadY → triggerSearch → loadZ → triggerSearch, а может — такую: loadX → loadY → triggerSearch → loadZ → triggerSearch.
ШАГ 6: Тщательно проанализируйте каждую функцию и пройдитесь по каждой строке кода
Попробуйте проделать разные преобразования — например, воспользуйтесь методом happy flow или другими методами тестирования потока. Можно, например, начать поиск, не применяя фильтр, а потом применить только второй фильтр и так далее. Затем просмотрите журнал выполнения операций.
Теперь у вас есть представление о том, как работает код.
ШАГ 7: Закомментируйте фрагмент кода, если его логика не совсем ясна
Если даже после тщательного вычитывания кода по строкам я сталкиваюсь с чем-то неочевидным, то пытаюсь закомментировать такие строки и смотрю, к чему это приведёт и что сломается.
Возможно, после этого не загрузятся какие-то чекбоксы в выпадающем списке фильтра. Зато теперь вы точно будете знать, какой фрагмент кода отвечает за эту операцию. А сейчас вернитесь к шестому пункту: теперь вы знаете, что делает этот фрагмент кода, а значит, сможете вычитать его более осознанно.
ШАГ 8: Напишите дополнительную функцию, чтобы проверить свои догадки
На этом этапе создайте случайную функцию, например createFilterLabels, которая задействует механики чужого кода. Так можно убедиться, что вы поняли всё правильно.
Заключение
На вопрос, как прокачать скилл чтения чужого кода, часто отвечают — больше практиковаться. Это, конечно, справедливо, но ещё лучше — читать код в правильной последовательности.