kątowe 2 szablony metod vs pobierające

Question

Zastanawiam się, czy istnieje jakakolwiek korzyść, aby to zrobić:

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

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

Ponad to:

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

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

Stosować metody vs pobierające wyświetlanych obliczonych danych.

Answer 1

Zajrzałem w to głębiej i bawiłem się maszynopisem. Deklarowałem dwie klasy jeden z geterem i drugą z metodą get, jak opisano w twoich pytaniach.

Pozwala zobaczyć, jak to wygląda:

W pierwszym przykładzie zadeklarowaliśmy metodę uzyskiwania wartości nieruchomości w następujący sposób:

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

które po przeliczeniu na javascript wygląda:

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

i dotyczące drugi przykład gdzie zadeklarowaliśmy getter w następujący sposób:

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

Które po przetłumaczeniu wygląda tak:

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; 
}()); 

(Można grać z deklaracją i tłumaczenia do JavaScript here)

Jak widać z metody GET (jak w pierwszym przykładzie) metoda jest zadeklarowana na prototypie, a w twoim drugim przykładzie używając maszynopisu wzoru gettera używa api defineProperty.

W obu przypadkach wywołujemy metodę, a kątowa wywoła metodę podczas jej wykrywania, aby zidentyfikować zmiany i ponownie renderować.

Jak widzę, jest to tylko cukier syntaktyczny dla tego samego podejścia i nie widzę korzyści z wydajności dla jednej z metod.

Answer 2

Różnica polega na tym, że w pierwszym przypadku używa się funkcji wyrażenia, ale w drugim przypadku nie jest to funkcja. Nie można więc używać

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

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

---

zalety korzystania z drugą metodą jest użycie hermetyzację obiektu wewnątrz klasy i trzeba do niego dostęp poza klasą.

Zbiórki i setery są częścią specyfikacji ES5. Możesz przeczytać o getter i setter.

Answer 3

Jeśli jesteś geterem lub metoda nie ma znaczenia z technicznego punktu widzenia.

Niektórzy używają konwencji, że getter powinien zachowywać się podobnie do pola, a nie wykonywać kosztownych obliczeń, podczas gdy metoda powinna być stosowana, jeśli obliczenia są czymś więcej niż bardzo podstawowe rzeczy, jak na przykład budowanie pełnej nazwy od pierwszej środkowe i nazwisko.

Uważam, że dobrą praktyką jest stosowanie tego rozróżnienia w przypadku Angular, ponieważ w celu obejrzenia wiązania należy unikać kosztownych obliczeń, ponieważ metoda lub program pobierający można nazwać bardzo często. W takim przypadku lepiej jest zapisać wynik w polu i powiązać go z polem.

Bardzo ważne w wiązaniu widoku jest to, że metoda lub program pobierający nie zwraca różnych wartości w kolejnych wywołaniach, gdy nie zmodyfikowano żadnych zależności (takich jak return {};, które byłyby traktowane jako instancja nowego obiektu i powodowałyby błąd typu "Wyrażenie ma zmienione od czasu ostatniego sprawdzenia. ")