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, "9015", data, 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 AngularJS

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。