Christian-Yang
commented
7 years ago RxJS 系列之二 - Observable 详解
Observable
在介绍 Observable 之前，我们要先了解两个设计模式：
Observer Pattern - (观察者模式) Iterator Pattern - (迭代器模式) 这两个模式是 Observable 的基础，下面我们先来介绍一下 Observer Pattern。
Observer Pattern
观察者模式定义
观察者模式是软件设计模式的一种。在此种模式中，一个目标对象管理所有相依于它的观察者对象，
并且在它本身的状态改变时主动发出通知。
这通常透过呼叫各观察者所提供的方法来实现。此种模式通常被用来实时事件处理系统。 — 维基百科观察者模式又叫发布订阅模式（Publish/Subscribe），它定义了一种一对多的关系，让多个观察者对象同时监听某一个主题对象，这个主题对象的状态发生变化时就会通知所有的观察者对象，使得它们能够自动更新自己。
我们可以使用日常生活中，期刊订阅的例子来形象地解释一下上面的概念。期刊订阅包含两个主要的角色：
期刊出版方和订阅者，他们之间的关系如下：
- 期刊出版方 - 负责期刊的出版和发行工作
- 订阅者 - 只需执行订阅操作，新版的期刊发布后，就会主动收到通知，如果取消订阅，以后就不会再收到通知
在观察者模式中也有两个主要角色：Subject (主题) 和 Observer (观察者) 。它们分别对应例子中的期刊出版方和订阅者。接下来我们来看张图，从而加深对上面概念的理解。
观察者模式优缺点
观察者模式的优点：
- 支持简单的广播通信，自动通知所有已经订阅过的对象
- 目标对象与观察者之间的抽象耦合关系能够单独扩展以及重用
观察者模式的缺点：
- 如果一个被观察者对象有很多的直接和间接的观察者的话，将所有的观察者都通知到会花费很多时间
- 如果在观察者和观察目标之间有循环依赖的话，观察目标会触发它们之间进行循环调用，可能导致系统崩溃
观察者模式的应用
在前端领域，观察者模式被广泛地使用。最常见的例子就是为 DOM 对象添加事件监听，具体示例如下：
<button id="btn">确认</button>
function clickHandler(event) {
console.log('用户已点击确认按钮!');
}
document.getElementById("btn").addEventListener('click', clickHandler);上面代码中，我们通过addEventListener API 监听 button 对象上的点击事件，当用户点击按钮时，会自动执行我们的 clickHandler函数。
观察者模式实战
Subject 类定义：
class Subject {
constructor() {
this.observerCollection = []; // 观察者集合
}
registerObserver(observer) { // 注册观察者
this.observerCollection.push(observer);
}
unregisterObserver(observer) { // 移除观察者
let index = this.observerCollection.indexOf(observer);
if(index >= 0) this.observerCollection.splice(index, 1);
}
notifyObservers() { // 通知所有观察者
this.observerCollection.forEach((observer)=>observer.notify());
}
}Observer 类定义：
class Observer {
constructor(name) {
this.name = name;
}
notify() {
console.log(`${this.name} has been notified.`);
}
}使用示例：
let subject = new Subject(); // 创建主题对象
let observer1 = new Observer('semlinker'); // 创建观察者A - 'semlinker'
let observer2 = new Observer('lolo'); // 创建观察者B - 'lolo'
subject.registerObserver(observer1); // 注册观察者A
subject.registerObserver(observer2); // 注册观察者B
subject.notifyObservers(); // 通知观察者
subject.unregisterObserver(observer1); // 移除观察者A
subject.notifyObservers(); // 验证是否成功移除以上代码成功运行后控制台的输出结果：
semlinker has been notified. # 输出一次
2(unknown) lolo has been notified. # 输出两次需要注意的是，在观察者模式中，通常情况下调用注册观察者后，会返回一个函数，用于移除监听解除注册，有兴趣的读者，可以自己尝试一下。(备注：在 Angular 1.x 中调用 $scope.$on() 方法后，就会返回一个函数，用于移除监听)
Iterator Pattern
迭代器模式定义
迭代器（Iterator）模式，又叫做游标（Cursor）模式。它提供一种方法顺序访问一个聚合对象中的各个元素，而又不需要暴露该对象的内部表示。迭代器模式可以把迭代的过程从业务逻辑中分离出来，在使用迭代器模式之后，即使不关心对象的内部构造，也可以按顺序访问其中的每个元素。
迭代器模式的优缺点
迭代器模式的优点：
- 简化了遍历方式，对于对象集合的遍历，还是比较麻烦的，对于数组或者有序列表，我们尚可以通过游标取得，但用户需要在对集合了解的前提下，自行遍历对象，但是对于 hash 表来说，用户遍历起来就比较麻烦。而引入迭代器方法后，用户用起来就简单的多了。
- 封装性良好，用户只需要得到迭代器就可以遍历，而不用去关心遍历算法。
迭代器模式的缺点：
- 遍历过程是一个单向且不可逆的遍历
ECMAScript 迭代器
在 ECMAScript 中 Iterator 最早其实是要采用类似 Python 的 Iterator 规范，
就是 Iterator 在没有元素之后，执行 next会直接抛出错误；
但后来经过一段时间讨论后，决定采更 functional 的做法，
改成在取得最后一个元素之后执行 next 永远都回传 { done: true, value: undefined }一个迭代器对象 ，知道如何每次访问集合中的一项， 并记录它的当前在序列中所在的位置。在 JavaScript 中迭代器是一个对象，它提供了一个 next() 方法，返回序列中的下一项。这个方法返回包含 done 和 value 两个属性的对象。对象的取值如下：
- 在最后一个元素前：{ done: false, value: elementValue }
- 在最后一个元素后：{ done: true, value: undefined }
详细信息可以参考 - 可迭代协议和迭代器协议
ES 5 迭代器
接下来我们来创建一个 makeIterator 函数，该函数的参数类型是数组，当调用该函数后，返回一个包含 next() 方法的 Iterator 对象， 其中 next() 方法是用来获取容器对象中下一个元素。具体示例如下：
function makeIterator(array){
var nextIndex = 0;
return {
next: function(){
return nextIndex < array.length ?
{value: array[nextIndex++], done: false} :
{done: true};
}
}
}一旦初始化, next() 方法可以用来依次访问可迭代对象中的元素：
var it = makeIterator(['yo', 'ya']);
console.log(it.next().value); // 'yo'
console.log(it.next().value); // 'ya'
console.log(it.next().done); // trueES 6 迭代器
在 ES 6 中我们可以通过 Symbol.iterator 来创建可迭代对象的内部迭代器，具体示例如下：
let arr = ['a', 'b', 'c'];
let iter = arr[Symbol.iterator]();调用 next() 方法来获取数组中的元素：
> iter.next()
{ value: 'a', done: false }
> iter.next()
{ value: 'b', done: false }
> iter.next()
{ value: 'c', done: false }
> iter.next()
{ value: undefined, done: true }ES 6 中可迭代的对象：
Arrays
Strings
Maps
Sets
DOM data structures (work in progress)Observable
RxJS 是基于观察者模式和迭代器模式以函数式编程思维来实现的。RxJS 中含有两个基本概念：Observables 与 Observer。Observables 作为被观察者，是一个值或事件的流集合；而 Observer 则作为观察者，根据 Observables 进行处理。
Observables 与 Observer 之间的订阅发布关系(观察者模式) 如下：
订阅：Observer 通过 Observable 提供的 subscribe() 方法订阅 Observable。 发布：Observable 通过回调 next 方法向 Observer 发布事件。
Proposal-Observable
1.Proposal-Observable 2.Proposal-Observable Implementations
RxJS 5
zen-observable3.Observables for ECMAScript
自定义 Observable
如果你想真正了解 Observable，最好的方式就是自己写一个。其实 Observable 就是一个函数，它接受一个 Observer 作为参数然后返回另一个函数。
它的基本特征：
- 是一个函数
- 接受一个 Observer 对象 (包含 next、error、complete 方法的对象) 作为参数
- 返回一个 unsubscribe 函数，用于取消订阅
它的作用：
作为生产者与观察者之间的桥梁，并返回一种方法来解除生产者与观察者之间的联系，其中观察者用于处理时间序列上数据流。接下来我们来看一下 Observable 的基础实现：
DataSource - 数据源
class DataSource {
constructor() {
let i = 0;
this._id = setInterval(() => this.emit(i++), 200); // 创建定时器
}
emit(n) {
const limit = 10; // 设置数据上限值
if (this.ondata) {
this.ondata(n);
}
if (n === limit) {
if (this.oncomplete) {
this.oncomplete();
}
this.destroy();
}
}
destroy() { // 清除定时器
clearInterval(this._id);
}
}myObservable
function myObservable(observer) {
let datasource = new DataSource(); // 创建数据源
datasource.ondata = (e) => observer.next(e); // 处理数据流
datasource.onerror = (err) => observer.error(err); // 处理异常
datasource.oncomplete = () => observer.complete(); // 处理数据流终止
return () => { // 返回一个函数用于，销毁数据源
datasource.destroy();
};
}【】【】【】【】【】【】未完成【】【】【】【】【】【】
RxJS 系列文章转载，原文：https://juejin.im/post/58e1b939da2f60005fd3122b
RxJS 系列之一 - Functional Programming 简介
什么是函数式编程
简单说，"函数式编程"是一种 "编程范式"（programming paradigm），也就是如何编写程序的方法论。
它属于 "结构化编程" 的一种，主要思想是把运算过程尽量写成一系列嵌套的函数调用(函数式编程的思想)。举例来说，现在有这样一个数学表达式：
传统的过程式编程，可能这样写：
函数式编程要求使用函数，我们可以把运算定义成不同的函数：
我们把每个运算包成一个个不同的函数，并且根据这些函数组合出我们要的结果，这就是最简单的函数式编程。
函数式编程基础条件
函数为一等公民 (First Class)
所谓 "一等公民"（first class），指的是函数与其他数据类型一样，处于平等地位，可以赋值给其他变量，也可以作为参数，传入另一个函数，或者作为其它函数的返回值。
函数赋值给变量：
函数作为参数：
函数作为返回值：
函数式编程重要特性
只用表达式，不用语句(函数式编程重要特性)
"表达式"（expression）是一个单纯的运算过程，总是有返回值；"语句"（statement）是执行某种操作，没有返回值。函数式编程要求，只使用表达式，不使用语句。也就是说，每一步都是单纯的运算，而且都有返回值
原因是函数式编程的开发动机，一开始就是为了处理运算（computation），不考虑系统的读写（I/O）。"语句"属于对系统的读写操作，所以就被排斥在外。
Pure Function
Pure Function (纯函数) 的特点：
给定相同的输入参数，总是返回相同的结果
没有产生任何副作用
没有依赖外部变量的值
所谓 "副作用"（side effect），是指函数内做了与本身运算无关的事，比如修改某个全局变量的值，或发送 HTTP 请求，甚至函数体内执行 console.log 都算是副作用。函数式编程强调函数不能有副作用，也就是函数要保持纯粹，只执行相关运算并返回值，没有其他额外的行为。
前端中常见的产生副作用的场景：
接下来我们看一下纯函数与非纯函数的具体示例：
纯函数示例：
非纯函数示例：
不修改状态 - 利用参数保存状态
函数式编程只是返回新的值，不修改系统变量。因此，不修改变量，也是它的一个重要特点。
在其他类型的语言中，变量往往用来保存"状态"（state）。不修改变量，意味着状态不能保存在变量中。函数式编程使用参数保存状态，最好的例子就是递归，具体示例如下：
示例中的 findIndex 函数用于查找数组中某个元素的索引值，我们通过 start 参数来保存当前的索引值，这就是利用参数保存状态。
引用透明
引用透明（Referential transparency），指的是函数的运行不依赖于外部变量或 "状态"，只依赖于输入的参数，任何时候只要参数相同，引用函数所得到的返回值总是相同的。
非引用透明的示例：
const FIVE = 5; const addFive = (num) => num + FIVE; addFive(10);
函数式编程的优势
1.代码简洁，开发快速
函数式编程大量使用函数，减少了代码的重复，因此程序比较短，开发速度较快。
2.接近自然语言，易于理解，可读性高
函数式编程的自由度很高，可以写出很接近自然语言的代码。我们可以通过一系列的函数，封装数据的处理过程，代码会变得非常简洁且可读性高，具体参考以下示例：
3.可维护性高、方便代码管理
函数式编程不依赖、也不会改变外界的状态，只要给定输入参数，返回的结果必定相同。因此，每一个函数都可以被看做独立单元，很有利于进行单元测试（unit testing）和除错（debugging），以及模块化组合。
4.易于"并发编程"
函数式编程不需要考虑"死锁"（deadlock），因为它不修改变量，所以根本不存在"锁"线程的问题。不必担心一个线程的数据，被另一个线程修改，所以可以很放心地把工作分摊到多个线程，部署"并发编程"（concurrency）。
函数式编程中常用方法
forEach
在 ES 5 版本之前，我们只能通过 for 循环遍历数组：
参数说明：
以上示例 forEach 方法实现：
var heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado']; heroes.forEach(name => console.log(name));
map
在 ES 5 版本之前，对于上面的示例，如果我们想给每个英雄的名字添加一个前缀，但不改变原来的数组，我们可以这样实现：
在 ES 5 版本之后，我们可以使用 map 方法，方便地实现上面的功能。
map 方法签名：
参数说明： 1.callback - 对数组中每一项，进行映射处理的函数
2.thisArg (可选的) - 设置执行 callback 函数时，this 的值 以上示例 map 方法实现：
filter
在 ES 5 版本之前，对于 heroes 数组，我们想获取名字中包含 m 字母的英雄，我们可以这样实现：
在 ES 5 版本之后，我们可以使用 filter 方法，方便地实现上面的功能。
filter 方法签名：
参数说明：
1.callback - 用来测试数组的每个元素的函数。调用时使用参数 (element, index, array)。返回true表示保留该元素（通过测试），false则不保留。 2.thisArg (可选的) - 设置执行 callback 函数时，this 的值 以上示例 filter 方法实现：