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

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

前言

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

 

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

 

/*
 * 更新我的徽标
 */
$rootScope.updateMyBadge = function() {
if (localStorage.logined != '1') {
$rootScope.mybadge = '';
}else{
if ($rootScope.medNoticeBadge_Sunny && $rootScope.medNoticeBadge_Sunny != 0 ) {
$rootScope.mybadge = $rootScope.medNoticeBadge_Sunny;
} else {
$rootScope.mybadge = '';
}
}
}
setTimeout(function(){
$rootScope.updateMyBadge();
},2*1000); // 2秒后执行

 

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

 

/*
 * 已响应查询找药小红点
 */
$rootScope.updateMedNoticeBadge = function(num) {
console.log(num);
$rootScope.medNoticeBadge = 0;
if (localStorage.getItem('medNoticeBadge')) {
$rootScope.medNoticeBadge = Number(localStorage.getItem('medNoticeBadge'));
$rootScope.medNoticeBadge += num;
} else {
$rootScope.medNoticeBadge += num;
}
localStorage.setItem('medNoticeBadge',$rootScope.medNoticeBadge);
$rootScope.medNoticeBadge_Sunny = localStorage.getItem('medNoticeBadge');
$rootScope.medNoticeBadge = localStorage.getItem('medNoticeBadge');
if (!$rootScope.userinfo.logined) {
localStorage.removeItem('medNoticeBadge');
$rootScope.medNoticeBadge = 0;
}
}

 

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

 

/*
 *初次查询找药状况查询信息(只调用一次)
 */
$rootScope.getmedNoticeBadge = function() {
if (localStorage.logined == '1') {
var data = {
'stat': "1"
};
appCallServer($http,"9015",data,function(data) {
localStorage.setItem('medNoticeBadge',0);
$rootScope.updateMedNoticeBadge(data.cnt);
},function(data) {
console.log("9015_找药状况:" + data.errtext);
});
}
};
$rootScope.getmedNoticeBadge();

 

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

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

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

 

myCtrl.factory('mybadgeService',function($http){
var mybadgeFactory = {};
mybadgeFactory.runMybadgeRequest = function(){
if (localStorage.logined == '1') {
var data = {
'stat': "1"
};
appCallServer($http,function(data) {
console.log("9015_找药状况-查询成功:" + JSON.stringify(data));
return data.cnt;
},function(data) {
console.log("9015_找药状况:" + data.errtext);
return 0;
});
}
}
return mybadgeFactory;
});

 

参考文献:

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

美文美图

 

相关文章

ANGULAR.JS:NG-SELECTANDNG-OPTIONSPS:其实看英文文档比看中...
AngularJS中使用Chart.js制折线图与饼图实例  Chart.js 是...
IE浏览器兼容性后续前言 继续尝试解决IE浏览器兼容性问题,...
Angular实现下拉菜单多选写这篇文章时,引用文章地址如下:h...
在AngularJS应用中集成科大讯飞语音输入功能前言 根据项目...
Angular数据更新不及时问题探讨前言 在修复控制角标正确变...