javascript - 为什么不建议将 $rootScope 与函数一起使用？

Question

在研究 Angularjs 的 FEQ 时，我看到了以下文章:

$rootScope exists, but it can be used for evil

Scopes in Angular form a hierarchy, prototypally inheriting from a root scope at the top of the tree. Usually this can be ignored, since most views have a controller, and therefore a scope, of their own.

Occasionally there are pieces of data that you want to make global to the whole app. For these, you can inject $rootScope and set values on it like any other scope. Since the scopes inherit from the root scope, these values will be available to the expressions attached to directives like ng-show just like values on your local $scope.

Of course, global state sucks and you should use $rootScope sparingly, like you would (hopefully) use with global variables in any language. In particular, don't use it for code, only data. If you're tempted to put a function on $rootScope, it's almost always better to put it in a service that can be injected where it's needed, and more easily tested.

Conversely, don't create a service whose only purpose in life is to store and return bits of data.

— AngularJS FAQ - $rootScope exists, but it can be used for evil

所以我的疑问是为什么不建议将 $rootScope 作为全局函数用于函数？有任何性能问题吗？

Answer 1

我过去已经回答过这个问题，但你问这些问题很好。

$rootScope exists, but it can be used for evil Scopes in Angular form a hierarchy, prototypally inheriting from a root scope at the top of the tree. Usually this can be ignored, since most views have a controller, and therefore a scope, of their own.

非隔离范围是分层的，但大多数开发人员应该使用具有隔离范围的指令。 AngularJS 作用域的层次结构本质是 Angular 应用程序中许多错误的来源。这是一个我喜欢称之为作用域出血的问题，其中作用域属性在 DOM 树中的某处被神奇地修改，而你不知道为什么。

Angular 的默认 行为是针对固有范围的，这使得一个 Controller 很容易更新另一个 Controller 管理的内容，依此类推。这就是在源代码之间创建意大利面条式连接的方式。使维护该代码变得非常困难。

Occasionally there are pieces of data that you want to make global to the whole app. For these, you can inject $rootScope and set values on it like any other scope.

不，那是不正确的。 AngularJS 允许您定义常量、值和服务等内容。这些是可以注入(inject)到路由、 Controller 和指令中的东西。这就是你如何让你的应用程序全局访问的东西，如果你想让你的 Controller 或指令可测试，你也可以这样做。单元测试编写者不知道指令或 Controller 所依赖的 $rootScope 中应该有哪些属性。他们必须假设 $rootScope 没有发生变化以提供服务或数据。

Of course, global state sucks and you should use $rootScope sparingly, like you would (hopefully) use with global variables in any language.

问题不是 $rootScope，而是人们用它做什么。许多应用程序将当前用户、身份验证 token 和 session 数据添加到 rootScope 中。这最终会在模板中大量使用(如果用户登录则显示 X，否则显示 Y)。问题是 HTML 不传达范围层次结构。因此，当您看到 {{user.firstname + ' ' + user.lastname}} 时，您不知道变量 user 是从哪里来的。第二个问题是子作用域可以隐藏根属性。与前面的示例一样，如果指令执行此 scope.user = 'bla bla bla'。它没有替换 rootScope 上的值。它隐藏了它。现在您在模板中得到了一些奇怪的意想不到的东西，并且您不知道为什么变量 user 发生了变化。

Conversely, don't create a service whose only purpose in life is to store and return bits of data.

Angular 的 $cacheFactory 和 $templateCache 是仅用于存储数据的服务示例。我认为作者试图鼓励在 Angular 的模块中使用常量和值，但这并不是一个好的描述。

So My doubt is why $rootScope is not recommended for functions as a global function? Is there any performance issue?

$rootScope 是angular.config(..) 期间唯一可用的范围。如果这是唯一一次您可以执行此操作，则在此期间可以修改范围。例如;您可能需要在应用程序启动之前注入(inject) API key 或 Google anayltics 变量。

任何 作用域上的函数通常不是一个好主意。主要是因为作用域中的所有内容都在模板的表达式中被消化。函数倾向于隐藏 繁重的操作。在调用函数时通过读取 HTML 无法判断模板的重量。我见过像 getHeight() 这样的范围函数，其中函数本身执行 3 级嵌套循环。每次 Angular 消化观察者以查看它是否已更改时，都必须调用该函数。您应该尽量让您的模板保持干燥。