Native Observables, RxRxnd yang boleh diperhatikan yang belum wujud lagi

Banyak perkara menarik sedang berlaku sekarang.

RxJS 7 mantap, RxJS 8 dalam alfa, nampaknya boleh digunakan dan begitu juga Native Observables baharu yang tersedia dalam Chrome Today!

Bolehkah kita menggunakannya bersama-sama?
Jawapan ringkas, macam tidak. Secara teknikal mereka semua Boleh Diperhatikan, jadi harus bercakap bahasa yang sama, bukan? Cuma .langgan, .seterusnya, .error, .complete dan voilà...

Nah, hampir. Kecuali RxJS membuat beberapa usaha tambahan untuk memastikan ia berurusan dengan Obsevables sebenar dan bukan "import murah" ?.
Oleh itu, ia dengan tekun menyemak Symbol.observable atau @@observable untuk hadir, jadi anda boleh menampal secara teknikalnya ke dalam DOM Observable dengan melakukan Observable.prototype['@@observable'] = function(){ return this }, tetapi ... walaupun anda berjaya dan anda berjaya menyambung kedua-duanya melalui document.when('click').subscribe(new Subject()), ia akan gagal sekali lagi kerana RxJS streams membuat rujukan kepada mereka sendiri ini, secara dalaman, yang kini akan menunjuk ke tempat lain... jadi ia pecah.

Nasib baik, kami memerlukan jambatan tersuai yang melanggan Native Observable dan memajukan data ke tanah RxJS.

Bagus, anggaplah kami melakukan itu, pasti, ia akan berkesan. Anda tiba-tiba boleh melakukan sesuatu seperti berikut, dengan syarat anda mempunyai fungsi balut bodoh ini, selesai:

const clickCount = rx(
  wrap(document.when('click')),
  scan(x=>x+1, 0),
);

clickCount.subscribe(doSomething);

Apa pun, walaupun perkara di atas sudah layak sebagai sejenis berita, ia bukanlah bahagian yang benar-benar menarik, sama sekali!

Bahagian yang menarik

Bahagian menarik di sini datang apabila kita bercakap tentang menggunakan Observables dalam dunia nyata, dalam aplikasi sebenar, yang biasanya dalam rangka kerja web atau perpustakaan UI yang lebih kecil.

Pertimbangkan kes butang pembilang klik, menggunakan Observables, di dalam "Komponen" JavaScript.

import { Subject, scan } from 'rxjs';
import { rml } from 'rimmel';

const Component = () => {
  const counter = new BehaviorSubject(0).pipe(
    scan(x=>x+1)
  );

  return rml`
    <button onclick="${counter}">hit me</button>
    Count: <span>${counter}</span>
  `;
}

Kini, dengan Native DOM Observables, kami menghadapi beberapa masalah menarik. Subjek tidak wujud, BehaviorSubject juga tidak wujud.
Di samping itu, ia tidak mempunyai kaedah .pipe() untuk menghantar pengendali masuk.
Akhir sekali, pengendali asalnya ialah semua kaedah kelas Boleh Diperhatikan, bukan fungsi.

Jadi, persoalan besarnya ialah: bagaimana anda memanggil kaedah objek yang... belum wujud lagi?

(Anda mungkin tersesat pada ketika ini... Saya tahu, tahan)

Cara baharu untuk mencipta Observables kelihatan seperti element.when(eventName). Ia adalah panggilan asli ke DOM.
Walau bagaimanapun, kami kini berada dalam templat, kami berada dalam Komponen JavaScript. Tiada satu pun daripada HTML telah ditambahkan pada DOM lagi, jadi tiada panggilan ke .when() mungkin dibuat.

Dan kami mahu memanggil .map().inspect().filter() padanya!

Kelalaian? RxJS pernah menggunakan antara muka yang sama sehingga beberapa tahun yang lalu (yang lain seperti Bacon dan Zen Observables masih melakukannya), tetapi untuk membantu menggoncang pokok, mereka telah membahagikan semua kaedah pengendali kepada fungsi pengendali, jadi kini anda boleh mengimport apa sahaja yang anda perlukan, menjadikan apl anda lebih ringan. Hebat!

