如何计算一页上的手表总数？

有没有一种方法，在 JavaScript 中，计算整个页面上的角表的数量？

我们使用 蝙蝠怪，但它并不总是适合我们的需要。我们的应用程序很大，我们有兴趣使用自动化测试来检查手表数量是否上升过多。

以每个控制器为基础来计算手表数量也是有用的。

编辑 : 这里是我的尝试。它计数手表在所有类 n-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;
})();
75894 次浏览
小开
最佳答案

(你可能需要将 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 元素的 data 属性而不是它的类之外，我做了同样的事情。我在这里查过你的:

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

而且没有打印出来，所以我猜测我的更好(因为它发现了更多的手表)-但我缺乏亲密的角度知识，以确定我的不是一个正确的子集的解决方案集。

小开

下面是我在检查范围结构的基础上提出的一个拙劣的解决方案。“似乎”起作用了。我不确定这有多准确，这肯定取决于一些内部 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);
};
小开

比如 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;
})();
小开

我认为上面提到的方法是不准确的，因为它们将同一范围内的观察者数量加倍计算。下面是我的书签工具:

Https://gist.github.com/dtfagus/3966db108a578f2eb00d

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

小开

由于最近在我的应用程序中遇到了大量的观察者，我发现了一个很棒的库，名为 数据统计-https://github.com/kentcdodds/ng-stats。它有最小的设置，并给你在当前页面上的观察者数量 + 摘要周期长度。它还可以投射一个小型的实时图形。

小开

这是我使用的函数:

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


})();

此函数使用散列来避免多次计算同一作用域。

小开

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

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”。

小开

我直接从 $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'));

小开

在 AngularJS1.3.2中，向 ngMock 模块添加了一个 countWatchers方法:

/**
* @ngdoc method
* @name $rootScope.Scope#$countWatchers
* @module ngMock
* @description
* Counts all the watchers of direct and indirect child scopes of the current scope.
*
* The watchers of the current scope are included in the count and so are all the watchers of
* isolate child scopes.
*
* @returns {number} Total number of watchers.
*/


function countWatchers()
{
var root = angular.element(document).injector().get('$rootScope');
var count = root.$$watchers ? root.$$watchers.length : 0; // include the current scope
var pendingChildHeads = [root.$$childHead];
var currentScope;


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


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


return count;
}

参考文献

小开

普朗蒂安的答案更快: 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();
小开

有一个新的 Chrome 插件，自动显示当前的总观众和最后的变化(+/-)在任何时候在您的应用程序... 它是纯粹的棒。

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

小开

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

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

只要确保使用了正确的 querySelector 即可。


提交答案