用于集中导航的清洁设计？

Question

上下文

单页/ ajax web应用程序

基本代码结构

LocationManager (负责更新浏览器哈希并将应用程序位置切换到不同的块)

页面/Tile Flow

基本信息>家庭信息>车辆信息>购买选项>审查订单>输入付款并提交

问题

当用户从“购买选项”导航到“审阅订单”时，将进行长时间(5-8秒)的服务调用来计算订单详细信息。在调用的解析后，回调被设计为导航用户查看订单页面。问题是，如果用户在这段时间内单击回发并返回到time，一旦调用解决，它们将被“自动”地带到Review Order中。非常尴尬的用户体验。

限制

取消呼叫不是一种选择。需要一个解决方案来处理导航。

当前提议的实现

在进行currentLocation调用之前保存“calculateOrder”。将回调中的"currentLocation“作为intendedStartingPoint传递给setLocation方法。内部setLocation方法if(intendedStartingPoint === Locationmanager.currentLocation) {//Navigate}

总之，如果用户在调用进行时更改了位置，则根据调用的解析，我们将不会导航，因为用户不希望在此时被导航到审查顺序。

这很管用对吧？

捕获

在这个应用程序中，我们有许多地方可以在回调中调用setLocation，以便进行长时间的调用。这意味着我必须用一个新的参数intendedStartingPoint更新所有的intendedStartingPoint调用。虽然这对我来说是有意义的，但它看起来确实有可能变得有点混乱。

对如何清理和集中它有什么想法吗？

Answer 1

因此，现在用户可以单击购买选项页面上的计算按钮。然后显示某种加载指示符(希望如此)，并将异步请求发送到带有setLocation('ReviewOrder')的服务器。在应用程序中有很多地方使用这种模式。

重定向的问题(从用户的角度来看)是存在的，因为使用这种方法，服务器数据检索和UI导航是耦合的。想到的一个解决方案是将它们解耦，并从所有长时间运行的请求延续中删除setLocation调用。它可以按以下方式工作。

当用户单击“计算”按钮时，您将启动一个异步请求，同时立即导航到“评审顺序”页面(从UX的角度来看，这一点很重要，因为用户现在清楚地了解“计算”按钮导航到“审查顺序”)。在“评审订单”页面上，显示一个加载指示符，上面写着“请稍候，大约10秒钟后……”当请求完成时，隐藏加载指示符并显示数据。

这样，您的用户就会有一个一致的UX，知道每当他们单击应用程序中的一个按钮时，都会发生同样的事情(他们导航到一个视图)，并且没有令人惊讶的自动重定向。

Answer 2

考虑到您不能阻止用户在瓷砖中导航，通知她计算延迟并不能解决整个问题。您可以告诉用户完成的估计时间，您可以显示一个进度条，您可以立即带她到Review瓷砖等待结果，但是如果她离开该瓷砖导航，您就会遇到原来的问题。

如果用户在所有这些信息之后选择导航，她一定是有意识地决定中断程序。把她送回审查令是不好的。现在怎么办？

您非常合理地建议，与calculateOrder一起发送的回调函数应该将一个intendedStartingPoint参数传递给setLocation。您担心这将要求您修改对setLocation的每次调用以适应新的参数。永远不要害怕，JavaScript提供了一个解决这一困境的巧妙方法。

您可以在不修改现有调用的情况下向setLocation添加一个新参数。这只是要求intendedStartingPoint是setLocation参数列表中的最后一个参数，然后新版本的setLocation可以检查intendedStartingPoint的值，看看它是否是undefined。

如果intendedStartingPoint是undefined，那么您知道setLocation正在接收一个旧的呼叫，那些没有通过intendedStartingPoint的呼叫。在这些情况下，您将忽略intendedStartingPoint并像以前一样继续工作。否则，您将intendedStartingPoint与当前位置进行比较，并根据比较结果继续进行。

一种更好的方法是使新参数不是intendedStartingPoint，而是一个名为options的对象，它将intendedStartingPoint作为其属性之一。这允许您在将来需要时将更多的可选值传递给setLocation。

setLocation的新行为非常简单。在设置新位置之前，请检查intendedStartingPoint是否等于当前位置。如果是的话，你不需要做任何事情，因为用户已经在她想要的地方了。但是，如果intendedStartingPoint与当前位置不同，则用户已经导航离开，因此您可以执行如下操作：

if (LocationManager.currentLocation !== options.intendedStartingPoint) {
  // Tell the user that the calculation has finished.
  // Ask her if she wants to return to Review Order now.
}

Answer 3

首先，通过异步调用计算订单细节，并通过javascript向最终用户显示/模拟进度条。

第二件事:不要在您的服务回调函数中强制ReviewOrder块打开。当服务完成它的计算时，您的回调函数将检查当前的块，如果它不是ReviewOrder块，那么它将计算出来的信息存储在会话或本地存储中。

在用户导航ReviewOrder瓷砖时，将来自用户的订单详细信息与存储的订单详细信息进行比较(例如，通过散列函数)。

如果用户订单详细信息和存储订单详细信息的哈希代码相同，则显示保存的订单信息，否则再次调用服务。

重要注意事项：为了防止订单伪造，请考虑以下方法：

在计算服务器上的订单详细信息后，生成唯一的订单id，该id将返回给用户。然后在服务器数据库中存储计算出的订单详细信息和这个id。如果用户没有更改订单详细信息，您的脚本将只向服务器发送此订单id作为标志，该订单已被接受。然后读取数据库并按此id处理订单。

如果订单未完成，则使用预定任务，该任务将清除数据库中未完成的订单(例如，24小时前计算的订单，但仍未完成)。