Слежение за изменениями нескольких атрибутов $scope в AngularJS

Быстрый ответ

Для эффективного отслеживания изменений сразу в нескольких свойствах приложения на AngularJS лучше всего использовать метод $scope.$watchGroup. Вот пример такого использования:

$scope.$watchGroup(['prop1', 'prop2'], function(newVals, oldVals) {
  // здесь Angular отслеживает изменения свойств 'prop1' и 'prop2'.
});

Использование этого метода облегчает задачу отслеживания изменений для prop1 и prop2, выполняя при необходимости колбэк. Это экономит ресурсы и улучшает производительность.

Отслеживание изменений вложенных JSON-объектов

Если нужно отследить изменения во вложенных свойствах или целых объектах, применяйте $watch. Воспринимайте эту функцию как сову, которая ведет бдительное ночное наблюдение:

$scope.$watch('deepObject', function(newValue, oldValue) {
  // Вычисления здесь.
}, true);

Установив true в качестве третьего параметра, вы сможете отслеживать реальные изменения данных объектов, а не только изменения их ссылок.

Создание пользовательской функции слежения с помощью $watch

Если требуется провести более детальное отслеживание, можно создать пользовательскую функцию, которая будет работать с $scope.$watch:

$scope.$watch(function() {
  // Объединим все элементы the Planeteers, чтобы вызвать Капитана Планету
  return $scope.earth + $scope.fire + $scope.wind + $scope.water + $scope.heart;
}, function(captainPlanet, oldCaptainPlanet) {
  // И помните, сила в ваших руках!
});

Пользовательская функция позволяет определить вычисляемое значение для отслеживания. Это реализует эффективный мониторинг изменений для различных свойств.

Отслеживание коллекций для улучшения производительности

В случаях, когда производительность имеет решающее значение, и требуется отслеживать массивы или коллекции, лучшим выбором станет $watchCollection:

$scope.$watchCollection('rainbow', function(newRainbow, oldRainbow) {
  // Если в конце радуги отсутствует горшок с золотом, время вызывать лепрекона.
});

Имейте в виду, что $watchCollection выполняет только поверхностное отслеживание. В отличие от него, $watch способен проводить глубокий анализ.

Визуализация

Представьте себе, что вы дирижировали симфонией компонентов в вашем приложении:

Дирижер (🎼): [$scope.property1, $scope.property2, $scope.property3]

Жизненно важно отслеживать любые изменения в их "исполнении":

$scope.$watchGroup(['property1', 'property2', 'property3'], function(newValues, oldValues) {
  // Когда в исполнении музыкантов происходит сбой, поддерживаем гармонию всего оркестра:
  if (newValues !== oldValues) {
    adjustSymphonyPerformance(newValues);
  }
});

Каждое малейшее изменение сопоставимо с музыкальной нотой, которая внезапно была воспроизведена неверно:

Было: [🎻 Скрипка: До, 🎺 Труба: Соль, 🥁 Барабан: Удар1]
Стало: [🎻 Скрипка: Ре, 🎺 Труба: Соль, 🥁 Барабан: Удар2]

В таком случае дирижер будет немедленно уведомлен об иных колебаниях и будет стремиться к совершенному исполнению.

Эффективное отслеживание изменений в свойствах с помощью сложных слежений

В сложных приложениях, где требуется отслеживание многих атрибутов, рекомендуется использовать составное отслеживание:

$scope.$watch(function() {
  return {
    prop1: $scope.property1,
    prop2: $scope.property2,
    prop3: $scope.property3
  };
}, function(current, previous) {
  // Мы реагируем на любое изменение свойств.
}, true); // `true` обеспечивает глубокое отслеживание, подобное методам Шерлока Холмса.

Это позволяет одновременно отслеживать различные свойства и быстро реагировать на их изменения.

Альтернативы отслеживанию изменений множества атрибутов

В некоторых ситуациях для устранения необходимости в отслеживании изменений объекта можно использовать встроенные возможности Angular: директивы ng-change и ng-model:

<input type="text" ng-model="prop1" ng-change="handleFn()" />
<input type="text" ng-model="prop2" ng-model-options="{ debounce: 100 }" ng-change="handleFn()" />

Функция handleFn вызывается при каждом изменении, а ng-model-options регулирует процесс и время этих изменений для оптимизации производительности. Следовательно, системы отслеживания могут спокойно отдохнуть.

Полезные материалы

1. AngularJS – официальная документация по $scope.$watch в AngularJS.
2. Understanding Angular's $apply() and $digest() – SitePoint – статья с подробным анализом работы циклов $apply() и $digest() в AngularJS.
3. Топ-18 распространённых ошибок разработчиков AngularJS | Toptal® – обзор оптимизации AngularJS и типичных ошибок, которые могут возникнуть.
4. Руководство разработчика по AngularJS: Области видимости – подробное руководство по областям видимости в AngularJS.
5. Как следить за изменением маршрута в AngularJS? – Stack Overflow – обсуждение на StackOverflow, в котором сообщество разработчиков обменивается опытом отслеживания маршрутов.