The use of RxJS Subjects is common, but not without problems. In this lesson we will see how they can be usually safely replaced with plain Observables.

Check the follow code:

const click$ = new Rx.Subject();

document.addEventListener('click', function(e) {
click$.next(e)
}); click$.subscribe(function(v) {
console.log(v)
});

One problem for this is that 'click$' become a global variable, not easy for maintance.

Not so sure how it will impact Angular, because Angular use component anyway, the subject only available to the component, maybe have low impact.

But let's see if you are not using Angular, how to conver a Subject to Observable.

const click$ = Rx.Observable.create(function(observer) {
const handler = (e) => {
observer.next(e)
}; document.addEventListener('click', handler); return function unsubscribe(){
document.removeEventListener('click', handler)
} }); const subscription = click$.subscribe(function (ev) {
console.log(ev.clientX);
}); setTimeout(function () {
subscription.unsubscribe();
}, );

[RxJS] Convert RxJS Subjects to Observables的更多相关文章

  1. [RxJS] Implement RxJS `mergeMap` through inner Observables to Subscribe and Pass Values Through

    Understanding sources and subscribers makes it much easier to understand what's going on with mergeM ...

  2. [RxJS] Use RxJS concatMap to map and concat high order observables

    Like switchMap and mergeMap, concatMap is a shortcut for map() followed by a concatAll(). In this le ...

  3. [RxJS] Use RxJS mergeMap to map and merge high order observables

    Like RxJS switchMap() is a shortcut for map() and switch(), we will see in this lesson how mergeMap( ...

  4. [rxjs] Demystifying Cold and Hot Observables in RxJS

    Cold: console.clear(); var Observable = Rx.Observable; var clock = Observable.interval(1000).take(10 ...

  5. [RxJS] Convert a Node.js style callback to Observable: bindNodeCallback

    It's just like bindCallback, but the callback is expected to be of type callback(error, result). imp ...

  6. [RxJS] Implement RxJS `switchMap` by Canceling Inner Subscriptions as Values are Passed Through

    switchMap is mergeMap that checks for an "inner" subscription. If the "inner" su ...

  7. [RxJS] Chain RxJS Operators Together with a Custom `pipe` Function using Array.reduce

    Instead of writing complex operators, it's usually best to write simple, single-purpose operators th ...

  8. [RxJS] What RxJS operators are

    We have covered the basics of what is Observable.create, and other creation functions. Now lets fina ...

  9. [RxJS] Implement RxJS `concatMap` by Waiting for Inner Subscriptions to Complete

    Unlike mergeMap and switchMap, concatMap focuses on when "inner" subscriptions "compl ...

随机推荐

  1. .Net 开源控件 NPlot使用小结

    NPlot是一款非常难得的.Net平台下的图表控件,能做各种曲线图,柱状图,饼图,散点图,股票图等,而且它免费又开源,使用起来也非常符合程序员的习惯.授权方式为BSD许可证. 下载链接: http:/ ...

  2. RK3066 实现LED闪烁的代码分析

    实现LED灯的闪烁,须要在驱动里加入一个定时器函数,详细实现涉及到了LED GPIO驱动.用户空间程序调用驱动程序. 1.首先来看LED设备驱动注冊过程,代码位于../kernel/drivers/l ...

  3. 数据结构基础(3)---C语言实现单链表

    #include<stdio.h> #include<malloc.h> #include<stdbool.h> /** **链表节点的定义 */ typedef ...

  4. POJ 3461 Oulipo KMP算法题解

    本题就是给出非常多对字符串,然后问一个字符串在另外一个字符串出现的次数. 就是所谓的Strstr函数啦. Leetcode有这道差点儿一模一样的题目. 使用KMP算法加速.算法高手必会的算法了. 另外 ...

  5. 利用hibernateTemplate进行最简单的分页

    安全的方法例如以下.别用Session s=getSession()........ /**  * 使用hql 语句进行操作  * @param hql HSQL 查询语句  * @param off ...

  6. Chrome不能在网易网盘中上传文件的解决办法

    Chrome不能在网易网盘中上传文件的解决办法1. 安装 Adobe Flash Player PPAPI,设置flash插件 chrome://settings/content/flash,许可[* ...

  7. C#中流,字节,字符,字符串

    首先要明白它们本身是由什么组成的: 流:二进制 字节:无符号整数 字符:Unicode编码字符 字符串:多个Unicode编码字符 那么在.net下它们之间如何转化呢? 一般是遵守以下规则: 流-&g ...

  8. APK文件浅析-Android

    2011~2015,5年时间,断断续续学习了Android.  最近打算在2011年2个月认真学习的基础上,深入学习下.  由于有之前的Android基础,加上N年的Java等变成经验,自我感觉And ...

  9. Nodejs源代码分析之Path

    今天介绍一下nodejs Path的源代码分析,Path的API文档在https://nodejs.org/dist/latest-v5.x/docs/api/path.html,使用相对简单,在AP ...

  10. xcode6.3 模版位置

    /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/Library/Xcode/Templ ...