码迷,mamicode.com
首页 > 其他好文 > 详细

设计模式之观察者模式

时间:2018-02-04 19:36:53      阅读:157      评论:0      收藏:0      [点我收藏+]

标签:多个   cti   data   并且   简单   ready   对象   gpo   观察者   

观察者模式

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

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

// 构建发布者类
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();

设计模式之观察者模式

标签:多个   cti   data   并且   简单   ready   对象   gpo   观察者   

原文地址:https://www.cnblogs.com/idiv/p/8413696.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!