观察者模式JS

余学文发布于2019-08-23 13:12 / 2706人阅读

摘要：观察者模式主要由一个目标对象和一系列观察者组成，如果目标对象发生改变，目标就会通知对应的观察者，每个观察者接收到通知后做出自己的变化。一个目标对象可以管理自己的观察者并且具有通知的方法，下面我们用代码来实现。

观察者模式主要由一个目标对象（Subject）和一系列观察者（Observer）组成，如果目标对象发生改变，目标就会通知对应的观察者，每个观察者接收到通知后做出自己的变化。一个目标对象（Subject）可以管理自己的观察者（Observer）,并且具有通知的方法，下面我们用代码来实现。

// 观察者列表,可以对观察者进行增加，修改等操作
// Subject会用到ObserverList来管理观察者
function ObserverList() {
    this.observerList = [];
}

ObserverList.prototype.Add = function(obj){
    // body... 
    return this.observerList.push(obj);
};

ObserverList.prototype.Empty = function(){
    // body... 
    this.observerList = [];
};

ObserverList.prototype.Count = function(){
    // body... 
    return this.observerList.length;
};

ObserverList.prototype.Get = function(index){
    // body... 
    if(index > -1 && index < this.observerList.length) {
        return this.observerList[index]
    }
};

ObserverList.prototype.Insert = function(obj , index){
    // body... 
    var pointer = -1;

    if(index === 0) {
        this.observerList.unshift(obj);
    }
    if(index === this.observerList.length) {
        this.observerList.push(obj);
    }
    pointer = index;
    this.observerList.splice(index,0,obj);
    return pointer;
};

ObserverList.prototype.IndexOf = function(obj, startIndex){
    // body... 
    var i = startIndex, pointer = -1;

    while(i
目标对象利用ObserverList来管理观察者，并具有通知的方法
//目标
function Subject() {
    this.observers = new ObserverList();
}

Subject.prototype.AddObserver = function(observer){
    this.observers.Add(observer)
};

Subject.prototype.RemoveObserver = function(observer){
    this.observers.RemoveIndexAt(this.observers.indexOf(observer, 0))
};

Subject.prototype.Notify = function(context){
    var observerCount = this.observers.Count()
    for (var i = observerCount - 1; i >= 0; i--) {
        // 收到通知后调用观察者的Update方法
        this.observers.Get(i).Update(context)
    }
};
观察者具有一个Update方法，每个观察者根据自己的业务来重写Update方法，
function Observer() {
    this.Update = function() {
        console.log("默认实现")
    }
}
最后实现一个extend方法，来扩展对象
// 扩展obj对象
function extend(extension, obj) {
    for(var key in extension) {
        obj[key] = extension[key];
    }
}
这样，观察者模式就实现了，下面我们用实际的例子来说明一下观察者模式的用法。



    
    Document


    
    
    
    
    
    
    



运行后的效果大家可以自己去尝试一下，新增的checkBox的勾选状态会和第一个checkBox，也就是Subject保持一致。

云服务器 GPU云服务器 js观察者模式视频设计模式观察者模式观察者模式 php观察者模式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99288.html

JS设计模式之Obeserver（观察者）模式、Publish/Subscribe（发布/订阅）模式

摘要：观察者模式定义设计模式中对的定义一个对象称为维持一系列依赖于它观察者的对象，将有关状态的任何变更自动通知给它们。如图模式比较观察者模式则多了一个类似于话题调度中心的流程，发布者和订阅者解耦。 Obeserver（观察者）模式定义《js设计模式》中对Observer的定义：一个对象（称为subject）维持一系列依赖于它（观察者）的对象，将有关状态的任何变更自动通知给它们。《设计模...

荆兆峰 2019-08-26 13:37 评论0 收藏0
JS 观察者模式

摘要：使用观察者模式的好处支持简单的广播通信，自动通知所有已经订阅过的对象。总的来说，观察者模式所做的工作就是在解耦，让耦合的双方都依赖于抽象，而不是依赖于具体。 1. 介绍观察者模式又叫发布订阅模式（Publish/Subscribe），它定义了一种一对多的关系，让多个观察者对象同时监听某一个主题对象，这个主题对象的状态发生变化时就会通知所有的观察者对象，使得它们能够自动更新自己。使用...

mist14 2019-08-21 18:19 评论0 收藏0
JS 设计模式十三（观察者模式）

摘要：观察者模式对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都得到通知并被自动更新。具体主题角色在具体主题内部状态改变时，给所有登记过的观察者发出通知。观察者模式对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都得到通知并被自动更新。观察者要素 1.抽象主题(Subject)角色：把所有对观察者对象的引用保存在一个集合中，每个...

shleyZ 2019-08-19 18:24 评论0 收藏0
简单理解观察者模式(pub/sub)在前端中的应用

摘要：概念观察者模式被广泛地应用于客户端编程中。所有的浏览器事件，等都是使用观察者模式的例子。在观察者模式中，一个对象订阅另一个对象的指定活动并得到通知，而不是调用另一个对象的方法。此外，观察者模式还可用于实现数据绑定。概念观察者模式被广泛地应用于JavaScript客户端编程中。所有的浏览器事件（mouseover，keypress等）都是使用观察者模式的例子。这种模式的另一个名字叫自...

guyan0319 2019-08-23 12:10 评论0 收藏0
JS每日一题:设计模式-如何理解观察者(发布订阅)模式?

摘要：期设计模式如何理解观察者发布订阅模式定义观察者模式又叫发布订阅模式，它定义了一种一对多的关系，让多个观察者对象同时监听某一个主题对象，这个主题对象的状态发生变化时就会通知所有的观察者对象，使得它们能够自动更新自己生活实例理解你今天去看一个 20190411期设计模式-如何理解观察者(发布订阅)模式? 定义: 观察者模式又叫发布订阅模式（Publish/Subscribe），它定义了一...

baishancloud 2019-08-23 16:53 评论0 收藏0
js设计模式 --- 发布订阅模式(观察者模式)

摘要：由主体和观察者组成，主体负责发布事件，同时观察者通过订阅这些事件来观察该主体。主体并不知道观察者的任何事情，观察者知道主体并能注册事件的回调函数。总的来说，观察者模式所做的工作就是在解耦，让耦合的双方都依赖于抽象，而不是依赖于具体。发布订阅模式发布订阅模式又叫观察者模式（Publish/Subscribe），它定义了一种一对多的关系，让多个观察者对象同时监听某一个主题对象，这个主题...

EasonTyler 2019-08-22 14:52 评论0 收藏0