Przewodnik po stylu angular2 - nieruchomość ze znakiem dolara?

185

Patrząc na przykład kodu angular2 , widzimy niektóre właściwości publiczne ze znakiem $:

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

Czy ktoś może wyjaśnić:

  • dlaczego używa się $ (jaki jest powód tego zapisu? zawsze używaj tego dla właściwości publicznych)?
  • używane są właściwości publiczne, ale nie metody (np. missionAnnouncements (), missionConfirmations ()) - ponownie, czy jest to konwencja dla aplikacji ng2?

Czy w oficjalnym przewodniku po stylu nie ma nic na ten temat ?

gerasalus
źródło

Odpowiedzi:

265

Przyrostek $ (spopularyzowany przez Cycle.js ) służy do wskazania, że ​​zmienna jest Obserowalna . Może to również znaleźć się w oficjalnym przewodniku po stylu, ale jeszcze go nie ma

Przeczytaj więcej tutaj: Co oznacza przyrostek znak dolara $?

Aktualizacja: Przeczytaj więcej na temat końcowego znaku „$” na stronie Angular tutaj: https://angular.io/guide/rx-library#naming-conventions-for-observables

Monfa.red
źródło
4
Nie trafi do oficjalnego przewodnika po stylu. Wpłacę na to 100 $.
Eric Bishard
15
Odniesienia w dokumentach kątowych: angular.io/guide/rx-library#naming-conventions-for-observables
michelepatrassi
66
@EricBishard Masz na myśli 100 $
TabsNotSpaces
1
co z obietnicami?
galki
7
bezpieczeństwo pracy - utrudni zrozumienie kodu dla laika.
java-addict301
14

Paradygmat nazewnictwa $ pochodzi od Andre Saltza i sugeruje pluralizowanie wszystkich nazw zmiennych zawierających obserwowalne lub strumienie.

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

Innym podejściem jest pluralizacja nazw zmiennych zawierających obserwowalne lub strumienie ze znakiem Unicode, który pasuje do ostatniej litery słowa. Rozwiązuje to problem ze słowami, które nie są w liczbie mnogiej za pomocą „s”.

mouse$ vs mic€

Żadna z tych konwencji nazewnictwa nie znajduje się w oficjalnym przewodniku po stylu Angular. Wykorzystanie jednego lub drugiego (lub żadnego) jest całkowicie zależne od osobistych preferencji.

Raquel Diaz
źródło
10
cactu $ vs cactï
BYTE RIDER
Niezłe referencje! Sprawdź także ten artykuł. Denerwuje mnie znalezienie próby zrobienia tego w mojej bazie kodu (inni współpracownicy) i zrobienie tego źle, umieszczenie przyrostka na niewłaściwej zmiennej lub, co gorsza, rozpoczęcie od niej zmiennej. Widziałem też, jak ludzie używają tego bez konsekwencji, w takim przypadku nie ma to żadnego sensu. medium.com/@benlesh/…
Eric Bishard
Jeśli chcesz go użyć, polecam następujące konwencje nazewnictwa, takie jak w tym repozytorium: github.com/bodiddlie/rxheroes/blob/master/app/effects/hero.ts A także robienie tego zawsze lub nigdy. Bądź konsekwentny na litość boską.
Eric Bishard
2
fish$vsfish€$
Martin Schneider
11

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

Ponieważ aplikacje Angular są w większości napisane w TypeScript, zazwyczaj będziesz wiedział, kiedy zmienna jest obserwowalna. Chociaż środowisko Angular nie wymusza konwencji nazewnictwa dla obserwowalnych, często zobaczysz obserwowalne nazwane końcowym znakiem „$”.

Może to być przydatne podczas skanowania kodu i szukania obserwowalnych wartości. Ponadto, jeśli chcesz, aby właściwość przechowywała najnowszą wartość z obserwowalnego, wygodnie jest po prostu użyć tej samej nazwy z „$” lub bez.


Oryginał :

Widziałem, jak zmienne kończą się $podczas czytania oficjalnego samouczka o bohaterze:

<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>

Przyjrzyj się uważnie, a zobaczysz, że * ngFor iteruje listę nazwanych heroes$, a nie bohaterów .

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

$ Jest konwencją, która wskazuje, że heroes $ jest obserwowalną, a nie tablicą.

Większość przypadków polega na tym, że nie subskrybujemy tych obserwowalnych zmiennych w komponencie. Zazwyczaj używamy AsyncPipe do automatycznego subskrybowania zmiennych obserwowalnych

Nie znalazłem go w Przewodniku po stylach, odkąd Angular5.1 wydał wczoraj (6 grudnia 2017 r.).

Haifeng Zhang
źródło
Z przewodnika po stylu Angular 9heroes: Observable<Hero[]>;
Ricardo Saracino
9

Nie widziałem tego $w przewodniku po stylu, ale widziałem, że jest często używany w obiektach publicznych, które odnoszą się do obserwowalnych obiektów, które można subskrybować.

Günter Zöchbauer
źródło