RxJS fromEventPattern

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

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

參量

returns

Observable<T | T[]>：可觀察到的事件發(fā)生時(shí)，它發(fā)出傳遞給已注冊(cè)事件處理程序的第一個(gè)參數(shù)。或者，它發(fā)出此時(shí)返回的任何項(xiàng)目函數(shù)。

描述

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

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

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

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

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

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

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

例

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

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.
);

例

與項(xiàng)目功能一起使用

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