angle2 style guide - Eigenschaft mit Dollarzeichen?

184

Wenn wir uns das Codebeispiel angle2 ansehen , sehen wir einige öffentliche Eigenschaften mit dem Zeichen $:

  <....>
  private missionAnnouncedSource = new Subject<string>();
  private missionConfirmedSource = new Subject<string>();
  // Observable string streams
  missionAnnounced$ = this.missionAnnouncedSource.asObservable();
  missionConfirmed$ = this.missionConfirmedSource.asObservable();
  <....>

Kann mir jemand erklären:

  • Warum wird $ verwendet (was ist der Grund für diese Notation? Verwenden Sie diese immer für öffentliche Objekte)?
  • Es werden öffentliche Eigenschaften verwendet, jedoch keine Methoden (z. B. missionAnnouncements (), missionConfirmations ()). Ist dies wiederum eine Konvention für ng2-Apps?

Scheint es im offiziellen Styleguide nichts dazu zu geben ?

gerasalus
quelle

Antworten:

265

Das Suffix $ (populär gemacht von Cycle.js ) wird verwendet, um anzugeben, dass die Variable ein Observable ist . Es könnte es auch zum offiziellen Styleguide schaffen, aber es ist noch nicht da

Lesen Sie hier mehr: Was bedeutet das angehängte Dollarzeichen $?

Update: Weitere Informationen zum nachfolgenden "$" -Zeichen auf der Angular-Website finden Sie hier: https://angular.io/guide/rx-library#naming-conventions-for-observables

Monfa.red
quelle
4
Es wird nicht zum offiziellen Styleguide kommen. Ich werde 100 Dollar darauf setzen.
Eric Bishard
15
Referenz in den eckigen Dokumenten: angular.io/guide/rx-library#naming-conventions-for-observables
michelepatrassi
63
@ EricBishard Du meinst 100 $
TabsNotSpaces
1
Was ist mit Versprechungen?
Galki
7
Arbeitsplatzsicherheit - Machen Sie den Code für den Laien schwerer verständlich.
Java-Addict301
14

Das $ naming-Paradigma stammt von Andre Saltz und schlägt vor, alle Variablennamen zu pluralisieren, die Observablen oder Streams enthalten.

getAll(): Observable<Zone[]>{
    let zone$ = this.http
      .get(`${this.baseUrl}/zones`, {headers: this.getHeaders()})
      .map(mapZone);
      return zone$;
  }

Ein anderer Ansatz besteht darin, Variablennamen zu pluralisieren, die Observablen oder Streams mit einem Unicode-Zeichen enthalten, das mit dem letzten Buchstaben des Wortes übereinstimmt. Dies behebt das Problem mit Wörtern, die nicht mit einem "s" pluralisiert sind.

mouse$ vs mic€

Keine dieser Namenskonventionen ist im offiziellen Angular Style Guide enthalten. Die Verwendung des einen oder anderen (oder keiner) hängt vollständig von den persönlichen Vorlieben ab.

Raquel Diaz
quelle
10
cactu $ vs cactï
BYTE RIDER
Schöne Referenz! Lesen Sie auch diesen Artikel. Was mich ärgert, ist, einen Versuch zu finden, dies in meiner Codebasis (anderen Mitarbeitern) zu tun und es falsch zu machen, das Suffix auf die falsche Variable zu setzen oder noch schlimmer, die Variable damit zu beginnen. Ich habe gesehen, dass Leute dies auch ohne Konsistenz verwenden, in diesem Fall macht es überhaupt keinen Sinn. medium.com/@benlesh/…
Eric Bishard
Wenn Sie es verwenden möchten, würde ich folgende Namenskonventionen wie in diesem Repo empfehlen: github.com/bodiddlie/rxheroes/blob/master/app/effects/hero.ts Und es auch immer oder nie tun. Sei konsequent um Gottes willen.
Eric Bishard
2
fish$vsfish€$
Martin Schneider
10

Update : https://angular.io/guide/rx-library#naming-conventions-for-observables

Da Angular-Anwendungen meist in TypeScript geschrieben sind, wissen Sie normalerweise, wann eine Variable beobachtbar ist. Obwohl das Angular-Framework keine Namenskonvention für Observables erzwingt, werden Observables häufig mit einem nachgestellten "$" -Zeichen benannt.

Dies kann nützlich sein, wenn Sie Code durchsuchen und nach beobachtbaren Werten suchen. Wenn Sie möchten, dass eine Eigenschaft den neuesten Wert eines Observablen speichert, kann es auch praktisch sein, einfach denselben Namen mit oder ohne "$" zu verwenden.


Original :

Ich habe $beim Lesen des offiziellen Helden-Tutorials gesehen, wie Variablen enden :

<div id="search-component">
  <h4>Hero Search</h4>

  <input #searchBox id="search-box" (keyup)="search(searchBox.value)" />

  <ul class="search-result">
    <li *ngFor="let hero of heroes$ | async" >
      <a routerLink="/detail/{{hero.id}}">
        {{hero.name}}
      </a>
    </li>
  </ul>
</div>

Schauen Sie genau hin, und Sie werden sehen , dass die * ngFor über eine Liste iteriert genannt heroes$, keine Helden .

<li *ngFor="let hero of heroes$ | async" >

Das $ ist eine Konvention, die angibt, dass Helden $ ein Observable ist, kein Array.

In den meisten Fällen abonnieren wir diese beobachtbaren Variablen in der Komponente nicht. Normalerweise verwenden wir AsyncPipe, um die Observable-Variablen automatisch zu abonnieren

Ich habe es nicht im Style Guide gefunden, seit Angular5.1 gestern (6. Dezember 2017) veröffentlicht wurde.

Haifeng Zhang
quelle
Aus Angular 9 Styleguideheroes: Observable<Hero[]>;
Ricardo Saracino
9

Ich habe dies $im Styleguide nicht gesehen , aber ich habe gesehen, dass es häufig für öffentliche Objekte verwendet wird, die sich auf Observables beziehen, die abonniert werden können.

Günter Zöchbauer
quelle