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. [Javascript] Classify JSON text data with machine learning in Natural

    In this lesson, we will learn how to train a Naive Bayes classifier and a Logistic Regression classi ...

  2. JS 图片大小自动调整 (img)

    <script> function dlutChangeImg(){ var maxwidth = 598; var obj = document.getElementById('bbs_ ...

  3. php课程 18-60 cookie和session的最主要区别是什么

    php课程 18-60 cookie和session的最主要区别是什么 一.总结 一句话总结:存储位置不同:cookie存储在客户端:session存储在服务端. 1.cookie和session在p ...

  4. sql查看依赖关系

    select OBJECT_NAME(object_id) as name,object_NAME(referenced_major_id) as ref from sys.sql_dependenc ...

  5. idea添加自动编译

    话不多说,idea每次修改文件不自动编译到项目里,这里做一下一些操作 registry快捷键ctrl+shift+alt+/

  6. 将vue-cli 2.x的项目升级到3.x

    尝试将vue-cli 2.x的项目升级到3.x,记录一下升级过程,和遇到的坑 1. 直接复制替换src文件夹 2. 安装项目需要的依赖 (可以将原来package.json dependencies下 ...

  7. BZOJ3998: [TJOI2015]弦论(后缀自动机,Parent树)

    Description 对于一个给定长度为N的字符串,求它的第K小子串是什么. Input 第一行是一个仅由小写英文字母构成的字符串S 第二行为两个整数T和K,T为0则表示不同位置的相同子串算作一个. ...

  8. 【iOS开发-29】解决方式:TabBar的图片不显示,仅仅显示灰色的正方形

    (1)现象 tabbar上的图片变成一块正方形的灰色块块,原先的图片没有了. (2)原因 tabbar上的图片本质上不是一个图片.而是一个形状图片.系统对我们使用的图片也仅仅是把当中的形状" ...

  9. 13.constexpr

    #include <iostream> using namespace std; //声明返回值为常量表达式 constexpr int get() { ; return num; } v ...

  10. 用Promise对象封装JQuery的AJAX过程

    let jqPostAjaxPromise = function(param){ return new Promise(function(resolve, reject){ $.ajax({ url: ...