我应该始终将函数绑定到$ scope对象吗？ [英] Should I always bind functions to $scope objects?

问题描述

当我创建控制器时，我总是将函数添加到 $ scope 对象，如下所示：

When I'm creating controllers, I always add functions to the $scope object, like so:

function DummyController($scope) {

  $scope.importantFunction = function () { /*...*/ };

  $scope.lessImportantFunction = function () { /*...*/ };

  $scope.bussinessLogicFunction = function () { /*...*/ };

  $scope.utilityFunction = function () { /*...*/ };

}

当然我保持我的控制器封装得很好，制作确保业务逻辑位于适当的组件（通过DI注入）或服务。所以控制器专注于在UI和后端之间编排事物。

Of course I'm keeping my controllers encapsulated nicely, making sure that business logic lies in appropriate components (injected via DI) or services. So the controller is focused on orchestrating things between UI and Backend.

然而，正如你所看到的 - 仍然有很多不同类型的功能。我喜欢保留更多，因为它提高了可读性恕我直言。

However, as you can see - there are still plenty of different kinds of functions. I like to keep more of them, as it improves readability IMHO.

问题
这是一个很好的做法，有很多附加到$ scope对象的函数？它有性能开销吗？我知道 $ scope 是一种特殊的对象，在Angular的摘要周期中经常被评估，所以我这样做是正确的还是我会坚持我的方法来惹麻烦？

The question Is that a good practice to have lots of functions attached to $scope object? Does it have performance overhead? I know that $scope is a special kind of object, being constantly evaluated in Angular's digest cycle, so am I doing this right or will I ask for trouble by sticking to my approach?

（请注意：我不是在寻找替代方法。我正在寻找对知道Angular内部人员的深思熟虑的分析。）

