响应式编程 rx.js redux

响应式编程是一种通过异步和数据流来构建事物关系的编程模型。是基于观察者模式的js的实现。
在这里插入图片描述

理解

如果要直接理解,可能比较抽象,但我们可以引用百度百科的例子;例如:a = b + c; 这句代码将b+c的值赋给a,而之后如果b和c的值改变了不会影响到a,然而,对于响应式编程,之后b和c的值的改变也动态影响着a,意味着a会随着b和c的变化而变化。

响应式编程过程中,一般有以下几个组件,Observable/Operator/Subscriber;对应到代码中就是不同类。这个流程,可以简单的理解为:Observable -> Operator1 -> Operator2 -> Operator3 -> Subscriber。

解释

Observable:可理解为能观察的对象;例如:一个数组。

Operator:就是对数据进行一些操作,例如:排序,过滤,两个数组合并;都是操作,同时还可以多个一起用。

Subscriber:订阅器;目的是接收处理后的数据;在一个方法中,或者回调方法中,可以接收到操作后的数组。

优点

对应同步编程来说,和普通编程差不都;但对于异步编程,使用响应式会很方便。

缺点

写代码很反人类,响应式本质就是callback的封装。还是得把一步一步的操作换成一个一个回调;但是各个回调之间的变量共享,多级回调之间的组织等,都是问题。(简而言之,人使用命令式的方式思考的,所以没法自然的用响应式开发。比如说明书、PRD都是命令式的)。
没有有意义的堆栈,传统的堆栈,不管是调试时打的断点,还是日志中的异常栈,都是能看到哪个函数出错了,并向上逐级回溯调用方。但是响应式编程,在这个callback的堆栈里面是看不到谁放置了这个callback。

rx.js———响应式编程的一个js库

