Question

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

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

方法1：

我在模板

中使用了三元运算符

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

方法2：

不使用模板中的条件，而是使用将返回正确值的函数。

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的角度风格指南（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

1 个答案: