現在正在發生很多有趣的事情。
RxJS 7 很強大，RxJS 8 處於 alpha 階段，它似乎可用，今天在 Chrome 中可用的新 Native Observables 也是如此！
我們可以一起使用它們嗎？
簡短的回答，有點不。從技術上講，它們都是 Observables，所以應該說相同的語言，對嗎？只是 .subscribe、.next、.error、.complete 和瞧...
嗯，差不多了。除了 RxJS 做了一些額外的努力來確保它處理真正的 Obsevables 而不是「廉價導入」？ .
因此，它會認真檢查Symbol.observable 或@@observable 是否存在，因此您可以透過執行Observable.prototype['@@observable'] = function(){ return this } 從技術上將它們修補到DOM Observable 中，但是...即使你成功了並且你設法通過document.when('click').subscribe(new subject())將兩者插入在一起，它也會再次失敗，因為 RxJS 流引用了它們自己的 this，在內部，它現在將指向其他地方......所以它崩潰了。
運氣不好，我們需要一個自訂的橋來訂閱 Native Observable 並將資料轉發到 RxJS land。
太好了，假設我們這樣做了，當然，它會起作用。如果你有這個包裝愚蠢的功能，你會突然能夠做類似以下的事情：
const clickCount = rx(
wrap(document.when('click')),
scan(x=>x+1, 0),
);
clickCount.subscribe(doSomething);
無論如何，雖然以上內容已經可以算是某種新聞，但這根本不是真正有趣的部分！
當我們談論在現實世界、實際應用程式中使用 Observables 時，有趣的部分就出現了，這些應用程式通常位於 Web 框架或較小的 UI 庫中。
考慮在 JavaScript「元件」內使用 Observables 的點擊計數器按鈕的情況。
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>
`;
}
現在，對於 Native DOM Observables，我們遇到了一些有趣的問題。主體不存在，BehaviorSubject 也不存在。
除此之外，它甚至沒有 .pipe() 方法來傳遞運算子。
最後，它的原生運算子都是 Observable 類別的方法，而不是函數。
所以，最大的問題是：如何呼叫尚不存在的物件的方法？
（此時你可能迷路了...我知道，請等一下）
建立 Observables 的新方法類似 element.when(eventName)。這是對 DOM 的本機呼叫。
然而，我們現在處於模板中，處於 JavaScript 元件中。尚未將任何 HTML 新增至 DOM，因此不可能呼叫 .when()。
我們要呼叫 .map().inspect().filter() ！
疏忽？直到幾年前，RxJS 仍然使用相同的介面（Bacon 和Zen Observables 等其他人仍然這樣做），但為了幫助進行tree-shaking，他們將所有 運算符方法 拆分為運算符函數，所以現在您可以只匯入您需要的內容，從而使您的應用程式變得更輕。太棒了！
那麼，回到我們的新情況，我們如何從組件內部解決這個問題？
當然，嗯，這很容易！我們要麼在WICG 提案中獲得Subject和BehaviorSubject（劇透：目前我們還沒有），要麼......我們發揮創造力，破解系統並構想類似代理的東西，幫助我們假裝 Native DOM Observable 是存在的，即使它不存在，所以我們可以呼叫它的原生運算子方法。 ？
我稱它為…觀測台。
可觀察的未來=觀察。 Observaturus 是拉丁語，意思是“會觀察的人”，所以如果我們將其強行翻譯成英語，聽起來應該是這樣的。
很好，那麼程式碼會是什麼樣子呢？
const clickCount = rx(
wrap(document.when('click')),
scan(x=>x+1, 0),
);
clickCount.subscribe(doSomething);
耶，看看那個！我們這裡有一些東西： new Observature(0).scan(x=>x 1).
讓我解釋一下。
從技術上講，這就像創建一個新的BehaviorSubject(0).scan(x=>x 1)，除了一件事：不再有BehaviorSubject了。 ？
觀察站只是一個代理。它公開了來自 Observable 和 Observer 的方法，以便以後訂閱和綁定！
如果你呼叫 .scan(fn)，它只會記住在時機到來時對它將訂閱的實際 Observable 呼叫 .scan。
那麼，觀測帶來了哪些有趣的東西呢？
首先，它們不是實際的主題，因此當您執行上面的程式碼時，您提供的運算子函數將在堆疊中的第 1/2 層運行。從點擊到接收，它可能比您以前見過的任何東西都更輕、更快。不，還沒有運行基準測試，我並不擔心，目前重要的是概念。
啊，另一個小便條。現在規格中也沒有 Observable.scan()，所以我們現在能做的一件事就是進行猴子補丁，但同樣，這些只是微小的實作細節。我們有原生的 Observables，這很重要！
要保持 100% 原生，對於其他用例，您可以只使用 .map() 和 .filter()，但根據我的經驗，如果沒有 scan()，您也無法過上正常的生活。
好吧，所以...上面使用的是原生內容，沒有 RxJS。
如果使用 RxJS8，這一切會是什麼樣子？
我的回答是我不知道，問@benlesh，他是你的人:)
目前的障礙是相同的：RxJS 無法辨識原生 Observable，因此還有一些工作要做。它可能看起來像這樣：
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>
`;
}
你有什麼想法？你會用這樣的東西嗎？
現在，您可以在 Stackblitz 上使用 DOM Observables、Observatures
留言留下你的想法。
以上是Native Observables，RxRxnd 尚不存在的 observable的詳細內容。更多資訊請關注PHP中文網其他相關文章！
