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