wex5 实战 框架拓展之2 事件派发与data刷新

一 前言

讲完公共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的依赖于页面的传参接参，具有更广阔的应用范围和控制能力以及扩展方法。

将思路延伸一下，不同页面中的订单数据同步，购物车数据同步，支付页面数据同步，等等，如果用派发事件的方法，页面会更简结，易于维护和修改。

相关视频制作完成，上传优酷。教学app制作中。我是邯郸戏曲开发，tel：15175073123,qq:1017945251

 

 

 扫描二维码，看高清教学视频。