为什么不推荐将$ rootScope与函数一起使用？ [英] Why using $rootScope with functions is not recommended?

问题描述

在调查Angularjs的FEQ时，我在下面的文章中看到：

While am looking into the FEQs of Angularjs I've seen below article:

$ rootScope存在，但它可以用于恶意

Angular中的范围形成层次结构，原型继承自树顶部的根范围。通常这可以忽略，因为大多数视图都有一个控制器，因此也有一个自己的范围。

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.

偶尔会有一些数据需要全局化整个应用程序。对于这些，您可以注入 $ rootScope 并像其他任何范围一样设置值。由于范围继承自根范围，因此这些值可用于附加到指令的表达式，如 ng-show ，就像本地 $上的值一样范围。

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.

当然，全球州很糟糕，你应该谨慎使用 $ rootScope 就像你（希望）在任何语言中使用全局变量一样。特别是，不要将它用于代码，只用于数据。如果您想在 $ rootScope 上添加一个函数，那么将它放在一个可以在需要的地方注入并且更容易测试的服务几乎总是更好。

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常见问题 - $ rootScope存在，但它可以用于邪恶

所以我怀疑为什么$ rootScope不是推荐用作全局函数的函数？有任何性能问题吗？

推荐答案

我过去曾回答过这个问题，但你做得很好问这些问题。

I've answered this in the past, but it's good that you're asking these questions.

$ rootScope存在，但它可以用于Angular形式的邪恶范围层次结构，原型继承自顶部的根范围那个树。通常这可以忽略，因为大多数视图都有自己的控制器，因此也有范围。

$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范围的分层性质是角度应用程序中许多错误的来源。这是一个问题，我喜欢称​​范围出血，其中范围属性在DOM树中的某个地方被神奇地修改，你不知道为什么。

Non-isolated scopes are hierarchical, but most developers should be using directives that have isolated scopes. The very hierarchical nature of AngularJS's scope is the source of many bugs in angular apps. It's a problem I like to call scope bleeding where a scope property is modified magically somewhere in the DOM tree and you don't know why.

Angular的默认行为属于固有范围，这使得一个控制器很容易更新由另一个控制器管理的东西，依此类推。这就是创建源代码之间的意大利面连接的方式。使维护代码变得非常困难。

Angular's default behavior is to inherent scopes and this makes it tempting for one controller to update something managed by another controller, so on, and so on. This is how spaghetti connections between source code is created. Making it very difficult to maintain that code.

有时，您希望对整个应用程序进行全局数据处理。对于这些，您可以像其他任何范围一样注入$ rootScope并设置值。

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允许您定义常量，值和服务等内容。这些可以注入到路由，控制器和指令中。这就是你在全球范围内访问应用程序的方式，如果你想让你的控制器或指令可测试，你可以这样做。单元测试编写器不知道指令或控制器所依赖的$ rootScope中的属性。他们必须假设$ rootScope没有变异来提供服务或数据。

No that's not correct. AngularJS allows you to define things like constants, values, and services. These are things that can be injected into routes, controllers and directives. That is how you make things accessible globally to your app, and this how you do it if you want to make your controllers or directives testable. A unit test writer doesn't know what properties should be in the $rootScope that a directive or controller depends upon. They have to assume that the $rootScope has not mutated to provide a service or data.

当然，全球状态很糟糕你应该使用$ rootScope节制，就像你希望用任何语言的全局变量一样。

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

问题不是$ rootScope而是什么人们正在做着它。许多应用程序将当前用户，身份验证令牌和会话数据添加到rootScope中。这最终会在模板中大量使用（如果用户登录则显示X，否则显示Y）。问题是HTML不会传达范围层次结构。所以，当你看到 {{user.firstname +''+ user.lastname}} 时，你不知道变量 user 来自。第二个问题是子范围可以影子根属性。如上例所示，如果指令执行此操作 scope.user ='bla bla bla'。它没有替换rootScope上的值。它隐藏了它。现在你在模板中得到一些奇怪的意外事情，你不知道为什么变量 user 已经改变了。

The problem isn't $rootScope but what people are doing with it. Many apps add the current user, the auth tokens, and the session data into the rootScope. This ends up getting used heavily in templates (shows X if user logged in otherwise show Y). The problem is that the HTML doesn't communicate scope hierarchy. So when you see {{user.firstname + ' ' + user.lastname}} you have no idea where the variable user came from. The second problem is child scopes can shadow root properties. As in the previous example if a directive does this scope.user = 'bla bla bla'. It hasn't replaced the value on the rootScope. It's hidden it. Now you get some strange unexpected things in the templates, and you don't know why the variable user has changed.

相反，不要创建一个服务，其唯一目的是存储和返回数据位。

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

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

Angular's $cacheFactory and $templateCache are examples of services that exist only too store data. I think the author was trying to encourage the use of constants and values in Angular's modules, but that's not a good description to do that.

所以我怀疑为什么$ rootScope不建议用作全局函数？是否存在性能问题？

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

$ rootccope是 angular.config期间唯一可用的范围（.. ）。在此期间，如果这是唯一的时间，则可以修改范围。例如;您可能需要在应用程序启动之前注入API密钥或Google anayltics变量。

The $rootScope is the only scope available during angular.config(..). It's during this time that the scope can be modified if this is the only time that you can do it. For example; you may need to inject an API key or Google anayltics variable before the app starts.

任何范围内的函数通常是一个坏主意。主要是因为范围中的所有内容都在模板中的表达式中被消化。功能可以隐藏繁重的操作。通过在调用函数时读取HTML，无法判断模板有多重。我已经看到范围函数，如 getHeight（），其中函数本身执行3级嵌套循环。每次角度消化观察者以查看它是否发生变化时，必须调用该函数。您应该尽量将模板保持为 dry 。

Functions on any scope are generally a bad idea. Mainly for the reason that everything in scopes is digested in expressions on the templates. Functions tent to hide heavy operations. It's impossible to tell how heavy a template is by reading the HTML when it calls a function. I've seen scope functions like getHeight() where the function itself performed 3 levels of nested loops. That function has to get called every time angular digests the watchers to see if it's changed. You should try to keep your templates as dry as possible.

这里无耻的自我推销：

http：// www.thinkingmedia.ca/2015/01/learn-how-to-use-scopes-properly-in-angularjs/

这篇关于为什么不推荐将$ rootScope与函数一起使用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！