zoukankan      html  css  js  c++  java
  • [RxJS] Using Observable.create for fine-grained control

    Sometimes, the helper methods that RxJS ships with such as fromEventfromPromise etc don't always provide the exact values you want & you end up having to do extra work to force them into the shape you require. For more fine-grained control you can use Observable.create which allows you to project only the values which matter to you.

    For example, the following code need add a filter method to filter the null value from the event.

    const fromEvent    = Rx.Observable.fromEvent;
    
    function delegate (wrapperSelector, elementSelector, eventName) {
      
      return fromEvent(
        document.querySelector(wrapperSelector),
        eventName,
        (ev) => {
          return ev.target.closest(elementSelector);
        }
      ).filter(x => x !== null)
    }
    
    delegate('.wrapper', 'button', 'click')
        .subscribe(x => {
    document.querySelector('#output').textContent = `Button ${x.textContent} clicked`;
    });

    We can use create method to do:

    const create    = Rx.Observable.create;
    
    function delegate (wrapperSelector, elementSelector, eventName){
      return create( (observe)=> {
        const wrapper = document.querySelector(wrapperSelector);
        const handler = (ev) => {
          const match = ev.target.closest(elementSelector);
          if(match) {
            return observe.onNext(match);
          }
        }
        
        wrapper.addEventListener(eventName, handler, false);
        
        // cancel the listener
        return ()=>{
          wrapper.removeEventListener(eventName, handler);
        }
      });
    }

    So to recap, sometimes the values that are projected from the helpers that RXJS ships with, are not exactly what you want, and you end up having to do a little bit of extra work to force them into the shape that want. If you find yourself doing this, you can always use create instead.

    Create is the factory function that creates an anonymous observable for you, gives you the opportunity to only project the values that you want. You end up having to do a bit more manual work, such as adding event listeners and removing them finished with, but the result will be greater performance and greater control.

  • 相关阅读:
    sql 常见错误
    jdbc 回顾
    oracle return code 2112
    cobol COMP-3最后1位
    oracle Lower Upper length substr
    UTF-8 与 BIG-5 转码
    用UltraEdit转换大小写
    oracle substr
    oracle中 char,varchar,varchar2的区别
    oracle 查看16进制
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5217263.html
Copyright © 2011-2022 走看看