在模板内的条件运算符和函数调用之间进行选择

Question

我的问题是关于在这两种方法中选择哪种更好更快。

我有以下模板，它根据条件应用三个类中的任何一个。

方法一：

我在模板中使用了三元运算符

data-ng-class="(data.selectionStatus[id] === 'RED') ? 'red-class' : (data.selectionStatus[id] === 'BLUE') ? 'blue-class' : 'no-color-class'"

方法二：

不要在模板中使用条件，而是使用一个函数来 return 正确的值。

Template:
           data-ng-class="getSelectionStatus(id)"


JavaScript:

           $scope.getSelectionStatus = function (id) {

                /*get status using id*/
                var selectionStatus =  $rootScope.data.selectionStatus[id];

                if (selectionStatus === 'RED') {
                    return 'red-class';
                } else if (selectionStatus === 'BLUE') {
                    return 'blue-class'';
                } else {
                    return 'no-color-class';
                }
            };

P.S。我使用 AngularJS v1.3.10.

Answer 1

如果您还没有读过 John Papa 的 Angular 风格指南 (https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md)，我强烈推荐它。它没有针对您情况的特定规则，但其中解释的原则和规则将帮助您为您的项目做出最佳决定。

就速度而言，从技术上讲，一种方法 IS 比另一种更快。但是，它可能因浏览器而异： javascript if/else or ternary operator is faster?

因此，除非您在 javascript 中处理实时音频，否则可读性远远超过这两种方法的微不足道的性能差异。在我看来，方法 2 比第一种方法更具可读性。这并不是说某些情况会迫使您使用方法 #1。

如果您将模板预编译为 javascript，您可以像这样将逻辑放在新行中：

<div data-ng-class="(data.selectionStatus[id] === 'RED') ?
    'red-class' : 
    (data.selectionStatus[id] === 'BLUE') ?
        'blue-class' : 
        'no-color-class'">

但不推荐。即使在不同的行上，它的可读性也不是很好。正如 charlietfl 提到的，使用对象语法也略微提高了可读性。如果你把它放在多行上更是如此：

<div data-ng-class="{
    'red-class': data.selectionStatus[id] === 'RED', 
    'blue-class': data.selectionStatus[id] === 'BLUE',
    'no-color-class': !data.selectionStatus[id] 
}">

如果你真的想变得疯狂，你可以使用 switch 语句。没有性能差异，但它比任何一种解决方案都更具可读性：

       $scope.getSelectionStatus = function (id) {

            /*get status using id*/
            var selectionStatus =  $rootScope.data.selectionStatus[id];

            switch (selectionStatus) {
              case 'RED':
                return 'red-class';
                break;
              case: 'BLUE':
                return 'blue-class';
                break;
              default:
                return 'no-color-class';
            }
        };

在模板内的条件运算符和函数调用之间进行选择

chosse between conditional operator and function call inside template

angularjs

angular-template