1. Начните с результатов

Если этот код предназначен для компонента поиска Frontend со сложной системой фильтрации, начните с полного понимания того, как компонент работает, в первую очередь из пользовательского интерфейса. Попробуйте разные варианты, чтобы поиграть с компонентом – посмотрите, как он отреагирует.

Если этот код предназначен для Backend API, который возвращает разные форматы результатов для разных параметров, начните с поиска допустимых параметров разных типов и посмотрите, как ответ API отличается для каждого ввода.

Запишите, что вы хотите узнать о реализации, поигравшись с ней.

Это может быть список предметов, но сосредоточьтесь на чем-то одном, не отвлекайтесь – что вы хотели бы изучить в первую очередь?

Первое, что вы хотели бы изучить во внешнем интерфейсе, может быть текущее поведение, при котором первая полоса фильтра влияет на следующую полосу фильтра, которая влияет на следующую полосу фильтра.

Первое, что вы хотели бы изучить на бэкэнде, – это текущее поведение, когда, если мы помещаем элементы этой категории, он возвращает нам вложенную подкатегорию, а другие – плоскую подкатегорию.

Что бы вы ни хотели изучить в первую очередь, вы должны быть голодны, чтобы узнать, как это достигается.

2. Погрузитесь в нужные файлы, помня о цели

Теперь, когда вы понимаете, как это работает на высоком уровне, играя с конечным результатом и определили то, что вы хотели бы понять, увеличьте масштаб. Если репозиторий логически структурирован с правильным именованием папок и компонентов, вы должны быть в состоянии войти в нужный файл (ы) в кратчайшие сроки.

3. Получите общий обзор функций с файлом (-ами) и сначала посмотрите на них как на черные ящики.

Вы должны иметь общее представление о том, что делает каждая функция. 3 способа, которыми мы бы воспользовались в порядке приоритета:

# 1 Посмотрите на модульные тесты, если применимо

Мы считаем, что это самый простой способ понять, что делает функция, потому что она определяет ввод и вывод – утверждение, что функция делает то, что от нее требуется.

# 2 Ищите комментарии над каждой функцией, если применимо

Если есть комментарии над каждой функцией в коде, проверьте, что в комментариях говорится о том, что она делает, против того, что, по-видимому, делает код, прежде чем принимать то, что в комментариях говорится, что она делает, как полную правду!

# 3 Без модульного теста, без комментариев, сделайте расчетное предположение и проверьте его

Если разработчик следует соглашениям о кодировании, имя функции обычно буквальное. Функция с именем generateImageUrl обычно генерирует URL-адрес изображения. Затем вы можете сделать разумное предположение из имени функции, прочитать код и убедиться, что он действительно создает URL-адрес изображения.

4. Выделите функции, которые достигают поставленной цели, и пропустите остальные.

Поскольку вы смотрите на то, как все сочетается – в частности, как первая полоса фильтра влияет на следующую полосу фильтра, которая влияет на следующую полосу фильтров, нерелевантные функции, такие как generateImageUrl, можно удобно пропустить в этот момент. Вы будете рассматривать специфичные для цели функции, такие как loadX, loadY, triggerSearch и т. д.

5. Проследите последовательность выполнения соответствующих функций.

Чтение кода не похоже на чтение книги: вы не можете читать сверху вниз и ожидать, что выполнение кода будет линейным. Вы можете узнать последовательность через простой console.log в каждой функции

В функции X console.log («Я на loadX»)

В функции Y console.log («Я loadY»)

В функции Z console.log («Я на loadZ»)

В функции triggerSearch console.log («Я на triggerSearch»)

Получите последовательность выполнения, может быть, loadX -> triggerSearch -> loadY -> triggerSearch -> loadZ -> triggerSearch, или, может, его loadX -> loadY -> triggerSearch -> loadZ -> triggerSearch.

6. Глубокое погружение в каждую функцию и пошаговое руководство

Теперь, когда мы разобрались с потоком, прочитали коды функции построчно. Опять же, ведите много журналов во всех возможных потоках (if, else и т. д.) внутри функций.

Попробуйте разные перестановки – счастливый поток и все альтернативные потоки, которые вы только можете придумать. Возможно, вы просто щелкните поиск перед любым фильтром, используя только второй фильтр и т. д., а затем изучите, как код проходит через журналы.

Теперь вы хорошо понимаете, как это работает.

7. Вы можете столкнуться с логикой, которую не сможете понять даже после прохождения.

Это когда мы буквально комментируем эти коды и смотрю, какая разница – что в результате ломается.

Возможно, параметры в раскрывающемся списке фильтров не заполняются в результате изменения, теперь вы знаете, что за это отвечает фрагмент кода. Теперь вернитесь к шагу 6, вы сможете увидеть вещи немного по-другому, учитывая, что вы знаете, что делает этот кусок кода.

8. Напишите соответствующую функцию, чтобы подтвердить ваше понимание

Это когда мы создаем случайную функцию, например createFilterLabels, которая использует реализацию панели фильтров. Когда вы действительно можете что-то сделать с кодом, вы, вероятно, понимаете это достаточно.

Когда люди говорят о том, чтобы стать лучше в «чтении чужого кода», правильным ответом с технической точки зрения будет «практиковать больше», но как насчет «практиковать больше» в структурированной среде?

Товарищи-программисты, дайте нам знать, как вы читаете чужой код, и мы были бы рады попробовать их в следующий раз, когда прочитаем чужой код!