RxJS Observable——理解观察者模式

最新推荐文章于 2025-06-06 09:03:51 发布

原创最新推荐文章于 2025-06-06 09:03:51 发布 · 2.7k 阅读

1 ·

CC 4.0 BY-SA版权

RxJS 同时被 2 个专栏收录

1 篇文章

订阅专栏

observable

1 篇文章

订阅专栏

本文深入解析观察者模式在JavaScript中的应用，通过创建可观察对象（observable）和观察者对象（observer），并使用订阅（subscribe）机制，实现了数据变化时自动执行函数的功能。文章通过实例详细解释了observable、observer和subscribe三个核心概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Observable——理解观察者模式

观察者模式（Observer mode）指的是函数自动观察数据对象，一旦对象有变化，函数就会自动执行。——《ECMAScript 6 入门》

一理解三个概念

js对象是属性和函数的集合

observable（可观察对象）：由Rx.Observable.create 或创建操作符创建的的对象
observer（观察者对象）：一个回调函数的集合
subscribe（订阅）：可以理解为一个订阅事件，当订阅事件发生时，observer（观察者对象）会根据observable（可观察对象）里对observer对象的回调函数的调用来执行函数

二创建observable（可观察对象）

var observable = Rx.Observable.create(function subscribe(observer) {
  observer.next(1);
  observer.next(2);
  observer.next(3);
  observer.complete();
});

Rx.Observable.create()参数是一个subscribe函数，subscribe函数的参数是一个observer（观察者对象）。subscribe函数里调用observer对象的next()函数。

三创建 observer（观察者对象）

var observer = {
    next: (x) => {console.log(x)},
    err: (err) => {console.log(err)},
    complete: () => {console.log("complete")}
}

四 observer（观察者对象）订阅observable（可观察者对象）

observable.subscribe(observer);

执行结果：

>1
>2
>3
>complete