web-dev-qa-db-de.com

Angular 2 Vorlagenmethoden gegen Getter

Ich frage mich, ob es einen Vorteil gibt, dies zu tun:

  <div>{{getSomething()}}</div>

  export class MyComp {
    getSomething() { return ...}
  }

Darüber:

 <div>{{getSomething}}</div>

 export class MyComp {
   get getSomething() { return ...}
 }

Verwenden Sie Methoden und Getter, um die berechneten Daten anzuzeigen. 

13
ng2user

Ich habe tiefer in das hineingeschaut und mit TypeScript Playground gespielt. Ich erklärte zwei Klassen, eine mit Getter und die zweite mit Get-Methode, wie in Ihren Fragen beschrieben.

Mal sehen wie es aussieht:

Im ersten Beispiel haben wir eine Methode zum Abrufen des Eigenschaftswerts folgendermaßen definiert:

class Greeter {
  greeting: string;
  constructor(message: string) {
      this.greeting = message;
  }
   getGreeting() {
      return this.greeting;
  }
}

Nach Übersetzung in Javascript sieht es so aus:

var Greeter = (function () {
   function Greeter(message) {
       this.greeting = message;
   }
   Greeter.prototype.getGreeting = function () {
       return this.greeting;
   };
   return Greeter;
}());

Und zum zweiten Beispiel, in dem wir auf folgende Weise einen Getter deklariert haben:

class GetterGreeter {
   _greeting: string;
   constructor(message: string) {
       this._greeting = message;
   }
    get greeting() {
       return this._greeting;
   }
}

Wie sieht nach der Übersetzung aus:

var GetterGreeter = (function () {
   function GetterGreeter(message) {
       this._greeting = message;
   }
   Object.defineProperty(GetterGreeter.prototype, "greeting", {
       get: function () {
           return this._greeting;
       },
       enumerable: true,
       configurable: true
   });
   return GetterGreeter;
}());

(Sie können mit der Deklaration und der Übersetzung nach Javascript hier spielen)

Wie Sie mit get-Methode sehen können (wie in Ihrem ersten Beispiel), wird die Methode im Prototyp deklariert und in Ihrem zweiten Beispiel mit dem Getter-Muster. TypeScript verwendet die defineProperty-API.

In beiden Fällen rufen wir eine Methode auf, und angle ruft während der Änderungserkennung auch eine Methode auf, um Änderungen zu erkennen und erneut zu rendern.

Aus meiner Sicht ist dies nur ein syntaktischer Zucker für denselben Ansatz, und ich sehe keinen Leistungsvorteil für eine der Methoden.

18
galvan

Ob Sie ein Getter oder eine Methode sind, spielt aus technischer Sicht keine Rolle. 

Einige verwenden die Konvention, dass ein Getter sich ähnlich wie ein Feld verhalten sollte und keine teuren Berechnungen durchführen sollte, während eine Methode verwendet werden sollte, wenn die Berechnung mehr als einige grundlegende Dinge umfasst, wie z. B. das Erstellen eines vollständigen Namens aus dem ersten, mittleren und letzten Name.

Ich halte dies für eine gute Vorgehensweise, um dieser Unterscheidung für Angular zu folgen, da für die Sichtbindung keine teuren Berechnungen erforderlich sind, da die Methode oder der Getter sehr oft aufgerufen werden kann .. In einem solchen Fall ist es besser, das Ergebnis in einem Feld und zu speichern Binden Sie stattdessen an das Feld.

Bei der View-Bindung ist es sehr wichtig, dass die Methode oder der Getter bei nachfolgenden Aufrufen keine anderen Werte zurückgibt, wenn keine Abhängigkeiten geändert wurden (z. B. return {};, die als neue Objektinstanz behandelt werden würde und einen Fehler wie "Ausdruck hat sich geändert, da es geändert wurde zuletzt geprüft. ")

11

Der Unterschied besteht im ersten Fall, dass Sie eine Funktion in expression verwenden, im zweiten Fall ist es jedoch keine Funktion. Sie können also nicht verwenden 

<div>{{getSomething()}}</div>

export class MyComp {
  get getSomething() { return ...}
}

Die Verwendung der zweiten Methode bietet die Verwendung der Kapselung der Eigenschaft innerhalb der Klasse, und Sie müssen außerhalb der Klasse darauf zugreifen. 

Getter und Setter sind Teil der ES5-Spezifikation. Sie können über getter und setter lesen.

1
Roman C