จะนับจำนวนนาฬิกาทั้งหมดในหน้าได้อย่างไร

JavaScript มีวิธีในการนับจำนวนนาฬิกาเชิงมุมในหน้าทั้งหมดหรือไม่

เราใช้Batarangแต่ไม่เหมาะกับความต้องการของเราเสมอไป แอปพลิเคชันของเรามีขนาดใหญ่และเราสนใจที่จะใช้การทดสอบอัตโนมัติเพื่อตรวจสอบว่าจำนวนนาฬิกาเพิ่มขึ้นมากเกินไปหรือไม่

มันจะมีประโยชน์ในการนับจำนวนนาฬิกาบนพื้นฐานต่อคอนโทรลเลอร์

แก้ไข : นี่คือความพยายามของฉัน มันนับการเฝ้าดูทุกอย่างด้วยขอบเขตคลาส ng

(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-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'อาจต้องมีการเปลี่ยนแปลง

เป็นต้นฉบับ

ฉันทำสิ่งเดียวกันยกเว้นฉันตรวจสอบ data data ขององค์ประกอบ HTML แทนที่จะเป็น class ฉันวิ่งของคุณที่นี่:

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

และไม่มีอะไรที่พิมพ์ออกมาดังนั้นฉันเดาว่าของฉันจะดีกว่า (ในที่ที่มันพบนาฬิกาเพิ่มเติม) - แต่ฉันไม่มีความรู้เชิงมุมที่ใกล้ชิดที่จะรู้ว่าฉันไม่ได้เป็นเซตย่อยที่เหมาะสมของชุดการแก้ปัญหา

ฉันคิดว่าวิธีการดังกล่าวไม่ถูกต้องเนื่องจากพวกเขานับจำนวนผู้ดูในขอบเขตเดียวกันสองเท่า นี่คือบุ๊คมาร์คเวอร์ชันของฉัน:

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

นอกจากนี้ยังแสดงรายละเอียดเพิ่มเติมสำหรับการวิเคราะห์นักดู

นี่คือวิธีแฮ็คที่ฉันรวบรวมเข้าด้วยกันจากการตรวจสอบโครงสร้างขอบเขต มัน "ดูเหมือน" ในการทำงาน ฉันไม่แน่ใจว่านี่ถูกต้องแค่ไหนและแน่นอนขึ้นอยู่กับ 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);
    };

มีปลั๊กอิน chrome ใหม่ที่แสดงจำนวนผู้เฝ้าดูในปัจจุบันโดยอัตโนมัติและการเปลี่ยนแปลงครั้งล่าสุด (+/-) เมื่อใดก็ได้ในแอปของคุณ ... มันยอดเยี่ยมจริงๆ

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

ขณะที่ผมกำลังดิ้นรนกับเมื่อเร็ว ๆ นี้จำนวนมากของนักดูในใบสมัครของฉันเกินไปฉันพบห้องสมุดที่ดีเรียกว่าNG-สถิติ - https://github.com/kentcdodds/ng-stats มันมีการตั้งค่าที่น้อยที่สุดและให้จำนวนผู้ดูในหน้าปัจจุบัน + ความยาววงย่อย นอกจากนี้ยังสามารถฉายกราฟตามเวลาจริงขนาดเล็กได้

ปรับปรุงไมเนอร์สำหรับคำเช่นคำตอบของ 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;
})();

ใน AngularJS 1.3.2 มีcountWatchersการเพิ่มวิธีในโมดูล ngMock:

/ **
 * วิธี @ngdoc
 * @name $ rootScope.Scope # $ countWatchers
 * @module ngMock
 * @description
 * นับจำนวนผู้เฝ้าดูทั้งหมดของขอบเขตลูกโดยตรงและโดยอ้อมของขอบเขตปัจจุบัน
 * * * *
 * ผู้เฝ้าดูขอบเขตปัจจุบันรวมอยู่ในการนับและผู้ติดตามทั้งหมดจะเป็นเช่นนั้น
 * แยกขอบเขตของเด็ก
 * * * *
 * @returns {number} จำนวนผู้ดูทั้งหมด
 * /

  ฟังก์ชั่น countWatchers () 
   {
   var root = angular.element (เอกสาร). injector (). get ('$ rootScope');
   var count = root นักดู $$? root. $$ watchers.length: 0; // รวมขอบเขตปัจจุบัน
   var pendingChildHeads = [root. $$ childHead];
   var currentScope;

   ในขณะที่ (pendingChildHeads.length) 
    {
    currentScope = pendingChildHeads.shift ();

    ในขณะที่ (currentScope) 
      {
      นับ + = currentScope แล้วผู้ดู $$ currentScope. $$ watchers.length: 0;
      pendingChildHeads.push (currentScope $$ childHead.);
      currentScope = currentScope $$ nextSibling;
      }
    }

   นับผลตอบแทน
   }

อ้างอิง

• AngelJS Changelog: 1.3.2

• ngMock: $ rootScope.Scope. $ countWatchers

ฉันเอาโค้ดด้านล่างโดยตรงจาก$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'));

นี่คือฟังก์ชั่นที่ฉันใช้:

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

})();

ฟังก์ชันนี้ใช้แฮชที่จะไม่นับขอบเขตเดียวกันหลายครั้ง

มีฟังก์ชั่นเรียกซ้ำที่เผยแพร่โดยบล็อกของ 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;

หมายเหตุ: คุณอาจต้องเปลี่ยน "ng-app" เป็น "data-ng-app" สำหรับแอพเชิงมุมของคุณ

คำตอบของ 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();

ช้าไปเล็กน้อยสำหรับคำถามนี้ แต่ฉันใช้มัน

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

เพียงให้แน่ใจว่าคุณใช้ querySelector ที่ถูกต้อง