我遇到了一个棘手的问题。我有一个网页，上面有很多按钮需要在不同的点禁用和启用。现在，如果这是一个 Swing(或与此相关的任何其他桌面 UI 界面)，那将是非常微不足道的:我只需为我感兴趣的模型更改添加监听器并相应地更新 UI。
这真的是基本的 MVC 东西。
问题是，对于如何在 Javascript 中很好地处理这个问题，我有点不知所措。我正在沿着一条路线走下去，最终会得到一些真正的意大利面条代码，其中按钮的点击监听器正在更新 UI 控件，但结果不会很好。
编辑:让我给你一个更具体的例子。
示例
想象一个列出未结订单的屏幕。这些订单显示在一个表格中，因为每一行(订单)都有针对它的多个属性，例如谁当前管理订单、谁下了订单、它的用途、下订单的时间和订单状态。
我这样做是为了让您可以通过单击行来选择这些订单中的一个(或多个)。这会添加一个“selected”类，它会更改样式，就像列表一样。
至于行为，如果用户选择一个订单，则某些操作可用，例如打开订单(查看详细信息)、取得所有权、取消等。订单的属性也可能影响可用的操作，例如，如果订单已被其他人“拥有”，则某些操作将被禁用。
如果您选择了多个订单，其中一些选项(例如打开订单)将不可用。
此外，通过后台 Ajax 调用，列表会定期刷新新订单。用户还可以单击刷新或过滤订单(按名称、日期范围等)，然后重新加载订单。重新加载订单时，某些按钮会被禁用。
我本来打算做第二个例子，但我认为这个例子足够复杂，无法说明问题类型。现在我已经通过提供各种控件类开始了。例如，当选择一个项目时，具有“select”类的元素可能被禁用/启用/设置样式。
现在这在简单的情况下工作得相当好，但我遇到了控件状态取决于多个条件的问题。此外，这些类也因某些元素想要设置样式、某些控件想要禁用/启用以及在某些情况下这两种情况都需要发生而变得支离 splinter 。
在 Swing 中，我倾向于通过一种 updateUI() 方法来处理此类事情，只要相关控件或模型的状态发生更改，就会调用该方法。然后它将明确设置所有控件的状态。现在这可以说不是最有效的方法(例如，如果您有 30 个控件并且只需要更新其中一个，这有点浪费)但我发现这种简单性是值得的。另一种选择是，控件/模型最终会得到太多关于它们所依赖的控件或那些依赖它们的控件的信息。从耦合的 Angular 来看，它变得很困惑。
但我在 Javascript 中没有这种(明显的)机制。 jQuery 提倡的 Inobtrusive Javascript 很棒，因为它可以阻止随机代码片段散落在您的代码中。但我需要更进一步 nad 有一些方法来管理它的复杂性(因为它是一个相当复杂的屏幕，只会变得更复杂)。
最佳答案
如果您想保持理智，请使用状态机。
您并没有真正详细说明您的用户界面的功能，所以我将编一个例子。假设您有一个文件上传页面。用户应该能够选择一个文件，单击上传按钮，然后在上传完成后返回到他们来自的页面。所以你可以有三种状态，“SelectFile”，“Uploading”，“Finished”。在“SelectFile”状态下，应该启用控件以允许用户选择文件。在“正在上传”状态下，这些控件应该被禁用，用户应该看到一个进度指示器。在“已完成”状态下，应重定向用户。
当然，听起来你的情况更复杂，但同样的想法也适用。如果部分用户界面交互，您可能需要多个状态机。没关系。
当您想要更改用户界面上启用/禁用的元素时，只需更改状态机的状态即可。状态机本身告诉各种用户界面控件根据当前状态更新自己。您可以使用 Bharani 的(好的，赞成票)关于使用类来执行此操作的建议。或者任何适合您的机制。
好处是控件不再相互交互。它们只与状态机交互。因此，您可以摆脱所有状态不正确地反弹或无休止地递归的情况。
关于javascript - Javascript/jQuery 中类似 MVC 的 UI 更新 : best practices?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/581033/