Apa itu "dekorator" dan bagaimana mereka digunakan?

148

Saya ingin tahu apa sebenarnya dekorator di AngularJS. Tidak ada banyak informasi online untuk dekorator kecuali untuk uraian dalam dokumentasi AngularJS dan penyebutan singkat (meskipun menarik) dalam video youtube .

Seperti yang dikatakan orang Angular sebagai dekorator adalah:

Dekorasi layanan, memungkinkan dekorator untuk mencegat pembuatan contoh layanan. Instance yang dikembalikan mungkin instance asli, atau instance baru yang mendelegasikan ke instance asli.

Saya tidak benar-benar tahu apa artinya itu , dan saya tidak yakin mengapa Anda akan memisahkan logika ini dari layanan itu sendiri. Sebagai contoh jika saya ingin mengembalikan sesuatu yang berbeda dalam kondisi yang berbeda, saya hanya akan memberikan argumen yang berbeda ke fungsi yang relevan atau menggunakan fungsi lain yang berbagi negara pribadi tersebut.

Saya masih semacam Angular noob jadi saya yakin itu hanya ketidaktahuan dan / atau kebiasaan buruk yang saya ambil.

Kevin Beal
sumber

Jawaban:

219

Kasus penggunaan yang baik $provide.decoratoradalah ketika Anda perlu melakukan "tweak" minor pada beberapa layanan pihak ketiga / hulu, di mana modul Anda tergantung, sementara meninggalkan layanan utuh (karena Anda bukan pemilik / pemelihara layanan). Berikut ini adalah demonstrasi di plunkr.

tamakisquare
sumber
6
Contoh yang luar biasa. Saya benar-benar bertanya-tanya bagaimana cara memperluas fungsionalitas modul pihak ketiga tanpa ikut campur dengan mereka
Arthur Kovacs
5
Apakah dekorator benar-benar mengurangi semua contoh layanan, atau apakah mereka hanya menggunakan modul yang menghiasi mereka? Dengan kata lain, katakanlah saya memiliki modul A yang menghiasi layanan dari modul B. Saya kemudian memiliki modul C yang tergantung pada modul A dan modul B. Di dalam modul C, apakah layanan dari modul B versi asli atau dihiasi?
Jon Jaques
3
@ JonJaques - Itu pertanyaan yang bagus. Saya belum menemukan situasi seperti itu. Jika saya menebak, versi layanan yang dilihat modul C harus yang dihiasi dari modul A tetapi saya tidak bisa mengatakan itu dengan pasti sampai saya mencobanya sendiri. Mengapa Anda tidak menulis plunkr / jsffidle sederhana dan bereksperimen dengan itu. Akan luar biasa jika Anda bisa membagikan temuan Anda dengan kami. Bersulang.
tamakisquare
6
@JonJaques - Tidak bisa menahan rasa ingin tahu saya, jadi saya menambahkan beberapa baris ke contoh asli saya untuk menemukan jawaban untuk pertanyaan Anda, tautan . Singkatnya, tebakan dalam komentar saya sebelumnya benar.
tamakisquare
17
Pabrik, Layanan dll. Adalah lajang (seperti yang disediakan), jadi setelah didekorasi, selalu didekorasi.
FlavorScape
66

Dekorator memungkinkan kami untuk memisahkan masalah lintas sektoral dan memungkinkan layanan untuk mempertahankan prinsip tanggung jawab tunggal tanpa khawatir tentang kode "infrastruktur".

Penggunaan praktis dari dekorator:

  • Caching: jika kami memiliki layanan yang berpotensi membuat panggilan HTTP mahal, kami dapat membungkus layanan dalam dekorator caching yang memeriksa penyimpanan lokal sebelum melakukan panggilan eksternal.
  • Debugging / Tracing: memiliki saklar tergantung pada konfigurasi pengembangan / produksi Anda yang menghiasi layanan Anda dengan debugging atau melacak pembungkus.
  • Throttling: membungkus panggilan yang sering dipicu dalam pembungkus debouncing. Memungkinkan kami untuk dengan mudah berinteraksi dengan layanan dengan tarif terbatas, misalnya.

Dalam semua kasus ini, kami membatasi kode dalam layanan hingga tanggung jawab utamanya.

JBland
sumber
10

decoratordapat mencegat instance layanan yang dibuat oleh factory, service, value, provider, dan memberikan opsi untuk mengubah beberapa instance(service)yang sebaliknya tidak dapat dikonfigurasi / dengan opsi.

Ini juga dapat memberikan contoh mock up untuk tujuan pengujian, misalnya $http.

Daiwei
sumber
1
Perlu dicatat bahwa Anda juga dapat mengesampingkan directivedefinisi yang disajikan oleh Ben Nadel
David Salamon
Berikut ini adalah referensi dalam dokumen resmi Angular: https://docs.angularjs.org/guide/decorators
David Salamon
3

Dengan kata sederhana kita dapat mengatakan bahwa itu seperti metode ekstensi. Untuk Kel. Kami memiliki kelas dan memiliki dua metode dan pada saat menjalankan kami ingin menambahkan lebih banyak metode di dalamnya maka kami menggunakan Dekorator.

Kami tidak dapat menggunakan $ supply.decorator dengan konstanta karena kami tidak dapat mengubah konstanta yang mereka miliki hanya properti baca.

Gurupreet
sumber
1

Singkatnya dekorator dapat digambarkan sebagai berikut: -

Fungsi dekorator memotong pembuatan layanan, yang memungkinkannya untuk menimpa atau mengubah perilaku layanan.

Ia menggunakan $providelayanan dengan sudut dan memodifikasi atau mengganti implementasi dari layanan lain

$provide.decorator('service to decorate',['$delegate', function($delegate) {
  // $delegate - The original service instance, 
  //             which can be replaced, monkey patched, 
  //             configured, decorated or delegated to. 
  //             ie here what is there in the 'service to decorate'

  //   This function will be invoked, 
  //   when the service needs to be provided 
  //   and should return the decorated service instance.
  return $delegate;
}]);

Contoh:

$provide.decorator('$log', ['$delegate', function($delegate) {
  // This will change implementation of log.war to log.error
  $delegate.warn = $delegate.error; 
  return $delegate;
}]);

Aplikasi

Selain jawaban @JBland.

  • Pengaturan lokal aplikasi luas: -

    Anda dapat menemukan contoh di sini

  • Mengubah perilaku default dan implementasi layanan yang ada dengan layanan sudut: -

    Anda dapat menemukan contoh di sini

  • Mengubah perilaku suatu fungsi di lingkungan yang berbeda.

samuelj90
sumber