Angular: Scope Variable vs Funktion

Question

Was ist besser in Angular - an eine Variable oder an eine Funktion zu binden. Insbesondere:

• Gibt es eine Leistungseinbuße wegen Digest-Aufrufe oder zusätzliche Uhren, die für eine Funktion erstellt werden?
• Gibt es Empfehlungen, was der Umfang von Funktionen sein sollte und was nicht?

Beispiel für zwei Optionen:

<!-- With function --> 
<button ng-disabled="noDataFoo()">Add</button> 

<!-- With variable --> 
<button ng-disabled="noDataFlag">Add</button> 

Backing-Controller:

app.controller('sample', function($scope, $http) { 
    $scope.noDataFlag = true; 

    $scope.noDataFoo = function() { 
     return !$scope.data; 
    }; 

    $http('/api/getdata').success(function(data) { 
     $scope.data = data; 
     $scope.noDataFlag = false; 
    }; 
}); 

Answer 1

ich einige Tests gemacht und gezählt, wie oft die Funktion unter verschiedenen Umständen aufgerufen wird. Es tritt auf, die Funktion wird die Anzahl der Male aufgerufen hat es Bindung, manchmal zweimal die Zahl und es scheint zu passieren nach jeder externen Aktivität, wie Seite neu laden oder klicken auf die Schaltfläche oder AJAX aufrufen.

In einfachen Worten, wenn Sie <button ng-disabled="noDataFoo()"> haben und dann {{noDataFoo()}} in HTML, wird die Funktion 4 mal bei Seite zu laden aufgerufen werden, dann noch 2 oder 4 Mal, wenn einige $http Servicedaten bringen, und weitere 2 oder 4 Mal, wenn einig andere Taste wurde geklickt. Aus Experimenten ist die Zahl 2, wenn sich noDataFoo nicht ändert und 4 wenn es sich ändert. Dasselbe gilt übrigens auch für Klicks auf einen anderen Controller.

Meine Schlussfolgerung ist: es ist OK, an schnelle Funktionen zu binden. Für längere ist es besser, die Anzahl der Bindungen klein zu halten. Und für noch längere ist es klüger, das Ergebnis zwischenzuspeichern und "manuelle" Cache-Aktualisierungen zu handhaben.

Answer 2

Ich bin kein JavaScript-Performance-Experte oder irgendetwas, aber meine naive Meinung wäre, dass der Variable würde aus Führen Sie die Funktion möglicherweise ein paar Nanosekunden durch, weil es ein zweistufiger Prozess ist.

Auch das obige Beispiel wäre genauso gut mit vollendeten:

<button ng-disabled="!data">Add</button>