前置:我目前的学习资料是30天精通RxJS,那个时候的RxJS是5.x版本,而目前最新版本是RxJS 6,所以资料会放一部分5.x的代码,我也会自己将他转录成RxJS6的版本,可以做一个对比。
学习前置:需要JavaScript的相关知识,了解Ajax,会用控制台,最好有ES6和node.js的基础。
在线代码平台:JS Bin
为什么学习RxJS
目前刚进公司,权限很多都没批下来,因为公司的前端框架用的是Angular,而Angular的脚手架工具自带RxJS的包,所以准备自学一下。
一接触感觉这个库真的很不错,首先他并不是依赖于Angular的一个库,无论你使用React,Angular甚至是原生JavaScript,都可以使用这个库,据说在新的ES版本中正打算将其直接引入原生的JavaScript中。这也就意味着学习RxJS不需要有Angular的前置技能需求,不需要你了解前端的MVVM框架,也不需要了解TypeScript,只需要有原生JavaScript的基础以及对异步有初步的了解,懂得JavaScript中部分异步(setInterval,setTimeout以及ajax等等)的内容便可以学习了。
其次使用RxJS能简化很多涉及到异步执行的操作,在处理异步方面有点类似Promise,可以很好的处理异步信息,不会陷入无限多的回调函数,使得异步调用的过程清晰而有条理;同时也支持同步信息的处理,也可以将同步数据转化成异步输出的信息。
同时RxJS提供了丰富的operator可以对Observable进行处理,这一部分很像LinQ,数据的处理也同LinQ一样非常直观,这是promise所不具备的功能。
而与async/await相比,无论对于学习来说还是对开发来说都相当利于理解,学习成本更低。
RxJS基础部分:安装与引用
学习5.x的可以不需要安装node.js
页面中引入RxJS<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.0.1/Rx.js"></script>
如果希望学习6.x的需要一些es6以及nodejs的基础
1.在官网下载并安装node.js
2.1.通过cmd输入如下命令安装angular脚手架npm install -g @angular/cli
2.2.不希望学习Angular的可以直接安装RxJSnpm install -g rxjs
3.在代码中import { 你需要使用的模块名 } from 'rxjs'
需要引用哪些模块我将会在代码中给出。
5.x版本以及6.x版本理念是相同的,只不过代码版式略有不同。
RxJS基础部分:Observable
observable是RxJS的核心之一,直译是可观测的物体,在实例中一般是我们的所需要获取的数据源,以下是一段简单的创建observable对象的代码。
//5.x版本
var observable = Rx.Observable // 创建一个observable对象.create(function(observer) {
observer.next('Jerry'); // 同步部分
observer.next('Anna');
setTimeout(() => { // 异步部分
observer.next('RxJS!');
observer.complete(); //停止observable,此后部分不会被显示。
observer.next("not work");
}, 300)
})
//6.x版本,可以发现这里没有Rx.
//你需要在这之前import {Observable} from 'rxjs'
var observable = Observable.create(observer => {
observer.next("Jerry");
observer.next("Anna");
setTimeout(() => {
observer.next('RxJS!');
observer.complete();
observer.next("not work");
}, 300)
});
create()方法是直接创建一个observable对象的方法,该方法的参数是一个函数,其中规划了observable将来的走向。
我们一般不会再实例中直接这样定义一个人为的observable,不过这有助于我们理解observable内的三个命令(上面有两个)。
一个是next(),next顾名思义下一个数据,指的是observable中将会被观测到的下一个数据,这里的observer.next()中的参数则会作为observable的输出。
第二个是complete(),observable在没有complete前将会一直打开,complete则会关闭这个observable,之后再输出的next将不会有反应,就如同上述代码的not work,将是不会被输出的。
看到这里,有自己试着写代码的人肯定会问我,不止not work,我在浏览器里什么都没有看见,这个代码是不是写错了?
代码并没有错,但observable只是一个可以被观察的对象,世间有千千万万可以被观测的东西,只有你去注意,才能注意到事物发出的信息,这个注意的动作,叫做subscribe。
RxJS基础部分:Subscribe
试着在上述代码下加上如下代码(这里5.x和6.x的写法是一样的,以后没有特别提示RxJs的版本的代码将会是两者通用的),摁下F12,进入console,观察一下控制台的输出是否和注释相同。
console.log('start');
observable.subscribe(function(value) {
// 订阅这个observable对象,并为其设置观察者方法。
console.log(value);
});
console.log('end');
//start
//Jerry
//Anna
//end
//RxJS!
正如上一小节所说,RxJS具有同时处理同步和异步的能力,我们可以发现同步输出的Jerry与Anna插在了start与end之间,而异步输出的RxJS!则在end之后输出,complete之后的not work则没有出现。
大家可以试试把comlete放到setTimeout的外面一试,这样更能证明observable同时处理同步以及异步的能力。
subscribe不仅只有处理next的能力,和promise类似,subscribe有自己的对于不同状态的处理,请看如下代码:
observable.subscribe( {
next: function(value) { //next()走这里
console.log(value);
},
error: function(error) { // 出现异常走这里
console.log('Error: ', error)
},
complete: function() { //complete()走这里
console.log('complete')
}
})
//lambda表达式写法
observable.subscribe(
v => { console.log(v); },
e => { console.log('Error: ', e); },
() => { console.log('complete') }
)
subscribe可以传入三个函数以来应对三个不同的情况
第一个函数参数用于处理next()
第二个函数参数用于处理内部处理过程中抛出的异常
第三个函数则用于处理complete信号,可以用上述代码替换最早的subscribe代码,看看情况有什么变化。
subscribe也有一个自己的返回值,是一个subscription对象,我们可以利用这个对象的unsubscribe方法去结束某些无法complete的observable(未来我们会见到不少)。
var _subscription = observable.subscribe(function({
......
}))
_subscription.unsubscribe();
本章小结
这一小节的内容相对简单,主要介绍了如何引用RxJS以及RxJS最基础也是最核心的两个部分。
下一章我们将会接触到另一个核心部分,operator,操作符。
附录
30天精通RxJS,我是在readilen的简书上阅读的转载,原作者应该是台湾的一位前端工程师Jerry Hong,有兴趣的可以去拜读一下原文,有很多概念性的东西我没有提到,我这篇主要工作是自己总结并分享我的学习记录,并将老版本更新为新版本代码。
其中大部分思考与看法源于个人,如果有错误的话希望各位不吝赐教,这两天我大概学习了十多章,这个周末我会尽快把这些整理出来。