выбор между условным оператором и вызовом функции внутри шаблона

Question

выбор между условным оператором и вызовом функции внутри шаблона

0

Мой вопрос заключается в выборе того, какой из этих двух подходов лучше и быстрее.

У меня ниже шаблон, который применяет любой из трех классов на основе условий.

Подход 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';
                }
            };

PS Я использую AngularJS v1.3.10.

ScrapCode 03 авг. 2016, в 15:42

Источник

0

использовать синтаксис объекта, легче читать
charlietfl 03 авг. 2016, в 13:55
0

@charlietfl, прости, что не понял тебя.
ScrapCode 03 авг. 2016, в 14:01
1

например: ng-class="{'red-class': data.selectionStatus[id] == 'RED','blue-class': data.selectionStatus[id] == 'BLUE', 'no-color-class': !data.selectionStatus[id]}"
charlietfl 03 авг. 2016, в 14:04

Показать ещё 1 комментарий

Теги:

angularjs

angular-template

1 ответ

Ещё вопросы

использовать синтаксис объекта, легче читать
например: ng-class="{'red-class': data.selectionStatus[id] == 'RED','blue-class': data.selectionStatus[id] == 'BLUE', 'no-color-class': !data.selectionStatus[id]}"

Pop-A-Stash · Accepted Answer · 2016-08-03T11-21-00.000Z

Если вы не читали руководство по стилю в стиле "Джон Папа" (https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md), я настоятельно рекомендую его. В нем нет конкретного правила для вашей ситуации, но изложенные в нем принципы и правила помогут вам принять наилучшее решение для вашего проекта.

Что касается скорости идет, технически один подход быстрее, чем другие. Однако он может варьироваться от браузера к браузеру: javascript if/else или тройной оператор быстрее?

Таким образом, если вы не имеете дело с аудио в реальном времени в 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';
            }
        };