1. Observable与观察者模式的关系

其实这里讲的Observable就是一种观察者模式,只不过RxJS把Observable结合了迭代模式以及附件了很多的operator,让他变得很强大,也增添了一些神秘的色彩。

那么设计模式中的观察者模式,其实是非常简单的,可以用生活中的订牛奶的示例来说明,

你订阅了某订奶机构的牛奶,那么付了钱之后,在预定的时间内都会给你送牛奶,如果你取消订阅,那么第二天就收不到新鲜的牛奶了。

其实,观察者模式的模型在生活中很多,突然想到订牛奶,是因为我前段时间订牛奶,要装奶箱,订奶机构的工作人员省事到直接用两根铁丝绑了门上了,结果第二天我就被小区物业说了,我给他发完短信,一怒之下想给客服打电话投诉他,结果装奶箱的可爱人给我发了一条短信:

对不起啊,我明天给你重装,不要给客服打电话,他们会扣我的毛爷爷的。

于是乎,我就放下了电话,只能说大家赚钱都不容易。

闲话莫谈,下面通过具体的实现来一起理解相应的概念。

2. Observable的具体实现

我们先看一下如果去使用Observable,下面一段代码是RxJS官网中的例子。

 
 运行结果:
我们一起来分析一下上面的例子,并把理解的重点之处指出来。 

2.1 Observable是一个函数

首先通过RxJS创建一个Observable的实例,Observable解释为被观察者。

