Javascript 在ng类中调用函数是一种糟糕的形式吗?

Javascript 在ng类中调用函数是一种糟糕的形式吗?,javascript,angularjs,Javascript,Angularjs,这个问题是关于AngularJS的性能,而不是编码风格。(话虽如此,如果2017年使用ng repeat的形式很糟糕,请告诉我!) 我发现自己用ng repeat编写了很多列表,并用ng class应用了一种特殊的样式来指示选择了哪个项目 然而,我总是在策略之间摇摆不定。我想知道是否有一个明确的“最佳”方式来指示列表中的选定项目。在这种情况下,我的主要目标是尽可能获得最佳性能 选项A-在项目中添加类似“isSelected”的属性;如果为true,则通过ng类添加类 选项B-对于列表中的每个项目

这个问题是关于AngularJS的性能,而不是编码风格。(话虽如此,如果2017年使用ng repeat的形式很糟糕,请告诉我!)

我发现自己用ng repeat编写了很多列表,并用ng class应用了一种特殊的样式来指示选择了哪个项目

然而,我总是在策略之间摇摆不定。我想知道是否有一个明确的“最佳”方式来指示列表中的选定项目。在这种情况下,我的主要目标是尽可能获得最佳性能

选项A-在项目中添加类似“isSelected”的属性;如果为true,则通过ng类添加类

选项B-对于列表中的每个项目,调用一个函数来检查它是否被选中

选项C—从选项B中的函数中获取逻辑,并将其直接放入DOM中,保存函数调用

我更喜欢选项B,因为我不必用不必要的属性来改变对象。但是,检查是在ng repeat中完成的,因此这意味着该函数将被调用几十次。正如您在下面看到的,逻辑本身非常便宜,但是在$digest中调用它有没有被偷听到

我选择哪一个都重要吗

<!-- option A -->
<li ng-repeat"item in myItems"
    ng-class={ 'active': item.isSelected }">

<!-- option B -->
<li ng-repeat"item in myItems"
    ng-class={ 'active': vm.isItemSelected(item.code) }">

<!-- Option C --> 
<li ng-repeat"item in myItems"
    ng-class={ 'active': vm.itemCodeSelected === item.code }">


不,这并不比在视图中的任何其他位置调用作用域表达式中的函数更糟糕


作用域表达式在每个摘要周期进行求值,无论它们是在ngClass、ngStyle、ngShow还是其他任何地方。

不,这并不比在视图的其他任何地方调用作用域表达式中的函数更糟糕

作用域表达式在每个摘要周期进行求值,无论它们是在ngClass、ngStyle、ngShow还是其他任何地方。

选项C 您可以创建一个函数并在列表项中调用它。然后将所选项目与项目本身进行比较

select(item) {
   $scope.selected = item
}
像这样使用它

<li ng-repeat"item in myItems"
    ng-click="$scope.select(item)"
    ng-class={ 'active': item == $scope.selected }">
选项C 您可以创建一个函数并在列表项中调用它。然后将所选项目与项目本身进行比较

select(item) {
   $scope.selected = item
}
像这样使用它

<li ng-repeat"item in myItems"
    ng-click="$scope.select(item)"
    ng-class={ 'active': item == $scope.selected }">

我应该补充说这是真的,除非作用域表达式是使用
{{::expression}
语法的一次性绑定。我应该补充说这是真的,除非作用域表达式是使用
{::expression}
语法的一次性绑定。表达式中的
$scope
引用是错误的。并且范围表达式仍然在每个摘要周期上求值。它只是不需要调用一个函数,使其速度稍微快了一点。@JCFord$scope引用取决于角度版本,所以这不是重点。表达式求值与调用在所有数组元素中搜索以查找匹配项的函数不同。因此,这是在我运行1.5的情况下,您可以在这个场景中使用的最好的方法。7@user2954463由于使用vm引用控制器,而不是使用vm替换$scope,因此表达式中的
$scope
引用是错误的。并且范围表达式仍然在每个摘要周期上求值。它只是不需要调用一个函数,使其速度稍微快了一点。@JCFord$scope引用取决于角度版本,所以这不是重点。表达式求值与调用在所有数组元素中搜索以查找匹配项的函数不同。因此,这是在我运行1.5的情况下,您可以在这个场景中使用的最好的方法。7@user2954463当您使用vm引用控制器时,请将$scope替换为vm和u done