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

前言

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

 

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

[javascript] view plain copy

print?

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，而这个变量又来自于下面的方法体:

[javascript] view plain copy

print?

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. }  

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

[javascript] view plain copy

print?

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单例特性创建服务，但是结果错误。代码如下:

[javascript] view plain copy

print?

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./page/e2015/06/199141.html

美文美图