观察者模式 又被称为“发布-订阅”模式,目的是解决主题对象和观察者之间功能的耦合性。发布者和订阅者之间是互不干扰的,没有联系的,通过观察者,当做中介,将二者联系起来。

例子:以学生和老师之间的为例

1.首先创建观察者对象

//将观察者放在闭包中,当页面加载就立即执行
var Observer = (function () {
//防止消息队列暴露而被篡改顾将消息容器作为静态私有变量保存
var _message = {};
return {
//注册信息接口
regist: function () {},
//发布信息接口
fire: function () {},
// 移除信息接口
remove:function () {}
}
}) ()

2.创建学生类以及有关方法

//学生类
var Student = function(result) {
var that = this;
that.result = result;
// 学生回答问题动作
that.say = function() {
console.log(that.result);
}
}
//学生回答问题的方法
Student.prototype.answer = function(question) {
// console.log(this.result +''+ question + '回答问题')
//注册参数问题
Observer.regist(question, this.say)
}
// 学生睡觉 ,此时不能回答问题的方法
Student.prototype.sleep = function(question) {
console.log(this.result +''+ question + '已被注销')
//取消对老师问题的监听
Observer.remove(question, this.say)
}

3.创建教师类和有关方法

//教师类
var Teacher = function () {};
//教师提问问题的方法
Teacher.prototype.ask = function (question) {
console.log('问题是:' + question);
//发布提问消息
Observer.fire(question)
}

4.创建实体类

/模拟3位听课的学生
var student1 = new Student('学生1回答问题'),
student2 = new Student('学生2回答问题'),
student3 = new Student('学生3回答问题');

//3位学生监听(订阅)了老师提出的两个问题
student1.answer('什么是设计模式1');
student1.answer('简述观察者模式1');
student2.answer('什么是设计模式2');
student2.answer('简述设计者模式2');
student3.answer('什么是设计模式3');
student3.answer('简述观察者模式3');

//第三位同学 因为睡着了,取消了订阅的第二个问题
student3.sleep('简述观察者模式3');

//创建一个教师类
var teacher = new Teacher();
//老师 提问两个问题
teacher.ask('什么是设计模式');
teacher.ask('简述观察者模式');

js 设计模式之观察者模式的更多相关文章

  1. [JS设计模式]:观察者模式(即发布-订阅者模式)(4)

    简介 观察者模式又叫发布---订阅模式,它定义了对象间的一种一对多的关系,让多个观察者对象同时监听某一个主题对象,当一个对象发生改变时,所有依赖于它的对象都将得到通知. 举一个现实生活中的例子,例如小 ...

  2. js设计模式——3.观察者模式

    js设计模式——观察者模式 /*js设计模式——.观察者模式*/ // 主题,保存状态,状态变化之后触发所有观察者对象 class Subject { constructor() { this.sta ...

  3. JS设计模式之观察者模式

    观察者模式,即发布与订阅模式,实现一对多的一种关系模式,当一种对象接受信号时其他所有依赖均有行为.我们在写code的时候总是会去自定义一些事件,这就是观察者常常使用的地方: JS中的观察者模式应用: ...

  4. js设计模式-观察者模式

    定义: 观察者模式又叫发布订阅模式,它定义了对象间的一种一对多的依赖关系.观察者模式让两个对象松耦合地联系在一起,虽然不太清楚彼此的细节,但这不影响他们之间的互相通信. 思路 定义一个对象,在对象中实 ...

  5. js 设计模式——观察者模式

    观察者模式 定义 观察者模式(又被称为发布-订阅(Publish/Subscribe)模式,属于行为型模式的一种,它定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象.这个主题对象在状 ...

  6. 前端笔记之JavaScript面向对象(三)初识ES6&underscore.js&EChart.js&设计模式&贪吃蛇开发

    一.ES6语法 ES6中对数组新增了几个函数:map().filter().reduce() ES5新增的forEach(). 都是一些语法糖. 1.1 forEach()遍历数组 forEach() ...

  7. JS设计模式(一)

    刚入职时,看过一段时间的设计模式,似懂非懂.不知不觉过去七个月了,对JS的理解更深刻了,数据结构与算法的基础也基本上算是过了一遍了,接下来要把设计模式搞定,然后不再深层次研究JS了,而是学习前端自动化 ...

  8. js设计模式(12)---职责链模式

    0.前言 老实讲,看设计模式真得很痛苦,一则阅读过的代码太少:二则从来或者从没意识到使用过这些东西.所以我采用了看书(<js设计模式>)和阅读博客(大叔.alloyteam.聂微东)相结合 ...

  9. JS设计模式——5.单体模式

    JS设计模式——5.单体模式 http://www.cnblogs.com/JChen666/p/3610585.html   单体模式的优势 用了这么久的单体模式,竟全然不知!用它具体有哪些好处呢? ...

随机推荐

  1. python 写代码笔记 2017.6.15

    其实并不是越复杂的代码越好,简单高效才是好. 关键是思路和逻辑,还有多看别人写的代码. 学习到了:)

  2. decltype类型指示符

    C++11新标准引入第二种类型说明符decltype,它的作用是选择并返回操作数的数据类型. 编译器分析表达式并得到它的类型,却不实际计算表达式的值: decltype(f()) sum = x;// ...

  3. Django 内置分页器

    先导入Django内置的分页器 在商品列表页或者购物车列表页导入 在渲染list.html导入 然后在views后台渲染方法写入 打开list页面结果

  4. TortoiseGit与GIt生成ssh秘钥添加到github账号的简单方法!简单使用

    今天升级了自己电脑上的git与TortoiseGit,全部换成了最新版,后来不知道怎么的git的秘钥还能使用,可以直接拉取或者提交ssh地址克隆的代码,可是小乌龟客户端就悲剧了 公司的项目有key.p ...

  5. 10张思维导图带你学习Java​Script

    10张思维导图带你学习Java​Script   下面将po出10张JavaScript相关的思维导图. 分别归类为: JavaScript变量 JavaScript运算符 JavaScript数组 ...

  6. java学习教程与笔记

    一个java学习教程:http://www.jikexueyuan.com/path/java/#stage1 集合类学习: java中结合类很多,但用得比较多的一般有三种,当然,其它语言也是,主要是 ...

  7. php 安装redis php扩展

    下载文件 下载上面文件解压并拷贝至php的ext目录下 如果 PHP版本不对 接下来根据你所拟定的版本去如下这两个网址下载文件 1.http://windows.php.net/downloads/p ...

  8. Java框架之spring框架的优点,为什么要学习spring框架

    为什么要学习Spring的框架a: 方便解耦,简化开发    Spring就是一个大工厂,可以将所有对象创建和依赖关系维护,交给Spring管理 b:AOP编程的支持      Spring提供面向切 ...

  9. Razor---服务器端标记语言

    Razor 是一种允许您向网页中嵌入基于服务器的代码(Visual Basic 和 C#)的标记语法<ul> @for (int i = 0; i < 10; i++) { < ...

  10. 学习笔记: Expression表达式目录树详解和扩展封装

    1. 表达式链接扩展封装,ORM常用 And  Or /// <summary> /// 表达式访问者 /// </summary> public class Expressi ...