omgdog Ответов: 1

Может ли это требование вписаться в какой-то шаблон проектирования для JS


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

Прямо сейчас у нас есть список объектов, содержащих данные учащихся, которые содержат необходимую информацию для отображения на плитках. Мы не ставим никакой логики в изменение порядка плиток и показываем их в том же порядке, в каком мы получаем его от какого-то другого сервиса. Чтобы изменить порядок плиток, мне нужно было бы соответствующим образом изменить порядок этих объектов, потому что мы визуализируем плитки на основе порядка этих объектов.

Обобщение требований –
• User should be able to sort on the basis of different criteria on the run time. Several sorting criteria will be shown to the user.
• User should be able to switch to any sorting criteria or go back to unsorted state at any time.
• Sorting criteria can be many in future. There is no limit to that.
• All this to be implemented in JS.
Я тоже рассматриваю эту оптимизацию–
• Since user can go to any state on his will, I don’t want to call our sorting framework when user is selecting same sorting criteria multiple times. It should be called for the first time only & later if he comes back to same sorting criteria, we shouldn’t be calling our framework again for giving us the sorted order. Instead we should store it somewhere on the first time & keep on using it later on. Eg. - Let say we rendered the tiles in unsorted order. User selects “sort by age” option. We call our framework & show the reordered tiles on the basis of its output. Now user selects some other sort criteria let say “sort by grade” & we call our framework again & reorder tiles based on that. Now user again selects “sort by age” option. Now we shouldn’t be calling our sort framework to sort on the basis of this criteria again to give us the results. Instead we should have saved this data somewhere in the first place so that it can be reused.

Сортировочный фреймворк также создается в то же время и принадлежит только нам. Таким образом, у нас есть гибкость в выборе типа входных и выходных данных для фреймворка. Однако что касается логики сортировки и дизайна, давайте рассмотрим его как черный ящик, так как там я уже решил пойти с шаблоном декоратора.
Но похоже, что изменения кода на стороне функций будут беспорядочными, так как возможности для новых требований сортировки бесконечны, и мы должны поддерживать состояния объектов каждого из них для повторного использования. Я провожу мозговой штурм по нескольким вопросам, таким как
• How & Where to store the "sort criteria" to its corresponding data which is going to be the input of the sorting framework. Eg. – Let say I want to sort on the basis of age. I would need to get this data & make a map of "sorting criteria to age" for each student. So, I would create a "Map<Student, Map <SortCritria, respectiveData> > This is straightforward approach but can there be any cleaner approach since sort criteria can be many. Also, the big question is where should this logic be placed

• What should be the output of sorting framework. Should it return <oldIndex to newIndex> map or <uniqueStudentId to newIndex > map or anything else.
• Should I introduce a new layer between (eg. Store) our feature & sorting framework or
• should object states be stored in framework or in the feature code base. Etc.
Я ищу чистый подход или шаблон дизайна, в котором все эти требования могут вписаться. Любые предложения будут весьма признательны.
Спасибо

Что я уже пробовал:

Я могу добиться этого без какого-либо Шаблона дизайна, и код выглядит очень грязным. Сейчас я ищу более чистый подход.

1 Ответов

Рейтинг:
0

RickZeeland

Вы могли бы использовать такой фреймворк, как Нокаут JS, что сделает ваш код намного чище.
Нокаут предлагает Observable Arrays которые можно сортировать и манипулировать другими способами, читайте об этом здесь: Нокаут : Наблюдаемые Массивы[^].
Конечно, есть и другие фреймворки, вот обзор: https://www.slant.co/topics/3706/~javascript-библиотеки-для-построения-пользовательского интерфейса-с-привязкой-данных-поддержка[^]

Если вы хотите обзор оригинальных шаблонов проектирования, DZone имеет приятный refcard которые можно скачать бесплатно (после регистрации в): https://dzone.com/refcardz/design-patterns?chapter=1[^]