在 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 对象是我们拥有的最接近全局上下文的对象角度应用.将过多的逻辑附加到这个全局上下文中是一个坏主意，在同样，弄脏 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.
我强烈建议你看一看:
我知道将所有内容附加到 $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:
Then I tried giving a shot to 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屋！
