分类

最近发布

公告

  • 星博客移动端完成(07/22)

    做得比较随意,UI非常简便

  • 正式上线啦!(07/19)

    星博客V2.0已经正式上线,欢迎大家登录浏览!

  • 星博客V2.0启动(07/15)

    由于不满意1.0版本的UI风格,星博客V2.0今日进入开发阶段

自己的Observable构思与实现

引言

长期使用Rxjs之后,可以明白一句话:

Observables can "return" multiple values over time

它是一个这样的Function(或者类似的东西),你一旦调用(或者叫订阅)了它,它就可以在时间轴上不间断地“返回”值,每次“返回”,你定义的消费函数(Observer)都会接收到这个值并执行。

按照这个思路:首先,一个Obseravle对象应该有一个当前值字段以保存任意时间点传入的值,姑且把这个时间点叫做赋值时间点(next);然后,消费函数(Observer)必需被缓存起来,这样下一个赋值时间点(next)便可以执行所有的消费函数(Observer)

Rxjs中一个普通的Obseravle对象,赋值时间点(next)之后的订阅才是有效的!当然BehaviorObservable会有一个当前值,任何时候的一个订阅都会立即收到当前值、执行消费函数(Observer)

因项目需要,我实现的这个Obsevable类有点像BehaviorObservable和Subject

定义类

其中,_observers用于做消费函数缓存,_val用于保存当前值

function Observable() {
    this._observers = [];
    this._val = null;
}

定义next方法

Observable.prototype.next = function (val) {
    this._val = val;
    var _observer = null;
    for(var i in this._observers) {
        _observer = this._observers[i];
        _observer && _observer(val);
    }
}

定义subscribe方法

Observable.prototype.subscribe = function (observer) {
    observer && observer(this._val);
    this._observers.push(observer);
}

添加map方法

Observable.prototype.map = function (project) {
    var obs = new Observable();
    this.subscribe(function(v) {
        obs.next(project(v));
    });
    return obs;
}

使用

const Observable = require('./Observable.class');

const obs = new Observable();
obs.next('99');

obs.subscribe((v) => {
    console.log(v);
})

obs.next('100');
obs.next('101');

结果

observable

以上内容纯属随意模仿,并没有看过rxjs源码,如觉不正确,请勿参考。

发布于 2018年03月14日 20:16
阅读 60 可以 1