如何计算页面上的观看总数? [英] How to count total number of watches on a page?

问题描述

在 JavaScript 中，有没有办法计算整个页面上的 angular watch 数量?

Is there a way, in JavaScript, to count the number of angular watches on the entire page?

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

We use Batarang, but it doesn't always suit our needs. Our application is big and we're interested in using automated tests to check if the watch count goes up too much.

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

It would also be useful to count watches on a per-controller basis.

编辑:这是我的尝试.它计算所有类 ng-scope 中的手表.

Edit: here is my attempt. It counts watches in everything with class 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;
})();

推荐答案

(您可能需要将 body 更改为 html 或您放置 ng-应用程序)

(You may need to change body to html or wherever you put your 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 搜索，并且观察者可能会在他/她的答案/评论中重复.

  • Thanks to erilem for pointing out this answer was missing the $isolateScope searching and the watchers potentially being duplicated in his/her answer/comment.

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

    Thanks to Ben2307 for pointing out that the 'body' may need to be changed.

    我做了同样的事情，只是我检查了 HTML 元素的 data 属性而不是它的类.我在这里运行你的:

    I did the same thing except I checked the data attribute of the HTML element rather than its class. I ran yours here:

    http://fluid.ie/

    得到了 83.我跑了我的，得到了​​ 121.

    And got 83. I ran mine and got 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');
            }
        }
    }
    

    没有打印出来，所以我猜我的更好(因为它发现了更多的手表) - 但我缺乏深入的角度知识来确定我的不是解决方案集的适当子集.

    And nothing printed out, so I'm guessing that mine is better (in that it found more watches) - but I lack intimate angular knowledge to know for sure that mine isn't a proper subset of the solution set.

    这篇关于如何计算页面上的观看总数?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！