web-dev-qa-db-fra.com

Angular 2 modèles de méthodes vs getters

Je me demande s'il y a un avantage à le faire:

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

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

Sur ceci:

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

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

Utilisez méthodes vs getters pour afficher les données calculées. 

javascriptangulartypescriptgetter-setter
13
ng2user

J'ai approfondi la question et joué avec TypeScript Playground . J'ai déclaré deux classes, l'une avec getter et la seconde avec la méthode get, comme décrit dans vos questions.

Permet de voir à quoi ça ressemble:

Dans le premier exemple, nous avons déclaré une méthode pour obtenir la valeur de la propriété de la manière suivante:

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

Après traduction en javascript, cela ressemble à:

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

Et en ce qui concerne le deuxième exemple où nous avons déclaré un getter de la manière suivante:

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

Ce qui après la traduction ressemble à:

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

(Vous pouvez jouer avec la déclaration et la traduction en javascript ici )

Comme vous pouvez le voir avec la méthode get (comme dans votre premier exemple), la méthode est déclarée sur le prototype et dans votre deuxième exemple utilisant le motif getter, TypeScript utilise l'iAP defineProperty.

Dans les deux cas, nous appelons une méthode et angular appellera également une méthode lors de la détection des modifications pour identifier les modifications et effectuer un nouveau rendu.

Selon moi, il ne s'agit que d'un sucre syntaxique pour la même approche et je ne vois aucun avantage en termes de performances pour l'une des méthodes.

18
galvan

Si vous êtes un getter ou une méthode, cela n’a pas d’importance technique. 

Certains utilisent la convention selon laquelle un getter doit se comporter de manière similaire à un champ et ne pas faire de calcul coûteux, alors qu'une méthode doit être utilisée si le calcul dépasse les simples bases telles que, par exemple, la construction d'un nom complet à partir du premier au milieu et du dernier. prénom.

Je pense que c’est une bonne pratique de suivre cette distinction pour Angular, car, pour une vue, des calculs coûteux doivent être évités car la méthode ou le getter peuvent être appelés très souvent . Dans ce cas, il est préférable de stocker le résultat dans un champ et lie au champ à la place.

Il est très important dans la liaison de vues que la méthode ou le getter ne renvoie pas de valeurs différentes lors d'appels suivants lorsqu'aucune dépendance n'a été modifiée (comme return {};, qui serait traité comme une nouvelle instance d'objet et provoquerait une erreur du type "L'expression a été modifiée depuis sa création". dernière vérification. ")

11
Günter Zöchbauer

La différence réside dans le premier cas où vous utilisez une fonction dans une expression, mais dans le second cas, ce n'est pas une fonction. Donc vous ne pouvez pas utiliser 

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

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

La seconde méthode présente l’avantage d’utiliser l’encapsulation de la propriété dans la classe et vous devez y accéder en dehors de la classe. 

Les Getters et les setters font partie de la spécification ES5. Vous pouvez en savoir plus sur getter et setter .

1
Roman C