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.

[RxJS] Using Observable.create for fine-grained control的更多相关文章

  1. [RxJS] Creation operator: create()

    We have been using Observable.create() a lot in previous lessons, so let's take a closer look how do ...

  2. Angular学习笔记—RxJS与Observable(转载)

    1. Observable与观察者模式的关系 其实这里讲的Observable就是一种观察者模式,只不过RxJS把Observable结合了迭代模式以及附件了很多的operator,让他变得很强大,也 ...

  3. [RxJS] Creating Observable From Scratch

    Get a better understanding of the RxJS Observable by implementing one that's similar from the ground ...

  4. ng-packagr 打包报错 Public property X of exported class has or is using name 'Observable' from external module “/rxjs/internal/Observable” but cannot be named

    old import { Injectable } from '@angular/core'; import { BehaviorSubject } from 'rxjs'; @Injectable( ...

  5. Create Hierarchical Tree To Control Records In Oracle Forms

    Download Source Code Providing an example form for creating hierarchical trees in Oracle Forms to co ...

  6. Rxjs 修改Observable 里的值

    有这么一个对象c$: Observable<any> 修改里边的值: 声明一个subject subject: Subject<any>; 在ngOnInit()中进行初始化 ...

  7. [RxJS] Hot Observable, by .share()

    .share() is an alias for .publish().refCount(). So if the source is not yet completed, no matter how ...

  8. Springfox Reference Documentation

    1. Introduction The Springfox suite of java libraries are all about automating the generation of mac ...

  9. [转载] 跟着实例学习zookeeper 的用法

    原文: http://ifeve.com/zookeeper-curato-framework/ zookeeper 的原生客户端库过于底层, 用户为了使用 zookeeper需要编写大量的代码, 为 ...

随机推荐

  1. Android 编程下的计时器

    在安卓 APP 的手机号注册逻辑中,经常会有将激活码发送到手机的环节,这个环节中绝大多数的应用考虑到网络延迟或服务器压力以及短信服务商的延迟等原因,会给用户提供一个重新获取激活码的按钮.如下图所示: ...

  2. 一张图搞懂 Javascript 中的原型链、prototype、__proto__的关系 转载加自己的总结

    1. JavaScript内置对象 所谓的内置对象 指的是:JavaScript本身就自己有的对象 可以直接拿来就用.例如Array String 等等.JavaScript一共有12内置对象    ...

  3. docke 网络配置2

    一,docker 的bridge模式是和vmware中的nat模式类似的,但是如果想要弄成和vmwae中的bridge怎么办呢? 说明,bridge模式获取的Ip是与宿主机的ip是出于同一个网段的. ...

  4. Linux目录和权限

    1. rmdir -p  用来删除一串目录,是否可以成功删除?   rmdir -p  删除一个不存在的目录时是否报错呢?rmdir -p 不能成功删除非空目录,rmdir -p 删除一个不存在的目录 ...

  5. WebApi2官网学习记录---JSON与XML的序列化

    JSON序列化: WebAPI的默认序列库使用的是Json.NET,可以在Globally中配置使用DataContractJsonSerializer 进行序列化 protected void Ap ...

  6. SQL Server链接MySQL实践

    最近在访问多数据库的时候进行了SQLServer链接MySQL数据的实践,现总结如下: 一.  安装mysql-connector-odbc驱动: 1. 在SQL Server服务器的机器上安装mys ...

  7. rsync+inotify实时同步方案

    rsync+inotify实时同步,inotify可以实时监控本地文件或目录变化,当检测到本地文件变化,执行rsync同步命令,将变化的文件同步到其他服务器节点. 1.配置环境 3.在服务节点1.服务 ...

  8. jquery height、innerHeight、outHeight

    JQuery有很多的height,不总结一下你就要被他搞晕,所以为了保持清醒,汇总在下面 height:height innerHeight:height+padding outerHeight(fa ...

  9. python Tips(不定期更新)

    dictionary sort 1.根据key排序,正向排序 sorted(dic.items(), key=lambda d: d[0]) 2.根据value排序,反向排序 sorted(dic.i ...

  10. 了不起的分支和循环02 - 零基础入门学习Python008

    了不起的分支和循环02 让编程改变世界 Change the world by program 上节课,小甲鱼教大家如何正确的打飞机,其要点就是:判断和循环,判断就是该是不该做某事,循环就是持续做某事 ...