Gibt es in JavaScript eine Möglichkeit, die Anzahl der eckigen Uhren auf der gesamten Seite zu zählen?
Wir verwenden Batarang , aber es entspricht nicht immer unseren Bedürfnissen. Unsere Anwendung ist groß und wir sind daran interessiert, mithilfe automatisierter Tests zu überprüfen, ob die Anzahl der Uhren zu stark ansteigt.
Es wäre auch nützlich, Uhren pro Controller zu zählen.
Edit : hier ist mein versuch. Es zählt Uhren in allem mit Klasse ng-Scope.
(function () {
var elts = document.getElementsByClassName('ng-scope');
var watches = [];
var visited_ids = {};
for (var i=0; i < elts.length; i++) {
var scope = angular.element(elts[i]).scope();
if (scope.$id in visited_ids)
continue;
visited_ids[scope.$id] = true;
watches.push.apply(watches, scope.$$watchers);
}
return watches.length;
})();
$scope
hat ein $$ watchers-Array mit der Anzahl der Watcher auf diesem Controller (wenn Sie eine ng-Wiederholung haben oder etwas, das einen anderen Bereich erstellt, funktioniert das nicht so gut). Aber ich denke, dass es keine Möglichkeit gibt, alle Uhren in der gesamten App zu sehen.Antworten:
(Möglicherweise müssen Sie
body
zuhtml
oder wo immer Sie Ihre ändernng-app
)Dank an erilem für den Hinweis auf diese Antwort fehlte die
$isolateScope
Suche und die Beobachter wurden möglicherweise in seiner Antwort / ihrem Kommentar dupliziert.Vielen Dank an Ben2307 für den Hinweis, dass das
'body'
möglicherweise geändert werden muss.Original
Ich habe das Gleiche getan, außer dass ich das Datenattribut des HTML-Elements und nicht dessen Klasse überprüft habe. Ich habe deine hier geführt:
http://fluid.ie/
Und bekam 83. Ich lief meine und bekam 121.
Ich habe das auch in meine aufgenommen:
Und nichts wurde ausgedruckt, also schätze ich, dass meine besser ist (da sie mehr Uhren gefunden hat) - aber mir fehlt intimes Winkelwissen, um sicher zu sein, dass meine keine richtige Teilmenge der Lösungsmenge ist.
quelle
$scope
und$$watcher
automatische Element bereinigt , oder tritt ein Leistungseinbruch auf?$compileProvider.debugInfoEnabled(false);
in Ihrem Projekt verwenden, zählt dieses Snippet null Beobachter.Ich denke, die genannten Ansätze sind ungenau, da sie Beobachter im gleichen Umfang doppelt zählen. Hier ist meine Version eines Lesezeichens:
https://gist.github.com/DTFagus/3966db108a578f2eb00d
Es werden auch einige weitere Details zur Analyse von Beobachtern angezeigt.
quelle
Hier ist eine hackige Lösung, die ich basierend auf der Überprüfung der Scope-Strukturen zusammengestellt habe. Es "scheint" zu funktionieren. Ich bin mir nicht sicher, wie genau dies ist und es hängt definitiv von einer internen API ab. Ich benutze anglejs 1.0.5.
quelle
$rootScope.$new(true)
oder erstelle$scope.$new(true)
, wo$scope
sich der Controller befindet, wird beim Durchlaufen der Hierarchie dieser Bereich weiterhin gefunden. Ich denke, es bedeutet, dass die Prototypen nicht miteinander verbunden sind, anstatt dass der Umfang nicht in der Hierarchie liegt.Es gibt ein neues Chrome-Plugin, das automatisch die aktuellen Gesamtbeobachter und die letzte Änderung (+/-) in Ihrer App jederzeit anzeigt ... es ist einfach fantastisch.
https://chrome.google.com/webstore/detail/angular-watchers/nlmjblobloedpmkmmckeehnbfalnjnjk
quelle
Da ich kürzlich auch mit einer großen Anzahl von Beobachtern in meiner Anwendung zu kämpfen hatte, fand ich eine großartige Bibliothek namens ng-stats heraus - https://github.com/kentcdodds/ng-stats . Es hat nur minimale Einstellungen und gibt Ihnen die Anzahl der Beobachter auf der aktuellen Seite + Digest-Zykluslänge. Es könnte auch ein kleines Echtzeitdiagramm projizieren.
quelle
Kleinere Verbesserung für Words Like Jareds Antwort .
quelle
In AngularJS 1.3.2 a
countWatchers
wurde dem ngMock-Modul Methode hinzugefügt:Verweise
AngularJS Changelog: 1.3.2
ngMock: $ rootScope.Scope. $ countWatchers
quelle
angular.element(document)
zuangular.element('[ng-app]')
und legte es in ein Lesezeichen mit einer Warnung:alert('found ' + countWatchers() + ' watchers');
Ich habe den folgenden Code direkt aus der
$digest
Funktion selbst übernommen. Natürlich müssen Sie wahrscheinlich den Anwendungselement-Selektor (document.body
) unten aktualisieren .quelle
Dies sind die Funktionen, die ich benutze:
Diese Funktion verwendet einen Hash, um denselben Bereich nicht mehrmals zu zählen.
quelle
element.data()
kann manchmal undefiniert sein oder so (zumindest in einer 1.0.5-Anwendung, bei der ich einen Fehler bekam, als ich diesen Ausschnitt ausführte und versuchte aufzurufencountWatchers
). Nur zur Info.Es gibt eine rekursive Funktion, die von Lars Eidnes 'Blog unter http://larseidnes.com/2014/11/05/angularjs-the-bad-parts/ veröffentlicht wurde , um die Gesamtzahl der Beobachter zu erfassen. Ich vergleiche das Ergebnis mit der hier veröffentlichten Funktion und der in seinem Blog veröffentlichten Funktion, die eine etwas höhere Anzahl generiert hat. Ich kann nicht sagen, welches genauer ist. Gerade hier als Referenz hinzugefügt.
HINWEIS: Möglicherweise müssen Sie "ng-app" für Ihre Angular-App in "data-ng-app" ändern.
quelle
Plantians Antwort ist schneller: https://stackoverflow.com/a/18539624/258482
Hier ist eine Funktion, die ich von Hand geschrieben habe. Ich habe nicht darüber nachgedacht, rekursive Funktionen zu verwenden, aber das habe ich stattdessen getan. Es könnte schlanker sein, ich weiß es nicht.
Legen Sie dies dann in Ihren höchsten Controller (wenn Sie einen globalen Controller verwenden).
Und schließlich ein Lesezeichen:
quelle
Ein bisschen spät zu dieser Frage, aber ich benutze diese
Stellen Sie einfach sicher, dass Sie den richtigen querySelector verwenden.
quelle