Еженедельная цель: Можете ли вы написать интерфейс, одностраничное приложение, используя только чистый JavaScript?
На этой неделе было немного утомительным, потому что на вершине изготовления приложения для одного страницы нам также не позволило использовать какие-либо библиотеки. Это включало библиотеки тестирования, которые означали, что мы должны были создать наши собственные.
1 день
Таким образом, в начале недели, я думаю, мы потратили немного времени, обернувшие головы вокруг всей идеи. Но был пример для тестирования, который помог обернуть голову вокруг его лучше. Наши тесты были простыми, но они сделали то, что они должны. После этого мы начали на главном проекте, который использует JavaScript «QuerySelectors» обновить страницу. Мы начали, создавая заметки прототипы, который хранит текст. После этого нам пришлось добавить их в прототип списка, а затем добавить функции для добавления и преобразования и возврата всех элементов списка как HTML.
День 2
Мы настроили HTML-страницу в два дня, а также настройки функции, которая меняет DOM (модель объекта документа). Затем мы сделали контроллер, чтобы мы могли получить список заметок, а затем использовать манипулирование DOM для изменения страницы, чтобы отобразить заметки. Мы видили эту функцию, которая означала, что мы должны были удалить все это, а затем перезагрузить с помощью TDD.
3 день
Мы начали три дня, создав один прототип примечания, который хранит одну ноту и имеет метод для возврата его с DIV, обернутым вокруг него. Мы столкнулись с парой ошибок, которыми нам удалось обработать, что на некоторое время боролись, но это было в основном просто синтаксические ошибки.
День 4.
Этот день был довольно интересным, потому что мы должны были вернуться в наш список записок и немного изменить его. Нам пришлось добавить идентификаторы для каждого из отображаемых элементов списка. Нам нужно было сделать это, чтобы мы могли получить доступ к каждому элементу, посмотрев свой идентификатор, чтобы в конечном итоге отображать только этот элемент. Нам пришлось добавить идентификаторы в Div в увеличении порядка, чтобы дать каждому товару уникальным я бы. Нам также пришлось изменить элементы списка на Якорные теги так что мы могли бы изменить URL. Таким образом, мы могли бы добавить слушатель события для хеш-изменений и использовать идентификатор из URL, чтобы отобразить соответствующую ноту.
5 день
Пятницы, как правило, медленный день, потому что это недалеко от конца недели, и мы делаем наш ретро в пятницу. Но нам все еще удалось пройти через шаг 10, который добавил форму для создания новых нот, которые прошли довольно плавно. Было весело видеть работу приложения без обновления страницы, что было всего намного быстрее в целом.
Резюме
Это была забавная неделя, в целом, увидев, что одно страница было интересно, и я вижу, что это очень полезно. Я думаю, что мои собственные тестирования с нуля были полезны, это помогло мне понять библиотеки тестирования лучше, но я не думаю, что это будет полезно в будущем, учитывая, что там уже есть тестирование библиотек. Мне очень понравилось на этой неделе, видя, какие одностраничные приложения могут сделать, и я чувствую, что добыл еженедельную цель так успешно.
Оригинал: “https://dev.to/kealanheena/makers-week-7-one-page-to-rule-them-all-1hnp”