Вам понадобятся алгоритмические навыки, чтобы решить этот реальный случай

Под капотом

История начинается на прошлой неделе. Я получил техническое задание на постоянную работу в рамках собеседования.

Я не привожу здесь все задание, но постановка задачи — это сценарий из реальной жизни, и именно с ним мы сегодня поиграем.

Вопрос

У вас есть один файл JSON, представляющий файловую систему любого каталога в мире.

Теперь вопросы вращаются вокруг этого JSON

Каждый вопрос будет представлять этапы игры.

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

Первый этап

Показать файловую структуру в виде дерева на экране из JSON

Как вы будете перебирать JSON и отображать его на веб-сайте так же, как Javascript DOM или двоичное дерево?

Дерево должно содержать все каталоги и папки, упомянутые в файловой структуре.

Дерево должно иметь функциональные возможности аккордеона, как и любая папка с файлами, которую вы видите в браузере.

Второй этап

Свернуть/развернуть каталоги

Определите метод для сворачивания и развертывания всех каталогов.

Третий этап

Добавить функцию удаления файла/папки

Напишите функцию javascript для удаления файла/папки из описанного выше JSON.

Четвертый этап

Изменить имя любого файла/папки

Как вы будете обновлять имя любого из файлов/папок,

Этап пятый

Создать новый файл/папку для любой позиции

Как вы добавите новый файл/папку в нужную позицию, например, внутри компонентов имени каталога или в корневом каталоге?

Последний этап — этап шестой

Добавьте функцию перетаскивания в файловую структуру.

У вас есть дочерний ключ в файловой структуре, которая представляет собой массив. Теперь определите способ перемещения элементов этого массива в позицию, указанную в качестве входного параметра.

Это не конец

Как только это ЗАВЕРШЕНО, вы успешно завершили ИГРУ.

Но это не то, почему эта ИГРА разработана.

Теперь, когда вы написали каждый метод, просто преобразуйте эти методы в код React.

Meaning пишет каждый метод на любом удобном для вас языке интерфейса или фреймворке, и ваш собственный редактор CODE готов, как и codeandbox.

Если вам интересно, как это вообще возможно, просто ПОПРОБУЙТЕ это самостоятельно.

Передовой

В более продвинутой версии, безусловно, будет больше этапов.

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

Редактор должен позволять разработчикам редактировать содержимое, сохранять весь JSON и отправлять его обратно на сервер.

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

Но я должен, конечно, закончить только здесь.

Ура
Шрей
iHateReading

Дополнительные материалы на PlainEnglish.io.

Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .