Rxjs响应式编程

关于Rxjs的现状

鉴于响应式编程近几年才开始真正流行,而且响应式的理念也并不是在所有领域都深得人心,对于不是特别喜欢追求新概念新技术的公司或程序员来说,不排除有确实没听说过的可能。

对于听说过的人来说,可能也并不是都理解响应式编程的理念,可能只是把 Rx 当成和 Promise、Async 类似的用来替代 Callback 的异步方案,但是可能自己的需求用 Promise 等已经足够解决,所以没有足够的意愿和时间来了解 Rx。

对于了解 Rx 的响应式编程及其优势的人来说,可能出于实际项目中团队合作的需要,并不经常能够使用 Rx。并且目前大部分类库还是基于回调或者 Promise 的,要使用 Rx 的话需要一些胶水代码来封装,对于异步逻辑不是足够复杂的可能在 Glue 上也需要一些额外的成本。

对于用 ES5 的开发人员来说,由于没有 Lambda 所以 Rx 在写法上可能也较为复杂。

Rx 的一个问题就是它其实是一个 paradigm,侵入性很强。你如果要用 Rx 写东西,最好就整个系统都是以 Rx 为核心来设计。(比如 Cycle.js)对于已经用传统范式开发了一定时间的项目来说,引入 Rx 会比较尴尬。

另外单就前端来说,很多场景并没有复杂到需要 Rx,这种时候用 Rx 反而成本变高了。

Rxjs是什么

RxJS全名Reactive Extensions for JavaScript : Javascript的响应式扩展
Rxjs是一个基于JavaScript的库
还有支持其他语言的库,比如:Rxjava

什么是响应式编程(RP: Reactive programming)

响应式的思路:是把随时间不断变化的数据、状态、事件等等转成可被观察的序列(Observable Sequence),然后订阅序列中那些Observable对象的变化,一旦变化,就会执行事先安排好的各种转换和操作。
响应式编程是使用异步数据流进行编程

由谁发明的?

微软出品

为什么要使用(它解决了什么问题)

有人这样说 :

RxJS是一个解决异步问题的JS开发库.它起源于 Reactive Extensions 项目,它带来了观察者模式和函数式编程的相结合的最佳实践.观察者模式是一个被实践证明的模式,基于生产者(事件的创建者)和消费者(事件的监听者)的逻辑分离关系.

知乎上这样说:

RxJS/Cycle.js解决的是数据流的问题,为什么有数据流的问题,是因为更倾向于或者受限于使用单向数据绑定,核心其实解决的是State管理的问题。偏向于Redux或者Flux架构会有全局State的困扰

Rxjs的原理,核心

Rxjs核心概念之Observable
对观察者模式的实现才是Rxjs的核心,但这仅仅是RxJS旅程的开始,丰富的扩展 才是RxJS的威力所在。
Observable(可观察对象)是基于推送(Push)运行时执行(lazy)的多值集合

就 RxJS 来说,可以把 JavaScript 工程师分为以下几个层次:

没听说过 RxJS 的;
听说过但是不会的;
会的但是不常用的;
会的并且经常用的。

下面就来说说说它的用法

Rxjs的用法

RxJS的基本用法:
Rx.Observable.*创建一个Observable对象当它发生变化时,以流式的方式触发各种转换(如有需要可以对变化的值做合并、映射、过滤等操作),最后传到订阅回调拿到处理后的最终结果。

  • 数据的转换

Rxjs将数据分为两种类型:

  • 普通数据 - 比如:数组,字符串,json对象之类的
  • 可观测对象 - 比如使用Rx.Observable.create()方法获得的对象


    Rxjs响应式编程_第1张图片
    数据转换的过程

就像普通数据可以进行加、减、乘、除等运算一样,RxJS提供了相当多的 扩展方法来扩展对Observable对象的操作能力。
比如你可以使用from()方法将普通的数据变换到Observable域,或者 使用to()方法将Observable还原为普通数据:

var a = Rx.Observable.from([1,2,3,4]); 
var b = a.toArray();
  • create()方法的使用

使用create方法从零开始创建一个可观测序列/Observable
create方法的参数是一个封装数据生成逻辑的函数,其参数为观测者/Observer

var generator = function(observer){
    //数据生成逻辑
}
Rx.Observable.create(generator);

在函数generator的实现中,通过调用参数对象observer的三个方法,实现数据 的生成、错误的通知和结束声明:

  • onNext(data)* - 向观测者传送新的数据data

  • onError(err)* - 通知观测者有错误发生,并且终止当前序列

  • onCompleted()* - 通知观测者当前序列已结束

  • 简单扩展方法的使用:

或者将多个可观测对象使用concat()方法拼接起来:

//a:1 2 3 
//b: 4 5 6
//c: 7 8 9 
a.concat(b,c); //结果: 1 2 3 4 5 6 7 8 9

或者对Observable对象生成的数据使用sum()方法求和:

//a: 1 2 3
a.sum(); //结果:6

或者对Observable对象生成的每个数据进行映射处理:

//a: 1 2 3
a.map(function(d,i){ return d*10 }) //结果: 10 20 30

这些扩展的方法,RxJS称之为操作符/Operator,一个操作符通常返回的 是另一个新的Observable对象,这意味着它还处于Observable域,从而 可以将多个操作符链接起来,构成一条对Observable进行处理的流水线:

Rx.Observable.of(1,2,3)                 // 1 2 3
    .map(function(d){ return d*10;})    // 10 20 30 
    .concat(Rx.Observable.from([4,5,6])) // 10 20 30 4 5 6
    .subscribe(
        function(d){ console.log(d);},
        function(e){ console.log(e);},
        function(){ console.log("done");}
    )
参考学习网址:

官网
segmentfault- Observable
segmentfault- Subject

你可能感兴趣的:(Rxjs响应式编程)