[聚合文章] rxjs学习入门心得(一)Observable可观察对象

推荐我的Rxjs教程：Rxjs系列教程目录

前言

随着开发中项目的越来越大，代码的要求越来越高，于是开始四处搜找各种js库进行学习。为了学习代码行为模式，例如：竞争等等。在技术总监的指引下找到Rxjs进行学习，再次表以感谢。在看教程时，有很多地方不解，于是用博客做以记录，并将自己的经验以尽可能简单的方式分享给大家。

这里简单解释一下Rxjs，RxJS 是一个js库，它通过使用 observable 序列来编写异步和基于事件的程序。ReactiveX 结合了 观察者模式、迭代器模式 和 使用集合的函数式编程，以满足以一种理想方式来管理事件序列所需要的一切。看到这你肯定疑问它有什么用？你先放下这个疑问，先看看一个简单的案例。

Observable可观察对象

Observable可观察对象：表示一个可调用的未来值或者事件的集合。

一个例子

通常你这样注册事件监听：

var button = document.querySelector('button');button.addEventListener('click', () => console.log('Clicked!'));

使用RxJS创建一个可观察对象：

var button = document.querySelector('button');Rx.Observable.fromEvent(button, 'click').subscribe(() => console.log('Clicked!'));

看到这段代码你可能迷茫，这是什么意思？难道只是换了一种写法？

观察者模式

要说Observable可观察对象首先得说说：观察者模式。

观察者模式又叫发布-订阅（Publish/Subscribe）模式：

他定义了一种一对多的依赖关系，让多个观察者对象同时监听某一个主题对象(也可叫做抽象的通知者)。这个主题对象在状态发生变化时，会通知所有观察者对象，使他们能够自动更新自己。而且各个观察者之间相互独立。

观察者模式的结构中包含四种角色：

（1）抽象主题（Subject）：主题是一个接口，该接口规定了具体主题需要实现的方法，比如，添加、删除观察者以及通知观察者更新数据的方法。
（2）抽象观察者（Observer）：观察者是一个接口，该接口规定了具体观察者用来更新数据的方法。
（3）具体主题（ConcreteSubject）：具体主题是实现主题接口类的一个实例，该实例包含有可以经常发生变化的数据。具体主题需使用一个集合，比如ArrayList，存放观察者的引用，以便数据变化时通知具体观察者。
（4）具体观察者（ConcreteObserver）：具体观察者是实现观察者接口类的一个实例。具体观察者包含有可以存放具体主题引用的主题接口变量，以便具体观察者让具体主题将自己的引用添加到具体主题的集合中，使自己成为它的观察者，或让这个具体主题将自己从具体主题的集合中删除，使自己不再是它的观察者。

观察者模式结构的类图如下所示：