Мы выпустили основную версию 4 библиотеки макетов с открытым исходным кодом NAVER InfiniteGrid.
InfiniteGrid - это модуль, используемый для бесконечного упорядочивания элементов в соответствии с типом сетки. Этот модуль позволяет реализовать разные сетки из разных элементов карты разного размера. Это также обеспечивает производительность, сохраняя только DOM видимой области.
Ключевые слова, выделенные в этом крупном обновлении: Виртуальный и Авто. Он был разработан с целью устранения невидимых областей с помощью Виртуального или с помощью Авто для решения условных действий, которые сложно использовать пользователям.
Вот основные изменения в InfiniteGrid v4:
Обработка невидимых участков
InfiniteGrid поддерживает только DOM видимой области и удаляет DOM невидимой области, чтобы отображать элементы на неопределенный срок, гарантируя при этом производительность. Размер элементов в видимой области можно вычислить, но размер элементов в невидимой области неизвестен, поэтому была изменена только видимая область. Но если я перемещаю только видимую область, положение прокрутки будет неправильным, а в случае MasonryInfiniteGrid верхняя часть будет неровной при достижении невидимой области.
Итак, чтобы решить эту проблему, в версии 4 мы решили переставить все, даже если размер неизвестен. Поскольку этот метод поддерживает виртуальную область, также возможна прокрутка. Это наиболее эффективно, если размер предмета не меняется.
Поддержка нового заполнителя метода загрузки
В существующем методе загрузки его можно было разместить внизу с помощью кнопок «Вращение», «Ход выполнения» и «Точки». Если сетка может быть размещена заранее через виртуальный элемент до того, как этот элемент будет добавлен, область прокрутки может быть сохранена, и это может быть выражено, что загрузка выполняется более эффективно.
Кроме того, если вы объедините метод восстановления статуса и заполнитель, который будет представлен позже, вы сможете эффективно выразить загрузку в невидимой области.
Поддерживает восстановление статуса, которое отображается так же, как и раньше
Когда вы переходите на следующую страницу и возвращаетесь, вы хотите видеть ее такой, какой она была до того, как вы перешли. Для этого мы используем метод сохранения и восстановления статуса с использованием файлов cookie, хранилища, сохранения и т. Д. Кроме того, предоставляется метод для сохранения всего статуса или только отображаемой области, поскольку это обременительно, поскольку емкость велика, когда есть много предметов.
Однако, поскольку этот метод не имеет информации о невидимой области, информация о прокрутке и размещение сетки могут стать странными. Таким образом, в версии 4 элементы в невидимой области могут получать статус с минимальной информацией.
Кроме того, невидимая область может быть заменена заполнителями до тех пор, пока данные не будут восстановлены, с сохранением области прокрутки и размещением сетки.
Поддерживает динамические свойства.
InfiniteGrid имеет различные свойства, изменяющие дизайн. Раньше свойства могли быть установлены только при инициализации и не могли быть изменены после этого, поэтому он не мог реагировать на отзывчивый дизайн. Поддерживая динамические свойства в версии 4, он может реагировать на различные среды.
InfiniteGrid поддерживает фреймворки React, Vue 2, Vue 3, Angular и Svelte и готовится к их использованию.
InfiniteGrid v4 был улучшен, чтобы сделать его еще более удобным для пользователя на основе отзывов пользователей и проблем. В будущем мы планируем и дальше улучшать детали, которые можно решить с помощью Virtual и Auto. Также запланирован тест e2e, где отдельные тесты тестируются во всех фреймворках, чтобы сделать библиотеку более стабильной.
Если вы предложите какие-либо неудобства или необходимые функции во время использования, будет очень полезно разработать библиотеку, поэтому я был бы признателен, если бы вы могли написать проблему.
Ваш ⭐️ очень силен для нас. 🙏
