在Angularjs应用程序中使用$ rootscope的最佳实践？ [英] Best practice for using $rootscope in an Angularjs application?

问题描述

我们有一个大型的Angularjs 1.6应用程序，该应用程序的$ rootscope分散在整个应用程序的过滤器，服务，路线等的200多个位置中。因此需要对其进行重构，但是我不确定如何知道何时去掉它。什么时候在应用程序中使用$ rootscope是最佳实践？

We have a large Angularjs 1.6 application that has $rootscope scattered throughout the app in over 200 places in filters, services, routes, etc.. so it needs to be refactored, but I'm not sure how to know when to remove it. When is it a best practice to use $rootscope in the application?

我从无所不读，到用它来存储变量（我认为该变量用于在控制器之间共享数据）都读了。从那以后，我读到最好在这种用例中使用工厂/服务，并且我还读到一种有效的用例是将$ rootscope用作全局事件总线。

I've read everything from never, to using it for storing variables, which I assumed was for sharing data between controllers. I've since read that it's better to use factories/services for this use case instead and I also read that one valid use case is to use $rootscope as a global event bus.

我并没有在Angularjs文档中看到这个解释。

I didn't really see this explained in the Angularjs docs.

推荐答案

来自 ng-book ：

当Angular开始运行并生成视图时，它将创建从ng-app
根元素到$ rootScope的绑定。 $ rootScope是所有$ scope对象的最终父对象。
$ rootScope对象是我们在
Angular应用程序中最接近全局上下文的对象。在
中给这个全局上下文附加太多逻辑是一个坏主意，而不是弄脏JavaScript全局范围不是一个好主意。

When Angular starts to run and generate the view, it will create a binding from the root ng-app element to the $rootScope. This $rootScope is the eventual parent of all $scope objects. The $rootScope object is the closest object we have to the global context in an Angular app. It’s a bad idea to attach too much logic to this global context, in the same way that it’s not a good idea to dirty the JavaScript global scope.

是的，您绝对应该使用服务在模块之间共享数据和逻辑。

You are right, you should definitely use Services to share data and logic between your modules.

$ rootScope 中的大量逻辑意味着您的应用程序中的可维护性和模块性很差，也很难测试问题。

Putting a lot of logic in your $rootScope means having bad maintainability and modularity in your application, it is also very difficult to test issues.

建议您看看：

• 服务AngularJS文档


• 关于如何在控制器之间共享数据的Thinkster精彩文章


• 辛普尔顿的电视广播


• @ Breck421回答此问题

• Services AngularJS Documentation
• Thinkster brilliant article on how to share data between controllers
• Screencast by Simpulton
• @Breck421 answer to this question

我知道将所有内容附加到 $ rootScope 可能很容易，但是很难对其进行处理，进行少量更改，将代码重新用于其他应用程序或模块并总体上测试您的应用程序。

I know it may be easy to attach everything to $rootScope, but It is just difficult to work on it, make little changes, reusing your code for other applications or modules and test your application in general.

编辑

最近，我不得不从API提取一些项目并捕获这些项目，以便在特定视图中显示它们。项目获取机制位于某个 Factory 中，而格式化和显示项目的机制位于 Controller 中。

Recently I had to fetch some items from API and catch these items in order to show them in a certain view. The item fetching mechanism was in a certain Factory, while the mechanism to format and show the items was in a Controller.

因此，我必须在 Factory 中发出一个事件，当物品被拿走并在 Controller 。

So, I had to emit an event in the Factory when items got fetched and catch this event in the Controller.

$ rootScope方式

//Factory
$rootScope.$broadcast('refreshItems', items);
//Controller
$scope.$on('refreshItems', doSomething());

显然很有效，但我不太喜欢使用 $ rootScope ，而且我还注意到该任务的执行情况非常糟糕。

It clearly worked but I didn't really like to use $rootScope and I've also noticed that the performance of that task were pretty miserable.

然后我尝试给 Postal.js ：

Postal.js是一种内存中的消息总线-受AMQP的启发非常宽松-用JavaScript编写的
。 Postal.js在浏览器中运行，或者在使用node.js的服务器
中运行。它采用了熟悉的事件式范例（大多数JavaScript开发人员都熟悉的
），并通过
进行了扩展，从而提供了经纪人和订户实现，它们比您通常使用的更为复杂

Postal.js is an in-memory message bus - very loosely inspired by AMQP - written in JavaScript. Postal.js runs in the browser, or on the server using node.js. It takes the familiar "eventing-style" paradigm (of which most JavaScript developers are familiar) and extends it by providing "broker" and subscriber implementations which are more sophisticated than what you typically find in simple event emitting/aggregation.

我尝试使用 Postal.js 满足这种需求，我发现它确实比为此目的使用 $ rootScope 更快。

I tried using Postal.js for this kind of needs and I found out that it is really faster than using $rootScope for this purpose.

//Factory
$scope.$bus.publish({
                  channel : 'reloadItems',
                  topic   : 'reloadItems'
                  data    : items
);

//Controller
$scope.$bus.subscribe({
  channel  : 'reloadItems',
  topic    : 'reloadItems',
  callback : function () {
    resetAndLoadItems();
  }
});

我希望我会有所帮助。

这篇关于在Angularjs应用程序中使用$ rootscope的最佳实践？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！