javascript - angular $broadcast 和 $on 贵吗？

Question

有人告诉我使用 Angular 事件可能很昂贵(我一直无法验证这一点)

任何对 $broadcast 和 $on 的调用都应该用工厂或服务“包装”以注入(inject)到它们相应的组件中以保持性能吗？

同样，我宁愿使用 $on 并直接监听被触发的事件，而不是创建一个工厂，该工厂本质上只是注册要在接收到事件时调用的函数 - 让我们调用这是一个调度员。

请注意，不仅仅是一个组件(指令)监听“某个事件”，还会有多种组件监听这个事件。

示例调度程序:

angular.module('app').factory('dispatcher', ['$rootScope', function ($rootScope) {

    var registeredFns = [ ];

    $rootScope.$on('some-event', function (evt, msg) { 
        _.each(registeredFns, function (fn) {
            fn.apply(null, msg);
        });
    });

    return {
        onSomeEvent: function (fn) {
            registeredFns.push(fn);
        }
    };
});

然后将它注入(inject)到我需要它的地方——可能是一个指令，也可能是一个 Controller ，而这无关紧要。

Answer 1

它们一点也不贵……但是如果它们被滥用，它们可能会很贵(就像生活中的其他任何东西一样 - 这听起来像是一个好笑话的开始!)

重要的是要了解这里实际发生了什么，以及 code实际上很简单。如果您调用 $emit()，它只会执行一个 for() 循环，遍历已注册的监听器数组并调用每个监听器。它在您首先调用它的作用域上执行此操作，然后“向上”遍历每个父级，直到它到达 $rootScope。

有一些额外的代码来处理诸如 stopPropagation 之类的事情，除此之外就是这样。

$broadcast 做了类似的事情，但方向相反:它执行这个 for() 循环，然后遍历每个 child 范围。这是一个非常重要的区别，因为如果你执行 $rootScope.$broadcast() 并且你有很多 ngRepeats 和指令四处 float ，你可能会做比你预期更多的工作 -即使这些范围都没有监听此事件，Angular 仍然必须遍历所有范围才能弄清楚。

如果您想在 jsPerf 或类似程序中进行最快的测试，您最快的用例是使用 $rootScope.$emit() 和 $rootScope.$on() 。这将为您提供基本消息传递的单一范围测试，您可以从那里开始。