观察者模式方法
   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=,
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 - ;
for(; i >=; i--){
//如果存在该动作则在消息动作序列中移除相应动作
_messages[type][i] === fn && _messages[type].splice(i,);
}
}
}
}
})();

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

学生类Student:

            var Student = function(result){
var that=this;
that.result=result;
that.say=function(){
console.log(that.result);
}
}
Student.prototype.answer = function(question){
Observer.regist(question,this.say);//注册,接收到问题
}
Student.prototype.sleep = function(question){
Observer.remove(question,this.say);//移除,接收到问题,没有回答
}

老师类Teacher

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

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

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

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

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

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

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

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

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

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

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

控制台显示结果

javascript-观察者模式的更多相关文章

  1. 轻松掌握:JavaScript观察者模式

    观察者模式 观察者模式也叫"订阅者/发布者"模式,定义对象间的一种一对多的依赖关系,发布者可以向所有订阅者发布消息. 观察者模式被广泛地应用于JavaScript客户端编程中.所有 ...

  2. JavaScript观察者模式

    观察者模式观察者模式又叫发布订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生变化时就会通知所有的观察者对象,使得 ...

  3. 理解javascript观察者模式(订阅者与发布者)

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

  4. Javascript观察者模式(Object.defineProperty、Reflect和Proxy实现)

    什么是观察者模式? 答:在数据发生改变时,对应的处理函数自动执行.函数自动观察数据对象,一旦对象有变化,函数就会自动执行. 参考<原生JavaScript实现观察者模式>(https:// ...

  5. 《JavaScript 模式》知识点小抄本(下)

    介绍 最近开始给自己每周订个学习任务,学习结果反馈为一篇文章的输出,做好学习记录. 这一周(02.25-03.03)我定的目标是<JavaScript 模式>的第七章学习一遍,学习结果的反 ...

  6. JavaScript实现的发布/订阅(Pub/Sub)模式

    JavaScript实现的发布/订阅(Pub/Sub)模式 时间 2016-05-02 18:47:58  GiantMing's blog 原文  http://giantming.net/java ...

  7. 收藏的js学习小例子

    1.js模拟java里的Map function Map(){ var obj = {} ; this.put = function(key , value){ obj[key] = value ; ...

  8. observeMode

    <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>& ...

  9. js设计模式之发布订阅模式

    1. 定义 发布-订阅模式其实是一种对象间一对多的依赖关系,当一个对象的状态发送改变时,所有依赖于它的对象都将得到状态改变的通知. 订阅者(Subscriber)把自己想订阅的事件注册(Subscri ...

  10. javascript 设计模式-----观察者模式

    观察者模式在设计模式中被重点提到,因为它应用的场景非常多,而且在模块化设计当中扮演着非常重要的角色.MVC模式中最底层的就是观察者模式,当下流行的javascript框架backbone就是很好地运用 ...

随机推荐

  1. 在非SQL客户端使用命令行方式定期连接SQL Server 服务器并模拟用户查询操作,同时输出信息内容

    一个很长的标题,实现的功能就是尽量使用非人力的方式模拟人去做一件事情,为了便于记录,将他们输出成文件方便查阅. 图形界面方式,使用微软自己的ConnMaker.exe,或者Microsoft 数据连接 ...

  2. Hammer.js分析(三)——input.js

    input.js是所有input文件夹中类的父类,浏览器事件绑定.初始化特定的input类.各种参数计算函数. Input父类和其子类就是在做绑定事件,各种参数计算.整合.设置等返回自定义事件对象,交 ...

  3. PowerPoint基础

    一.基础 默认后缀ppt,pptx office2003和以后的版本只支持ppt, 可以将pptx另存为ppt97-2003 二.修改PPT尺寸 三.新建幻灯片 四.字体与段落设置 五.主题与字体 六 ...

  4. LeetCode刷题系列

    LeetCode 我们工作面试和提高自身数据结构和算法能力的时候往往需要刷刷题,我选择LeetCode是通过一个留学论坛了解的.专业,覆盖语种全面. 提前说说刷题的心得: 尽量手写代码,少使用IDE的 ...

  5. 到处都是坑的微信支付V3

    业务需要一个在微信上能付款的功能,于是乎想到了最普遍的支付宝,坑爹的是T与A是水火不容啊,默默的还是接微信支付吧,没想到从此掉进了连环坑…… 网上写微信支付接口的还是很多,PHP官方有(鄙视源码作者, ...

  6. 【原创】轻量级即时通讯技术MobileIMSDK:Android客户端开发指南

    申明:MobileIMSDK 目前为个人维护的原创开源工程,现陆续整理了一些资料,希望对需要的人有用.如需与作者交流,见文章底签名处,互相学习. MobileIMSDK开源工程的代码托管地址请进入 G ...

  7. 【原创】轻量级移动端即时通讯技术 MobileIMSDK 发布了

    申明:MobileIMSDK目前为个人原创开源工程,投入了大量的时间和精力,希望对需要的人有所帮助.如需与作者交流,见文章底部个人签名处,互相学习.Q群:215891622,欢迎共同志趣者学习和交流. ...

  8. 我理解的this

    this指的就是当前上下文环境对象,主要分两种情况. 1.函数中的this指的是调用该函数的那个上下文环境对象 这个的理解还是非常重要的. 看一个全局函数的例子 var b = 1; function ...

  9. MySQL PXC构建一个新节点只需IST传输的方法

    需求场景:原有的pxc环境数据量已经比较大,新买的服务器要加入此集群中,如何让其用IST的方式传输,而不是SST. PXC传输数据有两种方式: IST: Incremental State Trans ...

  10. [WCF编程]10.操作:单向操作

    一.单向操作概述 WCF提供了单向操作,一旦客户端调用,WCF会生成一个请求,但没有相关的应答信息返回给客户端.所以,单向操作是不能有返回值,服务抛出的任何异常都不会传递给客户端. 理想情况下,一旦客 ...