(Please note: I'm not looking for alternative approaches. I'm looking for some well thought analysis of people who know Angular's internals.)

Thx！

更新：

Anders的答案是非常好，并向您展示了一些可以遵循的路径。今天我遇到了这个美女，一个用于Angular Js调试和性能监控的chrome扩展。它显示了所有范围和分配的变量，以及一些有趣的性能图。任何Angular开发人员都必须拥有！

The answer from Anders is very good and shows you some paths to follow. Today I ran into this beauty, a chrome extension for Angular Js debugging and performance monitoring. It shows you all the scopes and assigned variables, along with some interesting performance graph. A must have for any Angular developer!

推荐答案

更新：

1. 我应该将所有功能和变量添加到示波器吗？

不，如果需要在模板中访问它们，则只应向范围中添加函数和变量。仅在控制器功能中访问的变量不应在示波器上，它应该是控制器功能的本地变量。

No, you should only add functions and variables to your scope if you need to access them in your template. A variable that is only accessed in the controller function shouldn't be on the scope, it should be local to the controller function.

将是否如果我在范围中添加了很多功能会影响性能吗？

一般来说，没有。范围上执行的函数（如 ng-click =myFunction（））不应以明显的方式影响性能。但是如果你的函数执行如下： {{myFunction（）}} 它会在每个摘要中执行，因为Angular需要知道它的返回值是否已经改变所以它可以更新用户界面。

Generally, no. Functions on your scope that are executed like ng-click="myFunction()" should not affect performance in a noticeable way. But if your function is executed like this: {{myFunction()}} it will get executed for every digest as Angular needs to know if the return value of it has changed so it can update the UI.

如果我在范围中添加了很多变量会影响性能吗？

如果你在Angular会检查它们的地方使用它们会影响性能。如果您在 ng-model =myVariable中使用它们，那么这些情况就是您打印出来的地方，如 {{myVariable}} ， ng-show =myVariable等。 ng-click 等指令不执行脏检查，这样就不会减慢速度。 Angular背后的人建议你不要在一个页面上使用超过2000个表达式，这些表达式需要重新绘制/脏检查，因为你的性能将在此之后开始降级。 2000年的极限是他们在研究Angular中的性能时发现的。

It can affect performance if you use them in places where Angular will dirty check them. Those cases are where you print them out like {{myVariable}}, if you use them in ng-model="myVariable", ng-show="myVariable", etc. Directives like ng-click does not perform dirty checks, so that doesn't slow things down. The guys behind Angular recommends you not to use more than 2000 expressions on one page that will require repaints/dirty checks, as your performance will start do degrade after that. The limit of 2000 is something they've found while researching performance in Angular.

请注意，仅仅因为您在作用域上添加了属性，并不意味着Angular将对其执行脏检查。它们必须在您的模板中用于执行脏检查（但不能用于ng-click）。

Note that just because you add a property on the scope, it doesn't mean that Angular will perform dirty checks on it. They have to be used in your template for dirty checks to be performed (but not for ng-click).

如果我希望获得最佳性能我的Angular应用程序，我应该注意什么？

就像我上面提到的那样，尝试将绑定模板表达式的数量保持在2000以下。如果你在您的示波器上实现监视，确保监视的表达式执行得非常快。这是一个你不应该这样做的例子：

Like I mentioned above, try to keep the number of bound template expressions below 2000. And if you implement watches on your scope, make sure that the expression for the watch executes really quickly. This is an example of how you shouldn't do it:

$scope.items = [];
for (var i = 0; i < 1000; i++) {
    $scope.items.push({prop1: 'val1', prop2: 'val2', prop3: 'val3'});
}

$scope.$watch('items', function() {

}, true);

通过添加 true 作为第三个参数为了$ watch，你告诉Angular为每个摘要周期循环遍历 $ scope.items ，以检查千件商品的任何属性是否已经改变，这将是昂贵的在时间和记忆中。

By adding the true as the third argument to $watch, you're telling Angular to loop through $scope.items for every digest cycle to check if any property of the thousand items have changed, which will be costly both in time and memory.

你应该做的是：

$scope.items = [];
for (var i = 0; i < 1000; i++) {
    $scope.items.push({prop1: 'val1', prop2: 'val2', prop3: 'val3'});
}

$scope.$watch('items.length', function() {

});

也就是说，只检查 $ scope.items.length 已经改变了。该表达式将很快执行。

That is, only check when $scope.items.length have changed. That expression will execute very quickly.

---

原帖：

如果你的问题是将函数暴露给模板而不是对象更好那么是的，你应该尽可能多地使用函数。这样你就可以将逻辑封装在控制器中，而不是让它流入你的模板。举个例子：

If your question is "is it better to expose functions to the template than objects" then yes, you should be using functions as much as you can. That way you encapsulate the logic inside the controller instead of letting it bleed into your template. Take this example:

<div ng-show="shouldShow">Toggled div</div>
<button ng-click="shouldShow = !shouldShow">Toggle<button>

这里的模板对发生的事情有太多的了解。相反，这应该像这样解决：

Here the template has a little too much knowledge about what's happening. Instead, this should be solved like this:

// controller
var shouldShow = false;
scope.toggle = function() {
    shouldShow = !shouldShow;
}
scope.shouldShow = function() {
    return shouldShow;
}

<!-- template -->
<div ng-show="shouldShow()">Toggled div</div>
<button ng-click="toggle()">Toggle<button>

通过这样做，在不触及模板的情况下扩展控制器中的逻辑是微不足道的。虽然您现在的要求可能只是在按下按钮时切换div，但明天的要求可能是在发生这种情况时更新应用程序的其他部分。如果您使用函数，则很容易在函数内添加该逻辑而无需更改模板。

By doing it like this it's trivial to expand the logic in the controller without touching the template. While your requirements right now might be to just toggle the div when you press the button, tomorrows requirements might be to update some other part of the application when that happens. And if you use a function instead, it's easy to add that logic inside the function without changing the template.

您的作用域上的函数比使用属性有更多的开销，但是当这一天到来时，这种开销可能不会降低您的应用程序的速度。所以在有意义的时候使用函数。

Functions on your scope have a bit more overhead than using properties, but that overhead probably won't be what's slowing down your app when that day comes. So use functions when they make sense.

但是你仍然应该尽量保持你的控制器尽可能小。如果它们增长到包含大量功能/功能，您应该将控制器拆分为可重复使用的指令。

But you should still try to keep your controllers as small as possible. If they grow to contain tons of functions/functionality, you should probably split up your controller into reusable directives.

这篇关于我应该始终将函数绑定到$ scope对象吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！