RxJS Observable 为什么要长成这个样子？！

它大概长什么样子

我们都知道 RxJS Observable 最基础的使用方法：是建立 Observable，即调用 .create API

使用方法如下🌰：

var observable = Rx.Observable
	.create(function(observer) {
		observer.next('Hi');
		observer.next('Jimmy');
	})

observable.subscribe(
    value => {console.log(value)}
)

// Hi
// Jimmy

创建一个 observable 实例后，当它调用 .subscribe，会将 .next(params) 的信息传到 value 并执行这个 function；

next 的过程是同步的，但，也可以是异步的，比如🌰：

var observable = Rx.Observable
	.create(function(observer) {
		observer.next('Hi');
		observer.next('Jimmy');

		setTimeout(() => {
			observer.next('async');
		}, 30)
	})

console.log('start');

observable.subscribe(
  value => {console.log(value)}
);

console.log('end');

// start
// Hi
// Jimmy
// end
// async

其中，observer，除了 next 方法，

还有：

• complete 方法
• error 方法：

用法如下🌰：

var observable = Rx.Observable
	.create(function(observer) {
                observer.next('Hi');
                observer.next('Jimmy');
                observer.complete();
                observer.next('long time no see');
	})

observable.subscribe(
    value => { console.log(value); },
    error => { console.log('Error: ', error); },
    complete => { console.log('complete') },
)

// Hi
// Jimmy
// complete

complete 执行后，next 就会自动失效，不会再继续打印出 “long time no see”；

而 error 用于捕获 try catch 中 throw 的 ‘msg’；

                ...
                try {
                    observer.next('Hi');
                    observer.next('Jimmy');
                    throw 'some exception';
                } catch(e) {
                    observer.error(e)
                }
                ...

为什么这么写

那它为什么要长成这个样子呢？Why？

我就写这样，它不香？

function fn1(){
    console.log('Hi')
    console.log('Jimmy')
    return false
}

fn1()

为什么要改写为类似这样：

function f1(cb){
    cb('Hi')
    cb('Jimmy')
    return false
}

fn1(value => console.log(value))

本瓜最终理解为，其最具重要意义的一点是：为了将【数据】和【操作数据的行为】分开！！

实际上，分离【常量数据】和【操作方法】（也可以叫作计算方法/计算函数）是函数式编程的重要思想 —— 所有所需所求，都是通过计算得来的，而不改变变量的值；

（将一个函数作为参数传入另外一个函数，也就是 FP 中常提的高阶函数；）

过去，如果不将数据和操作分开，它是这样的：

function f1(){
    console.log('Hi')
    console.log('Jimmy')
    return false
}

function f2(){
    alert('Hi')
    alert('Jimmy')
    return false
}

fn1()
fn2()

在函数体内，是命令式的代码风格，将 A 数据这样操作，再将 B 数据这样操作；

而现在，将数据和操作分开，它是这样的：

function stream(cb){ 
    cb('Hi')
    cb('Jimmy')
    return false
}

stream(value => console.log(value))
stream(value => alert(value))

stream 函数体内，声明了 A 数据、B 数据… 是一个数据流；

具体怎么再操作这些数据，就再看【操作方法】是什么；

这样做还有另外一个很大的 好处，就是：

对于多个数据流和多个操作，它的代码结构会更清晰，耦合度更低，拓展性更高；

它会是这样的：

class Stream {
  constructor(behavior) {
    this.behavior = behavior
  }
  doHandle(cb) {
    this.behavior(cb)
  }
}

const handleStream1 = new Stream(cb => {
   cb('Hi')
   cb('Jimmy')
})

const handleStream2 = new Stream(cb => {
   cb('Bye')
   cb('Lily')
})

/********  以上是数据流声明  ********/
/********     以下是操作     ********/

// 对数据流 1，做第一种操作
handleStream1.doHandle(
  value => console.log(value)
)

// 对数据流 1，做第二种操作
handleStream1.doHandle(
  value => alert(value)
)

// 对数据流 2，做第一种操作
handleStream2.doHandle(
  value => console.log(value)
)

// 对数据流 2，做第二种操作
handleStream2.doHandle(
  value => alert(value)
)

特别说明：以上的操作（ console 和 alert） 只是一种最简单的替代操作的示意，实际代码中，会复杂的多（对数据进行复杂计算等等）。

我敲，这 Stream 不就是 Observable 吗！cb 不就是 observer！doHandle 不就是 subscribe！！

小结：

毫无疑问，Observable 还有更多神奇的妙用，本篇理解不过管中窥豹，但想要强调的重点即是：将数据声明和数据操作分离，是函数式编程中提高代码可读性的重要特性；至于数据形成的数据管道，以及常用管道操作，后面会继续介绍（关注不迷路）~~

不知道各位对 Observable 有怎样的理解，欢迎评论留言讨论。

我是掘金安东尼，输出暴露输入，技术洞见生活，下次见~~