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.

  • 相关阅读:
    继承-方法重写
    继承2
    继承
    JAVA-基本数据类型与引用数据类型区别
    JS判断一个数是否为质数
    Yslow
    Sublime Less 自动编译成css
    chrom调试
    解决在微信中部分IOS不能自动播放背景音乐
    常用的jq插件
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5217263.html
Copyright © 2011-2022 走看看