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.

  • 相关阅读:
    Maven环境搭建、调试、打包
    JAVA环境变量JAVA_HOME、CLASSPATH、PATH设置详解
    Activiti工作流引擎核心介绍
    NodeJS概述
    JRE集成到Tomcat
    ORACLE递归查询(适用于ID,PARENTID结构数据表)
    爬虫入门——02
    爬虫入门——01
    利用java.lang.reflect.Constructor动态实例化对象
    【java入门点滴】向上转型与向下转型
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5217263.html
Copyright © 2011-2022 走看看