美文网首页
用Event机制实现web登录后不刷新页面

用Event机制实现web登录后不刷新页面

作者: NoteCode | 来源:发表于2017-01-16 20:38 被阅读101次

    web app在登录后不刷新页面,仅局部刷新,这样的做法似乎不是很主流。大概留意了一下几个大网站,大多数网站的做法:

    • 登录页url跟首页url不一样。即登录时跳到另一个url,登录成功后再跳到首页。如:taobao.com / jd.com。为何如此,未进行深入考察。
    • 登录后刷新页面。如:baidu.com / douban.com

    登录后不全页面刷新(一下简称“不刷新”),似非主流做法。不过,若非要如此(比如登录前后页面变化不是很大,设计同学觉得硬生生刷新一次,用户体验不好),我们现在也尝试了一下,也是可行的。

    “不刷新”,对于前端开发的要求自然比“刷新”要高一些,高在两点:

    1. 事件的通知机制。即,“用户登录”这个事情如何通知给相关模块,而又尽量不增加太大的耦合性。
    2. 相关模块内部在收到事件时的状态切换、数据清理等工作。这属于精细活,如果初期未考虑“不刷新”,后期再加的话,会比较烦人。很容易漏掉一些老数据。

    Event机制

    如果整个web app不是基于模块化开发的,欲达到“不刷新”,我觉得实现起来会更费劲。我们现在用了模块化,就用了Event通知机制,原理见我另一篇文章前端模块化之——模块之间通信

    基于该机制,实现起来也就不是什么理论上的难题了:执行在“用户登录”这件事发生之后,给全局发一个Event,对此Event感兴趣的模块(即于身份相关)就可以在此时进行数据的重新获取、渲染等工作了。

    另,鉴于用户身份数据这种全局可能都需要的,可在一个地方保存(而不是各个模块自己去取、存)。故,可在“用户登录”并且“获取用户数据”这两个动作都完成后,再通知全局。

    实现现状

    “用户退出”,与登录是一样的原理。不过,因为im模块比较复杂,初始作者因忙于其他工作不能支援,清理工作要想做到比较彻底很得费一番周折。故,只实现了“登录不刷新”,而“退出”,就刷新吧,一切回到干净状态。算是偷懒了吧。

    相关文章

      网友评论

          本文标题:用Event机制实现web登录后不刷新页面

          本文链接:https://www.haomeiwen.com/subject/pwmpbttx.html