Come contare il numero totale di orologi su una pagina?

Esiste un modo, in JavaScript, per contare il numero di orologi angolari sull'intera pagina?

Usiamo il Batarang , ma non sempre soddisfa i nostri bisogni. La nostra applicazione è grande e siamo interessati all'utilizzo di test automatici per verificare se il conteggio degli orologi aumenta troppo.

Sarebbe anche utile contare gli orologi per controller.

Modifica : ecco il mio tentativo. Conta orologi in tutto con classe 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;
})();

(Potrebbe essere necessario cambiare bodya htmlo dovunque si mette la ng-app)

(function () { 
    var root = angular.element(document.getElementsByTagName('body'));

    var watchers = [];

    var f = function (element) {
        angular.forEach(['$scope', '$isolateScope'], function (scopeProperty) { 
            if (element.data() && element.data().hasOwnProperty(scopeProperty)) {
                angular.forEach(element.data()[scopeProperty].$$watchers, function (watcher) {
                    watchers.push(watcher);
                });
            }
        });

        angular.forEach(element.children(), function (childElement) {
            f(angular.element(childElement));
        });
    };

    f(root);

    // Remove duplicate watchers
    var watchersWithoutDuplicates = [];
    angular.forEach(watchers, function(item) {
        if(watchersWithoutDuplicates.indexOf(item) < 0) {
             watchersWithoutDuplicates.push(item);
        }
    });

    console.log(watchersWithoutDuplicates.length);
})();

• Grazie a erilem per aver sottolineato questa risposta mancava la $isolateScopericerca e gli osservatori potevano essere duplicati nella sua risposta / commento.

• Grazie a Ben2307 per aver sottolineato che 'body'potrebbe essere necessario cambiare.

Originale

Ho fatto la stessa cosa, tranne che ho controllato l'attributo di dati dell'elemento HTML anziché la sua classe. Ho eseguito il tuo qui:

http://fluid.ie/

E ho 83. Ho corso il mio e ho ottenuto 121.

(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);
})();

Ho anche messo questo nel mio:

for (var i = 0; i < watchers.length; i++) {
    for (var j = 0; j < watchers.length; j++) {
        if (i !== j && watchers[i] === watchers[j]) {
            console.log('here');
        }
    }
}

E nulla è stato stampato, quindi immagino che il mio sia migliore (in quanto ha trovato più orologi) - ma mi manca una conoscenza angolare intima per sapere con certezza che il mio non è un sottoinsieme corretto del set di soluzioni.

Penso che gli approcci citati siano imprecisi poiché contano gli osservatori nello stesso ambito doppio. Ecco la mia versione di un bookmarklet:

https://gist.github.com/DTFagus/3966db108a578f2eb00d

Mostra anche alcuni dettagli in più per l'analisi degli osservatori.

Ecco una soluzione caotica che ho messo insieme basandomi sul controllo delle strutture dell'ambito. "Sembra" funzionare. Non sono sicuro di quanto sia preciso e dipende sicuramente da alcune API interne. Sto usando angularjs 1.0.5.

    $rootScope.countWatchers = function () {
        var q = [$rootScope], watchers = 0, scope;
        while (q.length > 0) {
            scope = q.pop();
            if (scope.$$watchers) {
                watchers += scope.$$watchers.length;
            }
            if (scope.$$childHead) {
                q.push(scope.$$childHead);
            }
            if (scope.$$nextSibling) {
                q.push(scope.$$nextSibling);
            }
        }
        window.console.log(watchers);
    };

Esiste un nuovo plug-in di Chrome che mostra automaticamente gli osservatori totali attuali e l'ultima modifica (+/-) in qualsiasi momento nella tua app ... è semplicemente fantastico.

https://chrome.google.com/webstore/detail/angular-watchers/nlmjblobloedpmkmmckeehnbfalnjnjk

Dato che recentemente stavo lottando con un numero elevato di osservatori nella mia applicazione, ho scoperto una grande libreria, chiamata ng-stats - https://github.com/kentcdodds/ng-stats . Ha una configurazione minima e ti dà il numero di osservatori nella pagina corrente + durata del ciclo di digest. Potrebbe anche proiettare un piccolo grafico in tempo reale.

Miglioramento minore per Words Come la risposta di Jared .

(function () {
    var root = $(document.getElementsByTagName('body'));
    var watchers = 0;

    var f = function (element) {
        if (element.data().hasOwnProperty('$scope')) {
            watchers += (element.data().$scope.$$watchers || []).length;
        }

        angular.forEach(element.children(), function (childElement) {
            f($(childElement));
        });
    };

    f(root);

    return watchers;
})();

In AngularJS 1.3.2, countWatchersè stato aggiunto un metodo al modulo ngMock:

/ **
 * Metodo @ngdoc
 * @name $ rootScope.Scope # $ countWatchers
 * @module ngMock
 * @description
 * Conta tutti gli osservatori di ambiti figlio diretti e indiretti dell'ambito corrente.
 *
 * Gli osservatori dell'ambito corrente sono inclusi nel conteggio, così come tutti gli osservatori di
 * isolare ambiti figlio.
 *
 * @returns {number} Numero totale di osservatori.
 * /

  funzione countWatchers () 
   {
   var root = angular.element (document) .injector (). get ('$ rootScope');
   var count = root. $$ osservatori? root. $$ watchers.length: 0; // include l'ambito corrente
   var pendingChildHeads = [root. $$ childHead];
   var currentScope;

   while (pendingChildHeads.length) 
    {
    currentScope = pendingChildHeads.shift ();

    while (currentScope) 
      {
      count + = currentScope. $$ osservatori? currentScope. $$ watchers.length: 0;
      pendingChildHeads.push (currentScope $$ childHead.);
      currentScope = currentScope. $$ nextSibling;
      }
    }

   conteggio dei resi;
   }

