RxJS fromEventPattern

從任意API創(chuàng)建一個 Observable 來注冊事件處理程序。

fromEventPattern<T>(addHandler: (handler: NodeEventHandler) => any, removeHandler?: (handler: NodeEventHandler, signal?: any) => void, resultSelector?: (...args: any[]) => T): Observable<T | T[]>

參量

returns

Observable<T | T[]>：可觀察到的事件發(fā)生時，它發(fā)出傳遞給已注冊事件處理程序的第一個參數(shù)?；蛘撸l(fā)出此時返回的任何項目函數(shù)。

描述

當(dāng)添加事件處理程序的方法 fromEvent 還沒有準(zhǔn)備就緒時。

fromEventPattern 允許您將任何支持注冊事件處理程序功能的API轉(zhuǎn)換為Observable。它類似于fromEvent，但更加靈活。實際上，的所有用例 fromEvent 都可以很容易地由 fromEventPattern（盡管以更詳細(xì)的方式）處理。

該運算符接受一個 addHandler函數(shù)作為第一個參數(shù)，該函數(shù)將與處理程序參數(shù)一起注入。該處理程序?qū)嶋H上是一個事件處理程序函數(shù)，您現(xiàn)在可以將其傳遞給期望的 API。addHandler 訂閱操作員返回的 Observable 時將調(diào)用，因此調(diào)用 API 時不一定會在 API 中注冊處理程序 fromEventPattern。

注冊后，每次我們監(jiān)聽的事件發(fā)生時，返回的 Observable fromEventPattern 都會發(fā)出調(diào)用事件處理程序函數(shù)的值。請注意，如果事件處理程序被多個參數(shù)調(diào)用，則第二個及后續(xù)參數(shù)將不會出現(xiàn)在 Observable 中。

如果您使用的 API 也允許注銷事件處理程序，則可以將 fromEventPattern 另一個函數(shù) removeHandler-作為第二個參數(shù)傳遞給。它將注入與以前相同的處理函數(shù)，現(xiàn)在您可以使用該函數(shù)從 API 取消注冊。removeHandler 當(dāng)由此產(chǎn)生的 Observable 的使用者取消訂閱時將被調(diào)用。

在某些 API 中，注銷的處理實際上是不同的。注冊事件處理程序的方法返回某種令牌，該令牌稍后用于標(biāo)識哪個功能應(yīng)被注銷，或者它本身具有注銷事件處理程序的方法。如果您的 API 是這種情況，請確保通過注冊方法返回的令牌由返回 addHandler。然后，它將作為第二個參數(shù)傳遞給 removeHandler，您將可以在其中使用它。

如果您需要訪問所有事件處理程序參數(shù)（不僅是第一個），或者需要以任何方式進行轉(zhuǎn)換，都可以 fromEventPattern使用可選的第三個參數(shù)進行調(diào)用-項目函數(shù)，該函數(shù)將接受在調(diào)用時傳遞給事件處理程序的所有參數(shù)。從項目函數(shù)返回的所有內(nèi)容都將出現(xiàn)在結(jié)果流上，而不是通常的事件處理程序的第一個參數(shù)。這意味著可以將默認(rèn)項目視為具有第一個參數(shù)而忽略其余參數(shù)的函數(shù)。

例

發(fā)出 DOM 文檔上發(fā)生的點擊

import { fromEventPattern } from 'rxjs';


function addClickHandler(handler) {
  document.addEventListener('click', handler);
}


function removeClickHandler(handler) {
  document.removeEventListener('click', handler);
}


const clicks = fromEventPattern(
  addClickHandler,
  removeClickHandler
);
clicks.subscribe(x => console.log(x));


// Whenever you click anywhere in the browser, DOM MouseEvent
// object will be logged.

例

與返回取消令牌的 API 一起使用

import { fromEventPattern } from 'rxjs';


const token = someAPI.registerEventHandler(function() {});
someAPI.unregisterEventHandler(token); // this APIs cancellation method accepts
                                       // not handler itself, but special token.


const someAPIObservable = fromEventPattern(
  function(handler) { return someAPI.registerEventHandler(handler); }, // Note that we return the token here...
  function(handler, token) { someAPI.unregisterEventHandler(token); }  // ...to then use it here.
);

例

與項目功能一起使用

import { fromEventPattern } from 'rxjs';


someAPI.registerEventHandler((eventType, eventMessage) => {
  console.log(eventType, eventMessage); // Logs "EVENT_TYPE" "EVENT_MESSAGE" to console.
});


const someAPIObservable = fromEventPattern(
  handler => someAPI.registerEventHandler(handler),
  handler => someAPI.unregisterEventHandler(handler)
  (eventType, eventMessage) => eventType + " --- " + eventMessage // without that function only "EVENT_TYPE"
);                                                                // would be emitted by the Observable


someAPIObservable.subscribe(value => console.log(value));


// Logs:
// "EVENT_TYPE --- EVENT_MESSAGE"

也可以看看

• fromEvent
• bindCallback
• bindNodeCallback