AngularJS全局變量監(jiān)聽的常見痛點

在大型AngularJS應(yīng)用開發(fā)中，全局狀態(tài)管理是個關(guān)鍵挑戰(zhàn)。開發(fā)者常直接掛載全局變量到window對象，導(dǎo)致：

• 作用域無法自動檢測變化
• 手動觸發(fā)$apply()引發(fā)性能問題
• 多控制器同步困難
• 內(nèi)存泄漏風(fēng)險增加

下面通過對比方案揭示正確實踐：

全局變量監(jiān)聽的三種方案對比

window.GLOBAL_CONFIG = { ... }

$rootScope.$watch('globalVar')

// 使用Service + 事件機制
app.service('GlobalService', function() {
  this.data = { version: '1.0' };
});
$scope.$on('global:update', callback)

正確實踐四步法

1. 創(chuàng)建全局服務(wù)(Service)

angular.module('app').service('GlobalState', function() {
  this.settings = {
    theme: 'dark',
    apiBaseUrl: 'https://api.example.com'
  };
});

2. 在控制器注入服務(wù)

angular.module('app').controller('MainCtrl', 
  function($scope, GlobalState) {
  $scope.global = GlobalState;
});

3. 使用事件精準通信

// 發(fā)送更新事件
GlobalState.settings.theme = 'light';
$rootScope.$broadcast('global:themeChanged');

// 監(jiān)聽事件
$scope.$on('global:themeChanged', () => {
  // 更新局部作用域
});

4. 深度監(jiān)聽對象屬性

$scope.$watch(
  () => GlobalState.settings,
  (newVal) => {
    // 處理變化
  },
  true // 深度監(jiān)聽
);