在修复控制角标正确变化过程中，发觉前端代码组织层次出现了严重问题。传递和共享数据时自己使用的是 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, "9015", data, function(data) {console.log("9015_找药状况-查询成功:" + JSON.stringify(data));return data.cnt;}, function(data) {console.log("9015_找药状况:" + data.errtext);return 0;});}}return mybadgeFactory;});
复制代码
评论