0 added
0 removed
Original
2026-01-01
Modified
2026-02-21
1
<p><a>#Руководства</a></p>
1
<p><a>#Руководства</a></p>
2
<ul><li>20 апр 2022</li>
2
<ul><li>20 апр 2022</li>
3
<li>0</li>
3
<li>0</li>
4
</ul><p>Крутой фреймворк для тех, кому трудно даётся этот чёртов чужой код. Или свой - после пары недель отдыха :)</p>
4
</ul><p>Крутой фреймворк для тех, кому трудно даётся этот чёртов чужой код. Или свой - после пары недель отдыха :)</p>
5
<p>Кадр: фильм "Миссия невыполнима: Племя изгоев"</p>
5
<p>Кадр: фильм "Миссия невыполнима: Племя изгоев"</p>
6
<p>Переводчик-фрилансер. Увлечён своей профессией. Переводит полезные статьи на разные темы - от IT до путешествий, урбанистики и социологии. Занимается лингвистическими исследованиями.</p>
6
<p>Переводчик-фрилансер. Увлечён своей профессией. Переводит полезные статьи на разные темы - от IT до путешествий, урбанистики и социологии. Занимается лингвистическими исследованиями.</p>
7
<p><strong>Об авторе</strong></p>
7
<p><strong>Об авторе</strong></p>
8
<p>Воплощает в жизнь проектные решения с помощью программирования.</p>
8
<p>Воплощает в жизнь проектные решения с помощью программирования.</p>
9
<p>Мало того, что чтение чужого кода - сложная задача, так она ещё и занимает больше времени, чем создание нового кода. Устраиваетесь на работу - и для начала вас просят изучить кодовую базу. Или дают чужой код и просят пофиксить баги. А может, добавить в него новую фичу. Бывает, что при выполнении подобных задач вы чувствуете себя слегка растерянно и неловко. А зря - кто обвинит вас в том, что вы не можете прочитать чужие мысли?</p>
9
<p>Мало того, что чтение чужого кода - сложная задача, так она ещё и занимает больше времени, чем создание нового кода. Устраиваетесь на работу - и для начала вас просят изучить кодовую базу. Или дают чужой код и просят пофиксить баги. А может, добавить в него новую фичу. Бывает, что при выполнении подобных задач вы чувствуете себя слегка растерянно и неловко. А зря - кто обвинит вас в том, что вы не можете прочитать чужие мысли?</p>
10
<p>Впрочем, даже в этом нелёгком деле нужно с чего-то начинать. В этой статье я поделюсь приёмами, которые помогают мне решить проблему.</p>
10
<p>Впрочем, даже в этом нелёгком деле нужно с чего-то начинать. В этой статье я поделюсь приёмами, которые помогают мне решить проблему.</p>
11
<p>Если код нужен для поискового компонента со сложной системой фильтров на фронтенде, разберитесь, как с этим компонентом взаимодействует пользователь и как он работает в интерфейсе. Попробуйте решить разные задачи и посмотрите, что из этого получится.</p>
11
<p>Если код нужен для поискового компонента со сложной системой фильтров на фронтенде, разберитесь, как с этим компонентом взаимодействует пользователь и как он работает в интерфейсе. Попробуйте решить разные задачи и посмотрите, что из этого получится.</p>
12
<p>Если код нужен для API поиска на бэкенде, который выдаёт результат в разных форматах в зависимости от параметров, начните с поиска допустимых параметров и посмотрите, как будет отличаться ответ API.</p>
12
<p>Если код нужен для API поиска на бэкенде, который выдаёт результат в разных форматах в зависимости от параметров, начните с поиска допустимых параметров и посмотрите, как будет отличаться ответ API.</p>
13
<p>Когда закончите экспериментировать, запишите всё, что вы хотите выяснить о реализации кода.</p>
13
<p>Когда закончите экспериментировать, запишите всё, что вы хотите выяснить о реализации кода.</p>
14
<p>У вас может получиться большой список вопросов, но не пытайтесь, разбирая этот треклятый код, найти ответы сразу на всё - решайте каждый вопрос по отдельности.</p>
14
<p>У вас может получиться большой список вопросов, но не пытайтесь, разбирая этот треклятый код, найти ответы сразу на всё - решайте каждый вопрос по отдельности.</p>
15
<p>Например, вы хотите понять, откуда на фронте берётся текущее поведение объекта, при котором первый фильтр влияет на второй, а второй - на следующий. Или как на бэкенде реализована механика, когда при нажатии на одну родительскую категорию товаров выдаётся вложенная подкатегория, а при нажатии на другие - плоская подкатегория.</p>
15
<p>Например, вы хотите понять, откуда на фронте берётся текущее поведение объекта, при котором первый фильтр влияет на второй, а второй - на следующий. Или как на бэкенде реализована механика, когда при нажатии на одну родительскую категорию товаров выдаётся вложенная подкатегория, а при нажатии на другие - плоская подкатегория.</p>
16
<p>Что бы вы ни проверяли, фокусируйтесь на том, чтобы разобраться, как именно достигается результат.</p>
16
<p>Что бы вы ни проверяли, фокусируйтесь на том, чтобы разобраться, как именно достигается результат.</p>
17
<p>Когда вы поигрались с конечным результатом, увидели, как код работает в пользовательском интерфейсе, и определили, что именно хотите выяснить, спускайтесь на уровень ниже. Если у репозитория логичная структура с понятными названиями папок и компонентов, вы безошибочно определите все нужные файлы.</p>
17
<p>Когда вы поигрались с конечным результатом, увидели, как код работает в пользовательском интерфейсе, и определили, что именно хотите выяснить, спускайтесь на уровень ниже. Если у репозитория логичная структура с понятными названиями папок и компонентов, вы безошибочно определите все нужные файлы.</p>
18
<p>Вы должны чётко понимать, за что отвечает каждая функция. Я предлагаю делать это последовательно:</p>
18
<p>Вы должны чётко понимать, за что отвечает каждая функция. Я предлагаю делать это последовательно:</p>
19
<p><strong>Посмотрите на юнит-тесты.</strong>Мне кажется, это самый простой способ понять, что делает каждая функция, - ведь юнит-тесты чётко описывают ввод-вывод и помогают подтвердить, что каждая функция выполняет именно то, что должна. Но юнит-тесты будут далеко не везде. Если вам не повезло или остались вопросы - переходите ко второму способу.</p>
19
<p><strong>Посмотрите на юнит-тесты.</strong>Мне кажется, это самый простой способ понять, что делает каждая функция, - ведь юнит-тесты чётко описывают ввод-вывод и помогают подтвердить, что каждая функция выполняет именно то, что должна. Но юнит-тесты будут далеко не везде. Если вам не повезло или остались вопросы - переходите ко второму способу.</p>
20
<p><strong>Просмотрите комментарии к каждой функции.</strong>Если над функцией в коде есть комментарии, изучите их. Но не верьте комментариям "на слово" - сравните, совпадает ли описание с тем, что происходит в коде на самом деле. Если же код совсем плохо сопровождался и в нём нет ни комментариев, ни тестов - переходите к третьему способу.</p>
20
<p><strong>Просмотрите комментарии к каждой функции.</strong>Если над функцией в коде есть комментарии, изучите их. Но не верьте комментариям "на слово" - сравните, совпадает ли описание с тем, что происходит в коде на самом деле. Если же код совсем плохо сопровождался и в нём нет ни комментариев, ни тестов - переходите к третьему способу.</p>
21
<p><strong>Сделайте логическое предположение и проверьте его.</strong>Если разработчик пишет код по правилам, то по имени функции должно быть понятно, что она делает. Функция с именем generateImageUrl обычно (но не всегда) выдаёт URL изображения. Из имени функции можно сделать разумное предположение, затем прочитать код и удостовериться, что она действительно выдаёт URL картинки.</p>
21
<p><strong>Сделайте логическое предположение и проверьте его.</strong>Если разработчик пишет код по правилам, то по имени функции должно быть понятно, что она делает. Функция с именем generateImageUrl обычно (но не всегда) выдаёт URL изображения. Из имени функции можно сделать разумное предположение, затем прочитать код и удостовериться, что она действительно выдаёт URL картинки.</p>
22
<p>Если же и это не помогло - пишите три письма, как тот сисадмин из анекдота :)</p>
22
<p>Если же и это не помогло - пишите три письма, как тот сисадмин из анекдота :)</p>
23
<p>Раз вы проверяете, как первая панель фильтра влияет на вторую, а вторая - на третью, можете смело пропускать функции, которые на этом этапе неактуальны, например generateImageUrl. Смотрите на те функции, которые относятся к вашей цели, - loadX, loadY, triggerSearch и так далее.</p>
23
<p>Раз вы проверяете, как первая панель фильтра влияет на вторую, а вторая - на третью, можете смело пропускать функции, которые на этом этапе неактуальны, например generateImageUrl. Смотрите на те функции, которые относятся к вашей цели, - loadX, loadY, triggerSearch и так далее.</p>
24
<p>Чтение кода - это не чтение книги. Нельзя прочитать код от начала до конца, думая, что он выполняется последовательно. Чтобы понять, что за чем следует, воспользуйтесь командой console.log.</p>
24
<p>Чтение кода - это не чтение книги. Нельзя прочитать код от начала до конца, думая, что он выполняется последовательно. Чтобы понять, что за чем следует, воспользуйтесь командой console.log.</p>
25
<ul><li>Для функции Х: console.log("I am at loadX").</li>
25
<ul><li>Для функции Х: console.log("I am at loadX").</li>
26
<li>Для функции Y: console.log("I am at loadY").</li>
26
<li>Для функции Y: console.log("I am at loadY").</li>
27
<li>Для функции Z: console.log("I am at loadZ").</li>
27
<li>Для функции Z: console.log("I am at loadZ").</li>
28
<li>Для функции triggerSearch: console.log("I am at triggerSearch").</li>
28
<li>Для функции triggerSearch: console.log("I am at triggerSearch").</li>
29
</ul><p>В итоге вы получите примерно такую последовательность: loadX → triggerSearch → loadY → triggerSearch → loadZ → triggerSearch, а может - такую: loadX → loadY → triggerSearch → loadZ → triggerSearch.</p>
29
</ul><p>В итоге вы получите примерно такую последовательность: loadX → triggerSearch → loadY → triggerSearch → loadZ → triggerSearch, а может - такую: loadX → loadY → triggerSearch → loadZ → triggerSearch.</p>
30
<p>Поняв workflow, изучите код нужных функций построчно. И обязательно логируйте все возможные пути и ветвления (if, else и другие) в пределах функций.</p>
30
<p>Поняв workflow, изучите код нужных функций построчно. И обязательно логируйте все возможные пути и ветвления (if, else и другие) в пределах функций.</p>
31
<p>Попробуйте проделать разные преобразования - например, воспользуйтесь методом happy flow или другими методами тестирования потока. Можно, например, начать поиск, не применяя фильтр, а потом применить только второй фильтр и так далее. Затем просмотрите журнал выполнения операций.</p>
31
<p>Попробуйте проделать разные преобразования - например, воспользуйтесь методом happy flow или другими методами тестирования потока. Можно, например, начать поиск, не применяя фильтр, а потом применить только второй фильтр и так далее. Затем просмотрите журнал выполнения операций.</p>
32
<p>Теперь у вас есть представление о том, как работает код.</p>
32
<p>Теперь у вас есть представление о том, как работает код.</p>
33
<p>Если даже после тщательного вычитывания кода по строкам я сталкиваюсь с чем-то неочевидным, то пытаюсь закомментировать такие строки и смотрю, к чему это приведёт и что сломается.</p>
33
<p>Если даже после тщательного вычитывания кода по строкам я сталкиваюсь с чем-то неочевидным, то пытаюсь закомментировать такие строки и смотрю, к чему это приведёт и что сломается.</p>
34
<p>Возможно, после этого не загрузятся какие-то чекбоксы в выпадающем списке фильтра. Зато теперь вы точно будете знать, какой фрагмент кода отвечает за эту операцию. А сейчас вернитесь к шестому пункту: теперь вы знаете, что делает этот фрагмент кода, а значит, сможете вычитать его более осознанно.</p>
34
<p>Возможно, после этого не загрузятся какие-то чекбоксы в выпадающем списке фильтра. Зато теперь вы точно будете знать, какой фрагмент кода отвечает за эту операцию. А сейчас вернитесь к шестому пункту: теперь вы знаете, что делает этот фрагмент кода, а значит, сможете вычитать его более осознанно.</p>
35
<p>На этом этапе я создаю случайную функцию, например createFilterLabels, которая задействует механики чужого кода. Так можно убедиться, что понял всё правильно.</p>
35
<p>На этом этапе я создаю случайную функцию, например createFilterLabels, которая задействует механики чужого кода. Так можно убедиться, что понял всё правильно.</p>
36
<p>На вопрос, как прокачать скилл чтения чужого кода, часто отвечают - больше практиковаться. Это, конечно, справедливо, но ещё лучше - читать код в правильной последовательности.</p>
36
<p>На вопрос, как прокачать скилл чтения чужого кода, часто отвечают - больше практиковаться. Это, конечно, справедливо, но ещё лучше - читать код в правильной последовательности.</p>
37
<a><b>Бесплатный курс по Python ➞</b>Мини-курс для новичков и для опытных кодеров. 4 крутых проекта в портфолио, живое общение со спикером. Кликните и узнайте, чему можно научиться на курсе. Смотреть программу</a>
37
<a><b>Бесплатный курс по Python ➞</b>Мини-курс для новичков и для опытных кодеров. 4 крутых проекта в портфолио, живое общение со спикером. Кликните и узнайте, чему можно научиться на курсе. Смотреть программу</a>