前端技术专家民工精髓V如何增强单页应用的

北京中医湿疹医院 http://m.39.net/pf/a_8814597.html
什么是单页应用

所谓单页应用,指的是在一个页面上集成多种功能,甚至整个系统就只有一个页面,所有的业务功能都是它的子模块,通过特定的方式挂接到主界面上。它是AJAX技术的进一步升华,把AJAX的无刷新机制发挥到极致,因此能造就与桌面程序媲美的流畅用户体验。

单页应用的优势

操作体验流畅,媲美本地应用的感觉,切换过程中不会频繁有被“打断”的感觉。因为界面框架都在本地,与服务端的通讯基本只有数据,所以便于迁移,可以用比较小的代价,迁移成桌面产品,或者各种移动端Hybrid产品。

单页应用的弱点

对搜索引擎不友好

开发难度相对较高

如何尽可能增强单页应用的操作体验?(分以下几个部分展开阐述)

路由的规划

推送的使用

断线重连机制

操作补偿机制

本地缓存

热更新

良好的内存管理

服务端预渲染

1.什么叫做路由?

路由可以理解为URL与界面状态的对应关系。

我们需要注意到,在理想状态下,URL和界面状态应当是精确对应的。比如说,对同一个用户来说,两次使用同一个URL所打开的界面,其状态应当是完全一致的。对于同一个界面,进行相同的操作之后,URL应当能够精确反馈当前状态。

但是我们需要注意到,细碎操作如果都需要跟路由保持同步,会是一个非常繁琐的事情,所以在设计过程中应当加以取舍,舍弃那些过于细碎的状态与路由的同步。

2.服务端推送

推送的意思是,某些情况下,即使页面开着不动,服务端也主动发送消息过来,让界面能够有所体现。通常我们会使用WbSockt之类的技术来实现这种体验。

有时候,我们可能会看到一些在页面上使用推送的场景,最常见的是即时消息。

比如说,我们在应用里加一个聊天窗口,其他人发一条消息,自己这边能够实时展现出来。

如果是为了极致的用户体验,我们可以把整个应用的业务变更都使用推送,比如:

我在查看某条任务的时候,有人修改了这条任务,我这里应该不需要做什么操作,就能自动体现出他的修改。

如果对全业务的变更都做推送管理,使用体验会大为加强,但是,实现难度和代码复杂度会急剧上升。

.断线重连机制

我们如何判断一个单页面产品的技术水准呢?可以通过这样一种方式:

连续开几天不关,不需要通过“刷新”这个操作来解决一些常见问题。

为什么这个事情能够体现技术水准呢?因为要把这个事情做到极致,需要把这几件事情做好:

断线重连机制

良好的内存管理

版本的自动升级

因为移动办公普及之类的情况,导致我们可能需要面对一些情况,比如,切换了网络,电脑休眠再打开之类,当再次联网的时候,就需要去重新链接,并且,对这个过程中发生的业务变更进行“补课”,然后逐一应用到界面上来,把界面调整到最新状态。

4.操作补偿机制

什么是操作补偿呢?

从逻辑上来讲,当我们在界面上操作,创建一条任务的时候,新的这条任务不应当立刻显示出来,而是应当等到服务端确认成功了,才加到界面上。但很可能我们的网络不好,这一步用户要等很久。从用户体验的角度,这样是不好的,所以我们可以先把界面放上去,然后等创建成功的消息回来之后,再把一些唯一标识之类的东西回填到内存数据中。

单步的操作补偿还算是不太难,如果有多步的话,就非常麻烦了,举个极端情况的例子来说,用户新增了一条任务,服务端还没返回的时候,他就立刻在这条任务下创建子任务,但子任务这时候没有父任务的ID,如果想给这步也做操作补偿,就比较麻烦了。甚至说,连续进行了几步操作之后,发现之前的操作失败了,后续处理会非常复杂。

5.本地缓存的使用

上面提到,如果多步连续操作中间出现了失败,局面会比较尴尬,比如你填了好多东西,提交的时候才发现网络坏了,那就非常头疼,这时候,用户会非常期望这些数据能够保存下来,等网络好了再重新尝试。

我们可以使用本地缓存来临时存储这些数据。如果这个层面做到极致,能够结合良好设计的操作补偿机制,甚至可以让用户脱机使用我们的应用,把所有产生的这些变更都缓存,等到联网的时候再批量同步合并回去。

6.热更新

前面提到,用户有可能长期开着我们的应用,然后中间一直没有刷新。正常情况下,业务变更都应当会被全部推送过来,界面所反馈的状况始终是最新的,符合现状的。但我们需要考虑到另外一个问题,系统升级怎么办?

我们当然可以推送一个通知:本系统已经升级了,


转载请注明:http://www.aierlanlan.com/grrz/646.html

  • 上一篇文章:
  •   
  • 下一篇文章: