wex5 实战 框架拓展2之事件派发与data刷新
来源:互联网 发布:java枚举类型enum用法 编辑:程序博客网 时间:2024/06/14 16:35
一 前言
讲完公共data,相信大家对框架级的data组件级绑定有了更新的认识,接下来我们继续深入,以求研究明白wex5的框架能力。
在一个web项目中,其实有一个data, 是基础框架必须的data,并且要实时监控数据变更。那就是用户userData.
此文的目地和意义:
1 在涉及到用户登陆的项目中,框架级的userData,可以让所有web页面提供数据来源,用超现实的方法保证多页面中的用户唯一性,且一次加载即可。不必像之前的分页data每次都要用户ID来过滤用户数据。
2 抛弃之前的页面接收事件modelParamsReceive机制,用派发事件,让页面中的监听器根据事件来执 行刷新或其它事件,解决用户userData更新后项目中N个页面的更新问题。之前用页面跳转传参,触发接收事件的方法刷新data,当跳转页面来源超过3个时,需要进行来源判断并准确传参,相对于N个页面甚至上百个页面的大型工程,显然,之前的页面接参触发方法已无法满足设计需求。
所以,今天,我的设计方案是,将用户userData,像上期讲解的商品goodsData一样,挂到框架上,让所有页面绑定用户数据,当用户重新登陆或信息修改后派发事件,让所有与用户操作相关的页面监听并接收事件及参数,及时刷新数据。
二 效果演示
为便于连贯理解,我仍然用上次的项目
1 登陆前
2 登陆后 头像更换,首页登陆按钮隐藏
3 用户更换帐号
三 页面逻辑与代码实现
1 派发事件
用户登陆,修改登陆相关字段状态到数据库,保存成功后,派发事件,并将当前用户userUUID传参
2 框架接收
框架接收的前提是,把userData放到框架上,也就是index门户页面上,在index页监听事件并接参
index页加载完成后,装载事件
index页退出时卸载事件,避免页面退出,事件仍在监听报错
事件函数的方法
框架页面接收事件并接收参数,这里是userUUID,执行数据过滤,得到当前用户信息。
3 页面数据绑定
登陆按钮隐藏
头像绑定:用三目表达式,空值显示默认头像,有值显示真实用户头像
帐号更新
四 总结
派发事件,没有页面针对性,类似于广播,触发之后把事件派发出去,在需要接收事件的页面创建事件监听器,负责接收事件,当有事件派发时接收事件,接参,并执行相应的data刷新等动作。相比于modelParamsReceive的依赖于页面的传参接参,具有更广阔的应用范围和控制能力以及扩展方法。
将思路延伸一下,不同页面中的订单数据同步,购物车数据同步,支付页面数据同步,等等,如果用派发事件的方法,页面会更简结,易于维护和修改。
- wex5 实战 框架拓展2之事件派发与data刷新
- wex5 实战 框架拓展之1 公共data组件(Data)
- WeX5之Data插入
- 事件派发与监听连写
- android 学习之触摸事件 -- 事件派发
- 派发事件
- touch事件的派发与传递
- 基于MONO事件派发机制之SendMessage
- Unity3D事件派发机制之Delegate
- wex5 实战 wex5与js的组件关系与执行顺序(父子与先后)
- wex5 实战 省市县三级联动与地址薄同步
- wex5 实战 用户点评与提交设计技巧
- wex5 实战 登陆帐号更换与用户id一致性
- 项目记录22-- tolua基于lua框架事件派发
- wex5 教程 之 图文讲解 考题模块框架设计
- HTML5实战与剖析之剪贴板事件
- Android触摸屏事件派发机制详解与源码分析
- Android View触摸屏事件派发机制详解与源码分析
- 每天一个linux命令(10):cat 命令
- 数据结构经典算法学习之八枚银币(简单决策树)
- leetcode 477 Total Hamming Distance C++
- c++ 操作Execl根据行号删除指定行
- Lambda在Androidstudio上的配置
- wex5 实战 框架拓展2之事件派发与data刷新
- 6.第一个程序Hello World
- http协议详解
- mongodb 3.2 实战(三)整合Spring Data MongoDB
- Ascii编码
- 服务器不支持ipv6,怎么解决
- 最流行的4个机器学习数据集
- 【hdu 2897】邂逅明下
- 每天一个linux命令(11):nl命令