144

有没有办法在 JavaScript 中计算整个页面上的角度手表数量？

我们使用Batarang，但它并不总是适合我们的需求。我们的应用程序很大，我们有兴趣使用自动化测试来检查观看次数是否过多。

在每个控制器的基础上计算手表也很有用。

编辑：这是我的尝试。它计算所有具有 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;
})();
4

12 回答 12

220

（您可能需要更改body为html或放置您的位置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);
})();

  • 感谢 erilem 指出此答案缺少$isolateScope搜索，并且观察者可能在他/她的答案/评论中重复。

  • 感谢 Ben2307 指出'body'可能需要更改。

原来的

我做了同样的事情，只是我检查了 HTML 元素的数据属性而不是它的类。我在这里跑了你的：

http://fluid.ie/

得到了 83。我跑了我的得到了 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);
})();

我也把这个放在我的：

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

没有打印出来，所以我猜我的更好（因为它发现了更多的手表）——但我缺乏深入的角度知识来确定我的不是解决方案集的正确子集。

于 2013-08-30T06:55:04.377 回答
16

我认为上述方法是不准确的，因为它们将同一范围内的观察者计算为双倍。这是我的书签版本：

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

它还显示了一些用于分析观察者的更多细节。

于 2014-08-13T07:16:37.850 回答
13

这是我在检查范围结构的基础上汇总的一个 hacky 解决方案。它“似乎”起作用。我不确定这有多准确，它肯定取决于一些内部 API。我正在使用 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);
    };
于 2013-08-30T18:47:23.747 回答
10

有一个新的 chrome 插件可以随时在您的应用程序中自动显示当前的总观察者和最后一次更改 (+/-) ......这真是太棒了。

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

于 2015-07-03T09:00:23.167 回答
9

由于我最近也在为我的应用程序中的大量观察者而苦苦挣扎，我发现了一个很棒的库，称为ng-stats - https://github.com/kentcdodds/ng-stats。它具有最少的设置，并为您提供当前页面上的观察者数量 + 摘要周期长度。它还可以投影一个小的实时图表。

于 2014-11-19T10:09:12.423 回答
9

Words Like Jared's answer 的小改进。

(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;
})();
于 2014-05-05T10:45:37.483 回答
8

在 AngularJS 1.3.2 中，countWatchers向 ngMock 模块添加了一个方法：

/**
 * @ngdoc 方法
 * @name $rootScope.Scope#$countWatchers
 * @module ngMock
 * @描述
 * 统计当前作用域的所有直接和间接子作用域的观察者。
 *
 * 当前作用域的观察者包括在计数中，所有观察者也包括在计数中
 * 隔离子范围。
 *
 * @returns {number} 观察者总数。
 */

  函数计数观察者（）
   {
   var root = angular.element(document).injector().get('$rootScope');
   var count = root.$$watchers ？root.$$watchers.length : 0; // 包含当前范围
   var pendingChildHeads = [root.$$childHead];
   变量当前范围；

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

    而（当前范围）
      {
      计数 += currentScope.$$watchers ？currentScope.$$watchers.length : 0;
      pendingChildHeads.push(currentScope.$$childHead);
      currentScope = currentScope.$$nextSibling;
      }
    }

   返回计数；
   }

参考

于 2015-06-22T18:50:55.310 回答
4

我直接从$digest函数本身获取了下面的代码。当然，您可能需要更新document.body底部的应用程序元素选择器 ( )。

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

于 2015-05-27T08:47:06.657 回答
1

这是我使用的功能：

/**
 * @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);
  };

})();

此函数使用哈希不多次计算同一范围。

于 2014-11-28T17:57:46.107 回答
1

Lars Eidnes 的博客在http://larseidnes.com/2014/11/05/angularjs-the-bad-parts/上发布了一个递归函数来收集观察者总数。我使用这里发布的函数和他在他的博客中发布的函数比较结果，产生的数字略高。我不能说哪个更准确。刚刚添加到这里作为交叉引用。

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;

注意：您可能需要将 Angular 应用的“ng-app”更改为“data-ng-app”。

于 2015-01-15T22:48:02.243 回答
1

Plantian 的回答更快：https ://stackoverflow.com/a/18539624/258482

这是我手写的一个函数。我没有考虑使用递归函数，但这就是我所做的。可能会更瘦，我不知道。

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

然后把它放在你的最高控制器中（如果你使用全局控制器）。

$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');
};

最后是书市：

javascript:logScope();
于 2015-06-25T13:57:02.613 回答
0

这个问题有点晚了，但我用这个

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

只需确保使用正确的 querySelector。

于 2019-02-28T10:34:27.647 回答