Pemerhatian

Jadi, kembali kepada situasi baharu kita, bagaimana kita menyelesaikannya dari dalam komponen?
Sudah tentu, itu mudah! Kami sama ada mendapat Subject dan BehaviorSubject dalam cadangan WICG (spoiler: buat masa ini kami tidak), atau... kami menjadi kreatif, menggodam sistem dan memikirkan sesuatu seperti proksi yang membantu kami berpura-pura bahawa Native DOM Observable ada, walaupun tidak, jadi kita boleh memanggil kaedah pengendali aslinya. ?

Saya memanggilnya... Observature.

Masa Depan Boleh Diperhati = Pemerhatian. Observaurus ialah bahasa Latin untuk "orang yang akan memerhati", jadi jika kita memaksanya ke dalam bahasa Inggeris, ia sepatutnya berbunyi seperti itu.

Baik, jadi apakah rupa semuanya dalam kod?

const clickCount = rx(
  wrap(document.when('click')),
  scan(x=>x+1, 0),
);

clickCount.subscribe(doSomething);

Yay, lihat itu! Kami mempunyai sesuatu di sini: Pemerhatian baharu(0).scan(x=>x 1).
Biar saya jelaskan perkara ini.
Secara teknikalnya seperti mencipta BehaviorSubject(0).scan(x=>x 1) baharu kecuali satu perkara: tiada BehaviorSubject lagi. ?
The Observature hanyalah proksi. Ia mendedahkan kaedah daripada Observable dan Observer untuk langganan kemudian dan mengikat kemudian!
Jika anda memanggil .scan(fn), ia hanya akan ingat untuk memanggil .scan pada Observable sebenar ia akan dilanggan, apabila tiba masanya.

Jadi, apakah perkara menarik yang dibawa oleh Observatures?
Pertama ialah fakta bahawa mereka bukan Subjek sebenar, jadi apabila anda menjalankan kod di atas, fungsi operator yang anda sediakan akan berjalan pada tahap 1/2 dalam timbunan. Ia mungkin lebih ringan dan lebih pantas daripada apa-apa yang anda lihat sebelum ini, daripada klik hingga tenggelam. Tidak, belum menjalankan penanda aras lagi dan saya tidak peduli, itu konsep yang penting, buat masa ini.

Ah, satu lagi nota kecil. Tiada Observable.scan(), juga, dalam spesifikasi sekarang, jadi satu perkara yang boleh kita lakukan ialah menampal monyet pada masa ini, tetapi sekali lagi, itu hanyalah butiran pelaksanaan yang kecil. Kami mempunyai Observable asli, itu masalah besar!

Untuk kekal 100% asli, untuk kes penggunaan lain anda hanya boleh menggunakan .map() dan .filter(), tetapi dalam pengalaman saya anda tidak boleh menjalani kehidupan yang betul tanpa scan(), juga.

RxJS 8

Ok, jadi... perkara di atas menggunakan bahan asli, tiada RxJS.
Bagaimanakah rupanya dengan RxJS8?
Jawapan saya ialah saya tidak tahu, tanya @benlesh, dia lelaki awak :)

Halangan semasa adalah sama: Observable asli tidak dikenali oleh RxJS, jadi ada sedikit kerja yang perlu dilakukan. Semuanya boleh kelihatan seperti ini:

import { Subject, scan } from 'rxjs';
import { rml } from 'rimmel';

const Component = () => {
  const counter = new BehaviorSubject(0).pipe(
    scan(x=>x+1)
  );

  return rml`
    <button onclick="${counter}">hit me</button>
    Count: <span>${counter}</span>
  `;
}

Apa pendapat anda? Adakah anda akan menggunakan sesuatu seperti ini?

Buat masa ini, anda boleh bermain dengan DOM Observables, Observatures pada Stackblitz ini

Lepaskan mesej untuk meninggalkan fikiran anda.

Atas ialah kandungan terperinci Native Observables, RxRxnd yang boleh diperhatikan yang belum wujud lagi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!