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.

  • 相关阅读:
    文件处理
    字符编码
    基本数据类型及内置方法
    python语法入门之流程控制
    python语法入门之基本数据类型
    python语法入门之用户交互、运算符
    编程语言与Python介绍
    计算机核心基础
    图片验证码推导逻辑,Image.new,ImageDraw, ImageFont.truetype的用法
    VUEday01
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5217263.html
Copyright © 2011-2022 走看看