panduan gaya angular2 - properti dengan tanda dolar?

185

Melihat contoh kode angular2 , kita melihat beberapa properti publik dengan $ sign:

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

Adakah yang bisa menjelaskan:

  • mengapa $ digunakan (apa alasan di balik notasi ini? selalu gunakan ini untuk properti publik)?
  • properti publik digunakan tetapi bukan metode (mis. missionAnnouncements (), missionConfirmations ()) - sekali lagi, apakah ini konvensi untuk aplikasi ng2?

Apakah sepertinya tidak ada sesuatu mengenai hal ini dalam panduan gaya resmi ?

gerasalus
sumber

Jawaban:

265

$ suffix (dipopulerkan oleh Cycle.js ) digunakan untuk menunjukkan bahwa variabelnya adalah Observable . Itu bisa sampai ke panduan gaya resmi juga, tetapi belum ada di sana

Baca lebih lanjut di sini: Apa arti tanda dolar yang suffix $?

Pembaruan: Baca lebih lanjut tentang tanda “$” di situs Angular di sini: https://angular.io/guide/rx-library#naming-conventions-for-observables

Monfa.red
sumber
4
Itu tidak akan sampai ke panduan gaya resmi. Saya akan menaruh $ 100 untuk itu.
Eric Bishard
15
Referensi dalam dokumen sudut: angular.io/guide/rx-library#naming-conventions-for-observables
michelepatrassi
66
@EricBishard Maksud Anda $ 100
TabsNotSpaces
1
bagaimana dengan janji?
galki
7
keamanan kerja - membuat kode lebih sulit untuk dipahami oleh orang awam.
java-addict301
14

Paradigma $ naming berasal dari Andre Saltz dan menyarankan pluralisasi semua nama variabel yang mengandung observable atau stream.

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

Pendekatan lain adalah dengan mempluralisasi nama variabel yang berisi observable atau stream dengan karakter unicode yang cocok dengan huruf terakhir dari kata tersebut. Ini mengatasi masalah dengan kata-kata yang tidak jamak dengan huruf "s".

mouse$ vs mic€

Tak satu pun dari konvensi penamaan ini ada dalam panduan gaya Angular resmi. Penggunaan satu atau yang lain (atau tidak ada) sepenuhnya tergantung pada preferensi pribadi.

Raquel Diaz
sumber
10
cactu $ vs cactï
BYTE RIDER
Referensi yang bagus! Lihat juga artikel ini. Yang mengganggu saya adalah menemukan upaya untuk melakukan ini di basis kode saya (rekan kerja lainnya) dan salah, meletakkan akhiran pada variabel yang salah atau lebih buruk lagi memulai variabel dengan itu. Saya telah melihat orang menggunakan ini tanpa konsistensi juga, dalam hal itu sama sekali tidak masuk akal. medium.com/@benlesh/…
Eric Bishard
Jika Anda ingin menggunakannya, saya akan merekomendasikan konvensi penamaan berikut seperti dalam repo ini: github.com/bodiddlie/rxheroes/blob/master/app/effects/hero.ts Dan juga melakukannya selalu atau tidak pernah. Konsistenlah demi Tuhan yang dapat diamati.
Eric Bishard
2
fish$vsfish€$
Martin Schneider
11

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

Karena aplikasi Angular sebagian besar ditulis dalam TypeScript, Anda biasanya akan tahu kapan suatu variabel dapat diamati. Meskipun kerangka kerja Angular tidak menerapkan konvensi penamaan untuk yang dapat diobservasi, Anda akan sering melihat observable dinamai dengan tanda "$" yang tertinggal.

Ini dapat berguna saat memindai melalui kode dan mencari nilai yang bisa diamati. Juga, jika Anda ingin properti menyimpan nilai terbaru dari yang dapat diamati, akan lebih mudah untuk menggunakan nama yang sama dengan atau tanpa "$".


Asli :

Saya melihat variabel diakhiri dengan $ketika membaca tutorial pahlawan resmi:

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

Perhatikan baik-baik dan Anda akan melihat bahwa * ngFor mengulangi daftar yang disebut heroes$, bukan pahlawan .

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

$ Adalah konvensi yang menunjukkan bahwa pahlawan $ dapat diobservasi, bukan array.

Sebagian besar kasus adalah bahwa kami tidak berlangganan variabel yang dapat diamati dalam komponen. Kami biasanya menggunakan AsyncPipe untuk berlangganan variabel yang bisa diamati secara otomatis

Saya belum menemukannya di Style Guide sejak Angular5.1 dirilis kemarin (6 Desember 2017).

Haifeng Zhang
sumber
Dari panduan gaya 9 Angularheroes: Observable<Hero[]>;
Ricardo Saracino
9

Saya belum melihat ini $dalam panduan gaya tapi saya melihatnya sering digunakan untuk properti publik yang merujuk pada barang yang dapat diobservasi.

Günter Zöchbauer
sumber