RxJS 是一个库,它通过使用 observable 序列来编写异步和基于事件的程序。它提供了一个核心类型 Observable,附属类型 (Observer、 Schedulers、 Subjects) 和受 [Array#extras] 启发的操作符 (map、filter、reduce、every, 等等),这些数组操作符可以把异步事件作为集合来处理。

可以把 RxJS 当做是用来处理事件的 Lodash 。

核心概念
在 RxJS 中用来解决异步事件管理的的基本概念是:
Observable (可观察对象):表示一个概念,这个概念是一个可调用的未来值或事件的集合。
Observer (观察者):一个回调函数的集合,它知道如何去监听由 Observable 提供的值。
Subscription (订阅):表示 Observable 的执行,主要用于取消 Observable 的执行。
Operators (操作符): 采用函数式编程风格的纯函数 (pure function),使用像 map、filter、concat、flatMap 等这样的操作符来处理集合。
Subject (主体): 相当于 EventEmitter,并且是将值或事件多路推送给多个 Observer 的唯一方式。
Schedulers(调度器):用来控制并发并且是中央集权的调度员,允许我们在发生计算时进行协调,例如 setTimeout 或 requestAnimationFrame 或其他。

Observable – 可观察对象
Observable被称为可观察序列,简单来说数据就在Observable中流动,你可以使用各种operator对流进行处理。

// 当订阅下面代码中的 Observable 的时候会立即(同步地)推送值1、2、3,然后1秒后会推送值4,再然后是完成流
const observable = rxjs.Observable
// 通过create方法创建一个Observable
// 回调函数会接受observer参数,也就是观察者角色
.create(observer => {
observer.next(1);
observer.next(2);
observer.next(3);
setTimeout(() => {
observer.next(4);
observer.complete();
}, 1000);
});
Observer – 观察者
观察者只是一组回调函数的集合,每个回调函数对应一种Observable发送的通知类型:next、error和complete。
要使用观察者,需要把它提供给Observable的subscribe方法。
Next – 表示数据正常流动,没有出现异常
Error – 表示流中出错,可能是运行出错,http报错等
Complete – 表示流结束,不再发射新的数据
在一个流的生命周期中,error和complete只会触发其中一个,可以有多个next(表示多次发射数据),直到complete或者error。

console.log(‘just before subscribe’);
// Observe观察者
// Observer 是一个对象,这个对象具有三个方法,分别是 next, error, complete
// 要使用观察者,需要把它提供给 Observable 的 subscribe 方法
const observe = {
next: x => console.log('got value ’ + x),
error: err => console.error('something wrong occurred: ’ + err),
complete: () => console.log(‘done’),
};

// 订阅这个 observable
// 只有在订阅之后,才会在流Observable变化的时候,调用observer提供的方法,并通知他
observable.subscribe(observe);
console.log(‘just after subscribe’);
// 输出
/just before subscribe
got value 1
got value 2
got value 3
just after subscribe
got value 4
done
/
Subscription - 订阅
Subscription是表示可清理资源的对象,通常是Observable的执行。Subscription有一个重要的方法,即unsubscribe,它不需要任何参数,只是用来清理由Subscription占用的资源。
Subscription基本上只有一个unsubscribe()函数,这个函数用来释放资源或取消Observable执行。

let subscription = observable.subscribe(observe);
setTimeout(() => {
subscription.unsubscribe();
}, 1000);
Operators - 操作符
操作符是Observable类型上的方法,比如map()、filter()、merge()等等。当操作符被调用时,它们不会改变已经存在的Observable实例。相反,它们会返回一个新的Observable,它的subscription逻辑基于第一个Observable。
RxJS的操作符有点多,我们可以按照种类分为:组合、条件、创建、错误处理、过滤、多播、转换以及一些工具。可参考https://rxjs-cn.github.io/learn-rxjs-operators/operators/,使用时按需要寻找,其实部分操作符从功能来讲可能会觉得区别不太大,区分起来也比较困难,我们可以查阅它们的弹珠图来方便我们区分。我们之举一个简单的例子来展示一下。

const { from } = rxjs;
const { filter, take, last, startWith, skip } = rxjs.operators;

// 发出(1, 2, 3, 4, 5)
const source = from([1, 2, 3, 4, 5]);
const example = source.pipe(
  // 开头追加 6, 8 得 6, 8, 1, 2, 3, 4, 5
  startWith(6, 8),
  // 舍弃第一个 得 8, 1, 2, 3, 4, 5
  skip(1),
  // 只取偶数得 8, 2, 4
  filter(num => num % 2 === 0),
  // 再取前俩得 8, 2
  take(2),
  // 只取最后一个得 2
  last()
);
example.subscribe(val => {
  console.log(`The number: ${val}`)
});

Subject – 主体
Subject是一个特殊类型的Observable,它允许将值多播给多个观察者,所以Subject是多播的,而普通的Observables是单播的(每个已订阅的观察者都拥有Observable的独立执行)。
每个Subject都是Observable。对于Subject,你可以提供一个观察者并使用 subscribe 方法,就可以开始正常接收值。从观察者的角度而言,它无法判断 Observable 执行是来自普通的 Observable 还是 Subject。
每个 Subject 都是观察者。Subject 是一个有如下方法的对象: next(v)、error(e) 和 complete() 。要给 Subject 提供新值,只要调用 next(theValue),它会将值多播给已注册监听该 Subject 的观察者们。

const {take} = rxjs.operators;

const source = rxjs.interval(1000).pipe(take(3));
const subject = new rxjs.Subject();

// observer 其实就是实现了next方法,error方法和complete方法的对象
const observerA = {
next: value => {
console.log(A: + value )
},
error: error => {
console.log(‘Error:’, error);
},
complete: () => {
console.log(‘complete’);
}
};

const observerB = {
next: value => {
console.log(B: + value)
},
error: error => {
console.log(‘Error:’, error);
},
complete: () => {
console.log(‘complete’);
}
};

// 不会执行,相当于注册 observer,只是将给定的观察者注册到观察者列表中
subject.subscribe(observerA);
subject.subscribe(observerB);
// setTimeout(() => {
// subject.subscribe(observerB);
// }, 2000)

// 注释去掉才会执行
// source.subscribe(subject);
Schedulers – 调度器
调度器控制着何时启动subscription和何时发送通知。由三部分组成:
调度器是一种数据结构。它知道如何根据优先级或其他标准来存储任务和将任务进行排序。
调度器是执行上下文。它表示在何时何地执行任务(举例来说,立即的,或另一种回调函数机制(比如setTimeout), 或动画帧)。
调度器有一个(虚拟的)时钟。调度器功能通过它的getter方法now()提供了“时间”的概念。在具体调度器上安排的任务将严格遵循该时钟所表示的时间。

// 调度器可以让你规定 Observable 在什么样的执行上下文中发送通知给它的观察者。
// https://www.jianshu.com/p/5624c8a6bd2b
const observable = rxjs.Observable.create(observer => {
observer.next(1);
observer.next(2);
observer.next(3);
observer.complete();
})
// observeOn 作用
// 改变通知的Notifications执行时机,即Observables中的Next,Error,Complete函数
// 能够用于每个操作符的前面,即可以多次使用
.observeOn(rxjs.Scheduler.async); // 设置为async
console.log(‘just before subscribe’);
observable.subscribe({
next: x=> console.log(got value ${v}),
error: err => console.error(something wrong occurred: ${err}),
complete: () => console.log(‘done’)
});
console.log(‘just after subscribe’);
// 输出结果:
/just before subscribe
just after subscribe
got value 1
got value 2
got value 3
done
/
由于调度器使用的不多,只简单的说明一下。
本篇主要是大致的介绍一下RxJS,让大家可以有个初步的概念,如果想研究更多更详细的,请参考RxJS中文文档。

redux

基础介绍

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小苗爸爸

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值