这个要求是否适合JS的某些设计模式 [英] Can this requirement fit in some design pattern for JS

问题描述

我们假设一个UI，目前我们向学生展示瓷砖的详细信息。每个学生一个瓦片。现在我们需要重构代码以支持新的需求。新的要求是根据不同类型的排序更改这些图块的顺序 - 按学生的姓名排序，按学生的成绩排序，按年龄排序等。此处，用户在运行时间选择排序标准UI&用户应该能够在需要时更改排序标准。



现在，我们有一个包含学生数据的对象列表，其中包含要显示的所需信息。瓷砖。我们没有在改变瓷砖的顺序上做任何逻辑。按照我们从其他服务获得的顺序显示它们。要更改切片的顺序，我需要相应地更改这些对象的顺序，因为我们根据这些对象的顺序渲染切片。



总结要求 -

•用户应该能够根据运行时的不同标准进行排序。将向用户显示几个排序标准。 
•用户应该能够切换到任何排序标准或随时返回未排序状态。 
•将来排序标准可能很多。没有限制。 
•所有这些都在JS中实现。

我正在考虑这个优化 -

•由于用户可以随意去任何州，我不会当用户多次选择相同的排序标准时，我们不想调用我们的排序框架。它应该是第一次调用&后来，如果他回到相同的排序标准，我们不应该再次调用我们的框架给我们排序的顺序。相反，我们应该在第一时间将它存储在某处。继续使用它。例如。 - 假设我们以未排序的顺序渲染了瓷砖。用户选择按年龄排序选项。我们称之为框架&根据其输出显示重新排序的图块。现在用户选择其他一些排序标准，让我们说按等级排序&我们再次称呼我们的框架&基于此重新排序瓷砖。现在用户再次选择按年龄排序选项。现在我们不应该再调用我们的排序框架来再次根据这个标准进行排序，以便给出结果。相反，我们应该首先将这些数据保存在某处，以便可以重复使用。



同时创建排序框架&仅归我们所有。因此，我们可以灵活地决定输入和输入的类型。输出到框架。但是关于排序逻辑&设计，让我们认为它是一个黑盒子，因为我已经决定使用装饰模式。

但是看起来功能方面的代码更改将会变得混乱，因为新的排序要求的可能性是无穷无尽的&安培;我们必须保持每个对象状态的可重用性。我在几个问题上集思广益，比如

•How&将排序标准存储到其相应数据的位置，该数据将成为排序框架的输入。例如。 - 假设我想根据年龄进行排序。我需要获取这些数据&为每个学生制作一个为年龄排序标准的地图。所以，我会创建一个Map< Student，Map< SortCritria，relatedData>>这是一种简单的方法，但是可以有更简洁的方法，因为排序标准可以很多。此外，最大的问题是这个逻辑应放在何处

•排序框架的输出应该是什么。它应该将< oldIndex返回到newIndex> map还是< uniqueStudentId返回newIndex>映射或其他任何内容。
•我是否应该在（例如，存储）我们的功能和排序框架之间引入新层或
•对象状态应该存储在框架中还是存储在功能代码库中。 。

我正在寻找一种干净的方法或设计模式，所有这些要求都适合。任何建议都将非常感谢。

谢谢



我尝试了什么：



我能够在没有任何设计模式的情况下实现这一目标& the代码看起来非常混乱。我正在寻找一种更清洁的方法。

解决方案

您可以使用像 Knockout JS 这样的框架，这将使您的代码更加清洁。

淘汰赛优惠可观察数组可以通过其他方式进行排序和操作，请在此处阅读： Knockout：Observable Arrays [ ^ ]。

当然还有其他框架，这里有一个概述： https://www.slant.co/topics/3706/~javascript-libraries-for-building-a-ui-with-data-binding-support [ ^ ]



如果您想了解原始GOF设计模式的概述，D Zone有一个很好的refcard，可以免费下载（登录后）： https://dzone.com/refcardz / design-patterns？chapter = 1 [ ^

Let’s assume a UI where currently we show students details on tiles. One tile per student. Now we need to refactor our code to support a new requirement. The new requirement is to change the order of those tiles based on different kind of sorting like – sort by student’s names, sort by student’s grades, sort by their age etc. Here, the sorting criteria will be selected by user on the run time through UI & user should be able to change the sorting criteria whenever he requires.

Right now, we have a list of objects containing student data which contains the required information to show on the tiles. We don’t put any logic on changing the order of tiles & show them in the same order we get it from some other service. To change the order of tiles, I would need to change the order of those objects accordingly because we render tiles on the basis of order of those objects.

Summarizing the requirements –

• 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.

I am considering this optimization as well–
• 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.

Sorting framework is also being created at the same time & is owned by us only. So, we have flexibility to decide the type of inputs & outputs to the framework. However regarding the sorting logic & design, let’s consider it a black box since there I have already decided to go with decorator pattern.
But looks like code changes on the feature side is going to be messy since possibilities for new sorting requirements is endless & we have to maintain the object states of each for reusability. I am brainstorming on several questions like

• 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.

I am looking for a clean approach or a design pattern where all these requirements can fit in. Any suggestions would be greatly appreciated.
Thanks

What I have tried:

I am able to achieve this without any design pattern & the code looks very messy. I am looking for a cleaner approach now.

解决方案

You could use a framework like Knockout JS, which will make your code a lot cleaner.
Knockout offers Observable Arrays which can be sorted and manipulated in other ways, read about it here: Knockout : Observable Arrays[^].
Of course there are other frameworks, here is an overview: https://www.slant.co/topics/3706/~javascript-libraries-for-building-a-ui-with-data-binding-support[^]

If you want an overview of the original GOF design patterns, DZone has a nice refcard which can be downloaded for free (after sign in): https://dzone.com/refcardz/design-patterns?chapter=1[^]

这篇关于这个要求是否适合JS的某些设计模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！