Избавление От Лишних $Watchers

Я хотел бы поделиться небольшой заметкой о том, как ускорить работу $digest(), заменив стандартные директивы эквивалентами, которые не вызывают $watch.

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

  <h1 ng-bind="l10n.main_title"></h1>

 <a ng-href="/edit/{{user.id}}" ng-bind="user.name"></a>

Эti и другие стандартные директивы любезно проверят, изменилось ли значение выражения с каждым $digest. Исправить ситуацию можно набором достаточно простых кастомных директив, например для текста:

 app.directive("staticText", function() {

return {

restrict: "A"

link: function(scope, element, attrs) {

element.text(scope.$eval(attrs.customText));

}

};

})

 <h1 static-text="l10n.main_title"></h1>

Результат — минус один $watch. Конечно, вам не нужно изобретать собственный велосипед; на GitHub есть два достойных модуля:

$смотреть бойцов — GitHub
Биндонсе — GitHub

Первый ($watch Fighters) довольно прост и включает в себя следующие директивы:

набор-заголовок
set-href
набор текста
set-html
set-класс
установить-если

Второй (Bindonce) более интересен, потому что.

разработчики посчитали, что данные для привязки могут быть недоступны в момент рендеринга шаблона директивы (например, он загружается Ajax-запросом).

Это выглядит так: <div bindonce="User"> <h1 bo-text="User.name"></h1> </div> Для родительской директивы связывание Временный $watch создается, когда значение переданной ему переменной становится отличным от неопределенный выполняются вложенные директивы bo-* и временный $watch удаляется.

Модуль Биндонсе включает в себя:

бо-если
бо-шоу
спрятать
бо-текст
бо-html
бо-href
bo-src
бо-класс
бо-альт
бо-титул
бо-ид
бо-стиль
bo-значение
бо-аттр бо-аттр-фу

Более подробную информацию можно прочитать на страница репозитория , там довольно обширный файл readme. Наконец, я дам вам функцию, которую я нашел: Здесь .

Он примерно подсчитывает общее количество $watchers на странице.

(function () { var root = $(document.getElementsByTagName('body')); var watchers = []; var f = function (element) { if (element.data().

hasOwnProperty('$scope')) { angular.forEach(element.data().

$scope.$$watchers, function (watcher) {

watchers.push(watcher);

});

}

angular.forEach(element.children(), function (childElement) {

f($(childElement));

});

};

f(root);

console.log(watchers.length);

})();

Ради интереса можно сравнить количество ранее и область реализации директив нулевого наблюдения.