javascript-观察者模式
观察者模式方法
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-观察者模式的更多相关文章
- 轻松掌握:JavaScript观察者模式
观察者模式 观察者模式也叫"订阅者/发布者"模式,定义对象间的一种一对多的依赖关系,发布者可以向所有订阅者发布消息. 观察者模式被广泛地应用于JavaScript客户端编程中.所有 ...
- JavaScript观察者模式
观察者模式观察者模式又叫发布订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生变化时就会通知所有的观察者对象,使得 ...
- 理解javascript观察者模式(订阅者与发布者)
什么是观察者模式? 观察者模式又叫做发布订阅模式,它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生改变时就会通知所有观察着对象.它是由两类对象组成,主题和观察者 ...
- Javascript观察者模式(Object.defineProperty、Reflect和Proxy实现)
什么是观察者模式? 答:在数据发生改变时,对应的处理函数自动执行.函数自动观察数据对象,一旦对象有变化,函数就会自动执行. 参考<原生JavaScript实现观察者模式>(https:// ...
- 《JavaScript 模式》知识点小抄本(下)
介绍 最近开始给自己每周订个学习任务,学习结果反馈为一篇文章的输出,做好学习记录. 这一周(02.25-03.03)我定的目标是<JavaScript 模式>的第七章学习一遍,学习结果的反 ...
- JavaScript实现的发布/订阅(Pub/Sub)模式
JavaScript实现的发布/订阅(Pub/Sub)模式 时间 2016-05-02 18:47:58 GiantMing's blog 原文 http://giantming.net/java ...
- 收藏的js学习小例子
1.js模拟java里的Map function Map(){ var obj = {} ; this.put = function(key , value){ obj[key] = value ; ...
- observeMode
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>& ...
- js设计模式之发布订阅模式
1. 定义 发布-订阅模式其实是一种对象间一对多的依赖关系,当一个对象的状态发送改变时,所有依赖于它的对象都将得到状态改变的通知. 订阅者(Subscriber)把自己想订阅的事件注册(Subscri ...
- javascript 设计模式-----观察者模式
观察者模式在设计模式中被重点提到,因为它应用的场景非常多,而且在模块化设计当中扮演着非常重要的角色.MVC模式中最底层的就是观察者模式,当下流行的javascript框架backbone就是很好地运用 ...
随机推荐
- [ES] 基础概念
Elasticsearch是基于Luence实现的一款搜索引擎,支持分布式和集群,并且搜索近实时,主要用于搜索和数据分析 索引 index 可以理解为数据库中的database,存储的是实际数据,因为 ...
- C# 中实现单例模式
文章目录 简介 不安全线程的单例模式 简单安全线程带锁 双重检查 - 带锁 安全初始化 安全并且懒汉式静态初始化 带泛型的懒汉式单例 异常 提高效率 总结 简介 单例模式是软件工程中广为人知的设计模式 ...
- Azure Application Gateway (2) 面向公网的Application Gateway
<Windows Azure Platform 系列文章目录> 本章将介绍如何创建面向公网的Application Gateway,我们需要准备以下工作: 1.创建新的Azure Reso ...
- jQuery-1.9.1源码分析系列(十二) 筛选操作
在前面分析的时候也分析了部分筛选操作(详见),我们接着分析,把主要的几个分析一下. jQuery.fn.find( selector ) find接受一个参数表达式selector:选择器(字符串). ...
- 由面试引发的思考:B/S与C/S究竟是何物
一.现状说明: 就在这金三银四的求职黄金时期,我有幸作为公司的独立技术面试官,拥有最终决定录用权,在倍受上级领导的充分信任下,我也向上级保证,一定要为公司找到合适的人才,就在我满怀信心的情况下面试了一 ...
- WPF老矣,尚能饭否——且说说WPF今生未来(下):安心
在前面的上.中篇中,我们已经可以看到园子里朋友的点评“后山见! WPF就比winform好! 激情对决”.看到大家热情洋溢的点评,做技术的我也很受感动.老实说,如何在本文收笔--WPF系列文章,我很紧 ...
- js树形控件—zTree使用总结
0 zTree简介 树形控件的使用是应用开发过程中必不可少的.zTree 是一个依靠 jQuery 实现的多功能 “树插件”.优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. 0.0 ...
- Rafy 领域实体框架演示(2) - 新功能展示
本文的演示需要先完成上一篇文章中的演示:<Rafy 领域实体框架示例(1) - 转换传统三层应用程序>.在完成改造传统的三层系统之后,本文将讲解使用 Rafy 实体框架后带来的一些常用功能 ...
- asp.net开发的一些问题
关于Ajax说法错误的是( ).(选择一项) MVC是一种流行的软件设计模式,它把系统分为三个模块.三个模块为( ). 在ASP.NET中,关于WebService的说法正确的是( ) .NET中Ob ...
- Extjs.FormPanel
刚刚学习ExtJS ,备注一哈代码 防止忘记... <html xmlns="http://www.w3.org/1999/xhtml"> <head runat ...