AngularJS进阶(三十四)Angular数据更新不及时问题探讨

举报
SHQ5785 发表于 2020/12/30 00:46:38 2020/12/30
【摘要】 Angular数据更新不及时问题探讨 前言       在修复控制角标正确变化过程中,发觉前端代码组织层次出现了严重问题。传递和共享数据时自己使用的是rootScope,为此造成了全局变量空间的污染。根据《AngularJs深度剖析与最佳实践》,如果两个控制器的协作存在大量的数据共享和交互可以利用Factory等服务的“单例”特性为它们注入一个共享对象来传递数据。而自己在...

Angular数据更新不及时问题探讨

前言

      在修复控制角标正确变化过程中,发觉前端代码组织层次出现了严重问题。传递和共享数据时自己使用的是rootScope,为此造成了全局变量空间的污染。根据《AngularJs深度剖析与最佳实践》,如果两个控制器的协作存在大量的数据共享和交互可以利用Factory等服务的“单例”特性为它们注入一个共享对象来传递数据。而自己在使用rootScope时,出现了变量不一致的情况。如下图所示:

 

      按照应用逻辑,“我的”角标变化应与“找药帮查询”角标变化一致。通过运行表明,“找药帮查询”角标存在变化异常的状况。通过阅读代码与调试,发现自己的业务逻辑存在问题。业务代码如下:

 


  
  1. /*
  2. * 更新我的徽标
  3. */
  4. $rootScope.updateMyBadge = function() {
  5. if (localStorage.logined != '1') {
  6. $rootScope.mybadge = '';
  7. }else{
  8. if ($rootScope.medNoticeBadge_Sunny && $rootScope.medNoticeBadge_Sunny != 0 ) {
  9. $rootScope.mybadge = $rootScope.medNoticeBadge_Sunny;
  10. } else {
  11. $rootScope.mybadge = '';
  12. }
  13. }
  14. }
  15. setTimeout(function(){
  16. $rootScope.updateMyBadge();
  17. },2*1000); // 2秒后执行

 

      其中$rootScope.mybadge为相应角标变量。其值来自于全局变量$rootScope.medNoticeBadge_Sunny,而这个变量又来自于下面的方法体:

 


  
  1. /*
  2. * 已响应查询找药小红点
  3. */
  4. $rootScope.updateMedNoticeBadge = function(num) {
  5. console.log(num);
  6. $rootScope.medNoticeBadge = 0;
  7. if (localStorage.getItem('medNoticeBadge')) {
  8. $rootScope.medNoticeBadge = Number(localStorage.getItem('medNoticeBadge'));
  9. $rootScope.medNoticeBadge += num;
  10. } else {
  11. $rootScope.medNoticeBadge += num;
  12. }
  13. localStorage.setItem('medNoticeBadge', $rootScope.medNoticeBadge);
  14. $rootScope.medNoticeBadge_Sunny = localStorage.getItem('medNoticeBadge');
  15. $rootScope.medNoticeBadge = localStorage.getItem('medNoticeBadge');
  16. if (!$rootScope.userinfo.logined) {
  17. localStorage.removeItem('medNoticeBadge');
  18. $rootScope.medNoticeBadge = 0;
  19. }
  20. }

 

      以上方法体又是通过如下语句调用的:

 


  
  1. /*
  2. *初次查询找药状况查询信息(只调用一次)
  3. */
  4. $rootScope.getmedNoticeBadge = function() {
  5. if (localStorage.logined == '1') {
  6. var data = {
  7. 'stat': "1"
  8. };
  9. appCallServer($http, "9015", data, function(data) {
  10. localStorage.setItem('medNoticeBadge', 0);
  11. $rootScope.updateMedNoticeBadge(data.cnt);
  12. }, function(data) {
  13. console.log("9015_找药状况:" + data.errtext);
  14. });
  15. }
  16. };
  17. $rootScope.getmedNoticeBadge();

 

      执行时出现了变量更新不及时的错误现象。导致角标显示异常。

      通过阅读以上代码,发现变量均是通过rootScope传递的。为此自己通过延时执行角标变化的方法体。但这并不是一个良好的的项目组织层次。自己应该将控制角标变化的方法体封装成服务的形式,利用其单例特性解决数据不一致的情况。

      自己尝试利用Factory单例特性创建服务,但是结果错误。代码如下:

 


  
  1. myCtrl.factory('mybadgeService',function($http){
  2. var mybadgeFactory = {};
  3. mybadgeFactory.runMybadgeRequest = function(){
  4. if (localStorage.logined == '1') {
  5. var data = {
  6. 'stat': "1"
  7. };
  8. appCallServer($http, "9015", data, function(data) {
  9. console.log("9015_找药状况-查询成功:" + JSON.stringify(data));
  10. return data.cnt;
  11. }, function(data) {
  12. console.log("9015_找药状况:" + data.errtext);
  13. return 0;
  14. });
  15. }
  16. }
  17. return mybadgeFactory;
  18. });

 

参考文献:

1.http://www.xker.com/page/e2015/06/199141.html

美文美图

 

文章来源: shq5785.blog.csdn.net,作者:No Silver Bullet,版权归原作者所有,如需转载,请联系作者。

原文链接:shq5785.blog.csdn.net/article/details/50740034

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200