设计模式之观察者模式

Posted 2020-10-23 xvivx

观察者模式

观察者模式又被称作发布者订阅者模式，是一种管理对象行为和状态之间的关系的方法。这种模式的实质就是你可以对程序中的某个对象的状态进行观察，并且在其发生变化时能够得到通知。

观察者模式存在两个角色，观察者和被观察者，也就是发布者和订阅者。拿报纸的例子来说读者即是订阅者，报社是发布者，报社把报纸分发给订阅他们的读者，读者进行数据吸收分析。简单来说就是这样一个过程。订阅者从发布者接受数据，发布者需要发送数据。一个订阅者可以订阅多个发布者， 一个发布者可以有很多订阅者，这是一种多对多的关系，需要一种高级的抽象策略，以便订阅者能够彼此独立地变化，发布者可以接受任意的订阅者。

// 构建发布者类
function Publisher() {
    this.subscribers = [];
}

// 定义发布者的发布方法
Publisher.prototype.deliver = function (data) {
    this.subscribers.forEach(function (fn) {
        fn(data);
    });

    return this;
};

// 暴露出提供给订阅者订阅的接口
Publisher.prototype.subscribe = function (fn) {
    var alreadyExists = this.subscribers.some(function (el) {
        return el === fn;
    });

    if(!alreadyExists) {
        this.subscribers.push(fn);
    }

    return this;
};

// 暴露出取消订阅的接口
Publisher.prototype.unsubscribe = function (el) {
    this.subscribers = this.subscribers.filter(function (el) {
        return el !== fn;
    });

    return this;
};


var publisher = new Publisher();
var Animation = function (o) {
    this.onStart = new Publisher();
    this.onComplete = new Publisher();
    this.onTween = new Publisher();
};

Animation.prototype.fly = function () {
    this.onStart.deliver(‘我要起飞‘);
    this.onTween.deliver(‘我正在飞。。。‘);
    this.onComplete.deliver(‘飞行结束‘);
};


var superMan = new Animation({});

superMan.onStart.subscribe(function (data) {
    console.log(data + ‘1‘);
});
superMan.onStart.subscribe(function (data) {
    console.log(data + ‘3‘);
});
superMan.onComplete.subscribe(function (data) {
    console.log(data + ‘1‘);
});

superMan.fly();