var observable = Rx.Observable.create(function(observer){}

重点:Observable理解为一个函数,这很重要

这样在下面的每次订阅中就可以知道为什么是从头执行,因为一个函数调用都是从头开始执行的。

这就和我们普通理解到的报纸订阅不太一样了。

报纸订阅:如果你今天订了报纸,那么明天只会收到明天以及明天以后的报纸,之前的报纸是不会收到的。

Observable:相当于你今天订了报纸,那么明天会收到报纸机构从第一天发报到明天的所有的报纸。

2.2 订阅的过程

怎么订阅的呢?

是通过Observable的subscribe函数进行订阅的,subscribe函数的函数体就是刚才的Observable的函数体,那么subscribe的参数就是订阅者,也叫观察者observer。

代码中是一个观察者observer1去订阅了此Observable对象observable。

那么只要观察者订阅服务就马上执行Observable的函数体。

观察者实现过程:

首先观察者是一个对象,包含三个回调函数。

next:表示一个接一个的任务。

error:表示Observable对象执行流程出错了,订阅会立即结束。

complete:表示订阅过程完成了。

所以Observable对象的函数体内执行的任务其实就是在调用观察者的next以及complete回调函数。

当Observable对象的函数体执行出错时,会调用观察者的error回调函数。

无论哪种情况,next 处理器都是必要的,而 error 和 complete 处理器是可选的。

2.3 取消订阅

那么如何去取消订阅呢?

在解决此问题之前,先列出一个对象subscription,它是干嘛的呢?

subscription是用来描述观察者和被观察者的订阅关系。

var subscription1 = observable.subscribe(observer1);

取消订阅就很简单,直接采用:

subscription1.unsubscribe();

2.4 多人订阅

可以进行多个观察者订阅。

像下面的例子,再创建一个observer2的对象,执行下面的操作,observer2就订阅了此服务,那么observer2的执行过程和observer1是没有任何关系的。

注意:并不是共享订阅的Observable对象。

observable.subscribe(observer2);

 observer2订阅:
 

3. 总结概念

现在总结一下,涉及到的名字,我们以家里订牛奶为例来进一步说明。

3.1 Observable

被观察者,相当于送奶机构。

实现上是一个函数对象,谁订阅了,就执行此函数的函数体。

3.2 Observer

观察者,相当于某一个订牛奶的个体。

实现上是一个对象,里面注册了三个回调函数,分别是next、error、complete。

Observable的函数体会执行Observer的回调函数。

3.3 subscribe

Observable和Observer怎么建立关系?送奶机构怎么知道给谁送牛奶?

通过subscribe函数,这样observer就和observable建立了观察和被观察的关系了。

3.4 subscription

Observable和Observer之间的关系,谁去维护呢?订阅牛奶的订单谁去管呢?

那么就是subscription来管理Observable和Observer之间的关系。

3.5 unsubscribe

unsubscribe解除Observable和Observer之间关系,牛奶不再送了。

3.6 中断的概念

Observable的函数体如果出错或complete,那么函数体就会停止执行,再有next也不会执行,如果函数体是下面代码这样执行的,因为setTimeout里面的next(那么observer.next(4)是不会执行的。

 

最后用一句话总结一下:

Observable的好处在于模型简单、过程有多个输出、中间可以中断和RxJS提供的强大的operators。

转载自:

RxJS的Observable概念详解

Angular学习笔记—RxJS与Observable(转载)的更多相关文章

  1. Angular学习笔记—Rxjs、Promise的区别

    Promises: 异步操作完成或失败时处理单个事件 不可取消 代码可读性强,有try/catch Observables: 可持续监听和响应多个事件 可取消订阅 支持map, filter, red ...

  2. angular学习笔记(三十一)-$location(2)

    之前已经介绍了$location服务的基本用法:angular学习笔记(三十一)-$location(1). 这篇是上一篇的进阶,介绍$location的配置,兼容各版本浏览器,等. *注意,这里介绍 ...

  3. angular学习笔记(三十一)-$location(1)

    本篇介绍angular中的$location服务的基本用法,下一篇介绍它的复杂的用法. $location服务的主要作用是用于获取当前url以及改变当前的url,并且存入历史记录. 一. 获取url的 ...

  4. angular学习笔记(三十)-指令(10)-require和controller

    本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐direct ...

  5. angular学习笔记(三十)-指令(7)-compile和link(2)

    继续上一篇:angular学习笔记(三十)-指令(7)-compile和link(1) 上一篇讲了compile函数的基本概念,接下来详细讲解compile和link的执行顺序. 看一段三个指令嵌套的 ...

  6. angular学习笔记(三十)-指令(7)-compile和link(1)

    这篇主要讲解指令中的compile,以及它和link的微妙的关系. link函数在之前已经讲过了,而compile函数,它和link函数是不能共存的,如果定义了compile属性又定义link属性,那 ...

  7. angular学习笔记(三十)-指令(6)-transclude()方法(又称linker()方法)-模拟ng-repeat指令

    在angular学习笔记(三十)-指令(4)-transclude文章的末尾提到了,如果在指令中需要反复使用被嵌套的那一坨,需要使用transclude()方法. 在angular学习笔记(三十)-指 ...

  8. angular学习笔记(三十)-指令(5)-link

    这篇主要介绍angular指令中的link属性: link:function(scope,iEle,iAttrs,ctrl,linker){ .... } link属性值为一个函数,这个函数有五个参数 ...

  9. angular学习笔记(三十)-指令(2)-restrice,replace,template

    本篇主要讲解指令中的 restrict属性, replace属性, template属性 这三个属性 一. restrict: 字符串.定义指令在视图中的使用方式,一共有四种使用方式: 1. 元素: ...

随机推荐

  1. OSI七层模型与TCP/IP五层模型详解

    博主是搞是个FPGA的,一直没有真正的研究过以太网相关的技术,现在终于能静下心学习一下,希望自己能更深入的掌握这项最基本的通信接口技术.下面就开始搞了.   一.OSI参考模型         今天我 ...

  2. iOS swift HandyJSON组合Alamofire发起网络请求并转换成模型

    在swift开发中,发起网络请求大部分开发者应该都是使用Alamofire发起的网络请求,至于请求完成后JSON解析这一块有很多解决方案,我们今天这里使用HandyJSON来解析请求返回的数据并转化成 ...

  3. VirtualBox下Linux加载Windows的共享目录

    1.Windows下,在VirtualBox安装增强功能. 菜单 -> 设备 -> 安装增强功能 2.Windows下,在VirtualBox设置共享目录. 设置 -> 共享文件夹 ...

  4. 【Mac + Appium + Python3.6学习(五)】之常用的Android自动化测试API总结

    Github测试样例地址:https://github.com/appium-boneyard/sample-code/tree/master/sample-code/examples ①定位text ...

  5. MFC自绘框架窗口客户区

    利用MFC开发用户界面往往需要需要根据要求进行界面美化,界面的美化包括很多内容,比如说界面各功能模块空间布局,控件位置选择,各功能模块区域的字体.背景颜色选择.添加位图,标题栏.菜单栏.状态栏等的重绘 ...

  6. WPF数据验证(4)——响应与获取验证错误

    1780 前面的示例中,有关用户接受到错误的唯一指示是在违反规则的文本框周围的红色轮廓.为了提供更多信息,可以处理 Error 事件,但存储或清除错误时会引发该事件,但前提是必须确保已将 Bindin ...

  7. asp.net页面触发事件panel滚动条高度不变的实现方法

    asp.net页面按钮点击触发事件后panel滚动条非自动回到顶端,每次都要往下拉一下,关于这个问题的解决方法如下 此文是为解决asp.net页面按钮点击触发事件后panel滚动条非自动回到顶端的解决 ...

  8. CSV转PDF(C++)

    CSV : Comma Separate Values 特点: 每条记录占一行 以逗号为分隔符 逗号前后的空格会被忽略 字段中包含有逗号,该字段必须用双引号括起来 字段中包含有换行符,该字段必须用双引 ...

  9. DIV高度设置全屏

    <div class="full"></div> .full{ height:100%; position:fixed; } 使用position的fixe ...

  10. SQL语法:查询此表有另外一个表没有的数据

    select bei.ExamItem_Code2,*from PeisPatientExamItem ppeijoin PeisPatientFeeItem ppfion ppfi.ID_Patie ...