javascript-观察者模式

惊涛随笔      2022-02-07     139

关键词:

观察者模式方法
   1.称之为消息机制或发布-订阅者模式
   2.定义了一种依赖关系解决了主体对象与观察者之间功能的耦合

观察者方法

        //将观察者放在闭包中,当页面加载就立即执行
        var Observer = (function(){
            var _messages = {};
            return {
                //注册信息接口
                regist : function(type,fn){
                    //如果此消息不存在则应该创建一个该消息类型
                    if(typeof _messages[type] === 'undefined'){
                        _messages[type]=[fn];
                    //如果此消息存在
                    }else{
                        //将动作方法推入该消息对应的动作执行序列中
                         _messages[type].push(fn);
                    }
                },
                //发布信息接口
                fire : function(type,args){
                    if(!_messages[type])
                        return;
                    //定义消息信息
                    var events = {
                        type : type,
                        args : args || {}
                    },
                    i=0,
                    len = _messages[type].length;//消息动作长度
                    //遍历消息动作
                    for(;i<len;i++){
                        //依次执行注册的消息对应的动作序列
                        _messages[type][i].call(this,events);
                    }
                },
                //移除信息接口
                remove : function(type,fn){
                    if(_messages[type] instanceof Array){
                        //从最后一个消息动作遍历
                        var i = _messages[type].length - 1;
                        for(; i >=0; i--){
                            //如果存在该动作则在消息动作序列中移除相应动作
                            _messages[type][i] === fn && _messages[type].splice(i,1);
                        }
                    }
                }
            }
        })();

对象间解耦:用在课堂上老师提问学生的例子说明一下

学生类Student:

 1            var Student = function(result){
 2                 var that=this;
 3                 that.result=result;
 4                 that.say=function(){
 5                     console.log(that.result);
 6                 }
 7             }
 8             Student.prototype.answer = function(question){
 9                 Observer.regist(question,this.say);//注册,接收到问题
10             }
11             Student.prototype.sleep = function(question){
12                 Observer.remove(question,this.say);//移除,接收到问题,没有回答
13             }

老师类Teacher

1            var Teacher = function(){};
2             Teacher.prototype.ask =function(question){
3                 console.log('问题是:'+question);
4                 Observer.fire(question);//问学生问题
5             }

实例化三个学生(订阅者)

1             //实例化三个学生(订阅者)
2             var stu1=new Student("学生1回答什么是设计模式答案");
3             var stu2=new Student("学生2回答什么是设计模式答案")
4             var stu3=new Student("学生3回答简述观察者模式答案")

监听到老师的问题(订阅者监听发送者发送的信息)

1             stu1.answer("什么是设计模式");
2             stu2.answer("什么是设计模式");
3             stu3.answer("简述观察者模式");

没有回答老师的问题(移除监听到发送者发送的信息)

1             //没有回答老师的问题(移除监听到发送者发送的信息)
2             stu2.sleep("什么是设计模式");

实例化一个老师(发布者)

1             //实例化一个老师(发布者)
2             var teacher=new Teacher();

提问两个问题(把信息发送给学生)

1             //提问两个问题(把信息发送给学生)
2             teacher.ask("什么是设计模式");
3             teacher.ask("简述观察者模式");

控制台显示结果

 

javascript订阅-发布模式(观察者模式)(代码片段)

查看详情

javascript设计模式——观察者模式

观察者模式,又称发布-订阅模式或消息机制,定义了一种依赖关系,解决了主题对象与观察者之间功能的耦合。通过运用观察者模式,可以解决团队开发中的模块间通讯问题,这是模块间解耦的一种可行方案。首先,我们来把... 查看详情

javascript设计模式-订阅发布模式(观察者模式)

varEvent=(function(){varglobal=this,Event,_default=‘default‘;Event=function(){var_create,_listen,_trigger,_remove,_shift=Array.prototype.shift,_unshift=Array.prototype.unshift,namespaceCache={},each=f 查看详情

javascript-观察者模式

观察者模式方法  1.称之为消息机制或发布-订阅者模式  2.定义了一种依赖关系解决了主体对象与观察者之间功能的耦合观察者方法//将观察者放在闭包中,当页面加载就立即执行varObserver=(function(){var_messages={};return{... 查看详情

javascript---设计模式之观察者模式

概念观察者模式又叫发布订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生变化时就会通知所有的观察者对象,使得它们能够自动更新自己。作用支... 查看详情

javascript观察者模式(再次)(代码片段)

查看详情

javascript观察者模式

...状态发生该变时,所有依赖于它的对象都将得到通知。在JavaScript中,一般用事件模型来替代传统的观察者模式。   下面是售楼处(发布者)与各看房者(订阅者)的例子:   varevent={    查看详情

深入理解javascript系列(32):设计模式之观察者模式

介绍观察者模式又叫公布订阅模式(Publish/Subscribe),它定义了一种一对多的关系。让多个观察者对象同一时候监听某一个主题对象。这个主题对象的状态发生变化时就会通知全部的观察者对象,使得它们可以自己主动更新自己... 查看详情

javascript观察者行为设计模式(代码片段)

查看详情

javascript设计模式观察者模式

观察者模式又叫发布订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生变化时就会通知所有的观察者对象,使得它们能够自动更新自己。举个例子,... 查看详情

javascript设计模式与开发实践–观察者模式

概述观察者模式又叫发布–订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个目标对象(为了方便理解,以下将观察者对象叫做订阅者,将目标对象叫做发布者)。发布者的状态发生... 查看详情

javascript模块,单例和观察者模式(代码片段)

查看详情

javascript原生实现观察者模式

观察者模式又叫做发布订阅模式,它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生改变时就会通知所有观察着对象。它是由两类对象组成,主题和观察者,主题负责发布事件,... 查看详情

观察者模式——javascript

观察者模式又被称为发布-订阅模型或消息机制。基本思想是观察者一个静态(或全局)对象,为大家提供三个方法:发布、订阅、取消订阅。想得到消息的订阅者需要通过订阅某些消息,当发布者发布某些消息的时候对应的订... 查看详情

javascript设计模式--行为型--设计模式之observer观察者模式(19)(代码片段)

         JAVASCRIPT设计模式是本人根据GOF的设计模式写的博客记录。使用JAVASCRIPT语言来实现主体功能,所以不可能像C++,JAVA等面向对象语言一样严谨,大部分程序都附上了JAVASCRIPT代码,代码只是实现了... 查看详情

javascript与php观察者模式

JAVASCRIPT:a.代码:vara=function(){this.int=0this.add=function(int){this.int=int}this.watch=function(){if(this.int==0){console.log(‘0‘)}else{console.log(‘not0‘)}}}vara=newa()a.watch()a.add(1)a.watch()b.输 查看详情

javascript设计模式--行为型--设计模式之observer观察者模式(19)(代码片段)

         JAVASCRIPT设计模式是本人根据GOF的设计模式写的博客记录。使用JAVASCRIPT语言来实现主体功能,所以不可能像C++,JAVA等面向对象语言一样严谨,大部分程序都附上了JAVASCRIPT代码,代码只是实现了... 查看详情

javascript设计模式与开发实践–观察者模式http://web.jobbole.com/87809/

概述观察者模式又叫发布–订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个目标对象(为了方便理解,以下将观察者对象叫做订阅者,将目标对象叫做发布者)。发布者的状态发生变... 查看详情