Riferimenti

• Log delle modifiche di AngularJS: 1.3.2

• ngMock: $ rootScope.Scope. $ countWatchers

Ho preso il codice qui sotto direttamente dalla $digestfunzione stessa. Ovviamente, probabilmente dovrai aggiornare l'elemento selettore ( document.body) nella parte inferiore.

(function ($rootScope) {
    var watchers, length, target, next, count = 0;

    var current = target = $rootScope;

    do {
        if ((watchers = current.$$watchers)) {
            count += watchers.length;
        }

        if (!(next = (current.$$childHead ||
                (current !== target && current.$$nextSibling)))) {
            while (current !== target && !(next = current.$$nextSibling)) {
                current = current.$parent;
            }
        }
    } while ((current = next));

    return count;
})(angular.element(document.body).injector().get('$rootScope'));

Queste sono le funzioni che utilizzo:

/**
 * @fileoverview This script provides a window.countWatchers function that
 * the number of Angular watchers in the page.
 *
 * You can do `countWatchers()` in a console to know the current number of
 * watchers.
 *
 * To display the number of watchers every 5 seconds in the console:
 *
 * setInterval(function(){console.log(countWatchers())}, 5000);
 */
(function () {

  var root = angular.element(document.getElementsByTagName('body'));

  var countWatchers_ = function(element, scopes, count) {
    var scope;
    scope = element.data().$scope;
    if (scope && !(scope.$id in scopes)) {
      scopes[scope.$id] = true;
      if (scope.$$watchers) {
        count += scope.$$watchers.length;
      }
    }
    scope = element.data().$isolateScope;
    if (scope && !(scope.$id in scopes)) {
      scopes[scope.$id] = true;
      if (scope.$$watchers) {
        count += scope.$$watchers.length;
      }
    }
    angular.forEach(element.children(), function (child) {
      count = countWatchers_(angular.element(child), scopes, count);
    });
    return count;
  };

  window.countWatchers = function() {
    return countWatchers_(root, {}, 0);
  };

})();

Questa funzione utilizza un hash per non contare più volte lo stesso ambito.

Esiste una funzione ricorsiva pubblicata dal blog di Lars Eidnes su http://larseidnes.com/2014/11/05/angularjs-the-bad-parts/ per raccogliere il numero totale di osservatori. Confronto il risultato usando la funzione pubblicata qui e quella che ha pubblicato nel suo blog, che ha generato un numero leggermente più alto. Non so dire quale sia più preciso. Appena aggiunto qui come riferimento trasversale.

function getScopes(root) {
    var scopes = [];
    function traverse(scope) {
        scopes.push(scope);
        if (scope.$$nextSibling)
            traverse(scope.$$nextSibling);
        if (scope.$$childHead)
            traverse(scope.$$childHead);
    }
    traverse(root);
    return scopes;
}
var rootScope = angular.element(document.querySelectorAll("[ng-app]")).scope();
var scopes = getScopes(rootScope);
var watcherLists = scopes.map(function(s) { return s.$$watchers; });
_.uniq(_.flatten(watcherLists)).length;

NOTA: potrebbe essere necessario modificare "ng-app" in "data-ng-app" per la tua app Angular.

La risposta di Plantian è più veloce: https://stackoverflow.com/a/18539624/258482

Ecco una funzione che ho scritto a mano. Non ho pensato di usare le funzioni ricorsive, ma è quello che ho fatto invece. Potrebbe essere più magro, non lo so.

var logScope; //put this somewhere in a global piece of code

Quindi inseriscilo nel controller più alto (se usi un controller globale).

$scope.$on('logScope', function () { 
    var target = $scope.$parent, current = target, next;
    var count = 0;
    var count1 = 0;
    var checks = {};
    while(count1 < 10000){ //to prevent infinite loops, just in case
        count1++;
        if(current.$$watchers)
            count += current.$$watchers.length;

        //This if...else is also to prevent infinite loops. 
        //The while loop could be set to true.
        if(!checks[current.$id]) checks[current.$id] = true;
        else { console.error('bad', current.$id, current); break; }
        if(current.$$childHead) 
            current = current.$$childHead;
        else if(current.$$nextSibling)
            current = current.$$nextSibling;
        else if(current.$parent) {
            while(!current.$$nextSibling && current.$parent) current = current.$parent;
            if(current.$$nextSibling) current = current.$$nextSibling;
            else break;
        } else break;
    }
    //sort of by accident, count1 contains the number of scopes.
    console.log('watchers', count, count1);
    console.log('globalCtrl', $scope); 
   });

logScope = function () {
    $scope.$broadcast('logScope');
};

E infine un bookmarket:

javascript:logScope();

Un po 'tardi a questa domanda, ma io uso questo

angular.element(document.querySelector('[data-ng-app]')).scope().$$watchersCount

assicurati solo di utilizzare querySelector corretto.