Javascript设计模式之观察者模式(推荐)


Posted in Javascript onMarch 29, 2016

推荐阅读: JavaScript观察者模式(经典)

1.什么是观察者模式

观察者模式有时也称为发布--订阅模式,在观察者模式中,有一个观察者可以管理所有的目标,等到有状态发生改变的时候发出通知。(其实sql server中的发布订阅也是这个道理)

2.通俗解释

假如以前村里的广播是一个观察者,那么每个村民就是被观察对象,如果村子里有通知,政策发生改变的时候,就需要通过广播把这个消息发布出去,而不用直接一家家的跑去发通知。

3.代码

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>观察者模式</title> 
</head> 
<body> 
<script> 
var observer = {//观察者 
villagers: [],//村名 
addVillager: function (callback) {//增加村名 
this.villagers[this.villagers.length] = callback; 
}, 
removeVillager: function (callback) {//移除村名 
for (var i = 0; i < this.villagers.length; i++) { 
if (this.villagers[i] === callback) { 
delete this.villagers[i]; 
} 
} 
}, 
publish: function (info) {//发布信息 
for (var i = 0; i < this.villagers.length; i++) { 
if (typeof this.villagers[i] === 'function') { 
this.villagers[i](info); 
} 
} 
}, 
make: function (o) {//这里将村子建一个这种广播方式 
for (var i in this) { 
o[i] = this[i]; 
} 
} 
}; 
var village1 = {}; 
observer.make(village1);//将村子1建立这种观察者模式 
var villager11 = { 
read: function (what) { 
console.log('我是第一个村子的第一个村名:' + what); 
} 
}; 
var villager12 = { 
read: function (what) { 
console.log('我是第一个村子的第二个村名:'+what); 
} 
}; 
village1.addVillager(villager11.read); 
village1.addVillager(villager12.read); 
village1.publish('大家来开会呀!!!'); 
village1.removeVillager(villager11.read); 
village1.publish('大家来开会呀!!!'); 
/* var village2 = { 
myAddVillager:function(callback){ 
this.addVillager(callback); 
}, 
myRemoveVillager:function(callback){ 
this.removeVillager(callback); 
}, 
myPublish:function(info){ 
this.publish(info); 
} 
}; 
observer.make(village2);//将村子1建立这种观察者模式 
var villager21 = { 
read: function (what) { 
console.log('我是第二个村子的第一个村名:' + what); 
} 
}; 
var villager22 = { 
read: function (what) { 
console.log('我是第二个村子的第二个村名:'+what); 
} 
}; 
village2.myAddVillager(villager21.read); 
village2.myAddVillager(villager22.read); 
village2.myPublish('大家来领猪肉了!!!');*/ 
</script> 
</body> 
</html>

写到这里观察者模式实现了,但是可能会有多个村子需要这种模式,那我们这里将observer改造成构造函数的方式

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>观察者模式</title> 
</head> 
<body> 
<script> 
function Observer(){//观察者,这里采用构造函数,可以对不同村落进行使用 
if(!(this instanceof Observer)){ 
return new Observer(); 
} 
this.villagers = []; 
}; 
Observer.prototype = { 
// villagers: [],//村名 
addVillager: function (callback) {//增加村名 
this.villagers[this.villagers.length] = callback; 
}, 
removeVillager: function (callback) {//移除村名 
for (var i = 0; i < this.villagers.length; i++) { 
if (this.villagers[i] === callback) { 
delete this.villagers[i]; 
} 
} 
}, 
publish: function (info) {//发布信息 
for (var i = 0; i < this.villagers.length; i++) { 
if (typeof this.villagers[i] === 'function') { 
this.villagers[i](info); 
} 
} 
}, 
make: function (o) {//这里将村子建一个这种广播方式 
for (var i in this) { 
o[i] = this[i]; 
} 
} 
} 
var village1 = {}; 
var observer1 = new Observer(); 
observer1.make(village1);//将村子1建立这种观察者模式 
var villager11 = { 
read: function (what) { 
console.log('我是第一个村子的第一个村名:' + what); 
} 
}; 
var villager12 = { 
read: function (what) { 
console.log('我是第一个村子的第二个村名:'+what); 
} 
}; 
village1.addVillager(villager11.read); 
village1.addVillager(villager12.read); 
village1.publish('大家来开会呀!!!'); 
village1.removeVillager(villager11.read); 
village1.publish('大家来开会呀!!!'); 
var village2 = { 
myAddVillager:function(callback){ 
this.addVillager(callback); 
}, 
myRemoveVillager:function(callback){ 
this.removeVillager(callback); 
}, 
myPublish:function(info){ 
this.publish(info); 
} 
}; 
var observer2 = new Observer(); 
observer2.make(village2);//将村子1建立这种观察者模式 
var villager21 = { 
read: function (what) { 
console.log('我是第二个村子的第一个村名:' + what); 
} 
}; 
var villager22 = { 
read: function (what) { 
console.log('我是第二个村子的第二个村名:'+what); 
} 
}; 
village2.myAddVillager(villager21.read); 
village2.myAddVillager(villager22.read); 
village2.myPublish('大家来领猪肉了!!!'); 
</script> 
</body> 
</html>

有关Javascript设计模式之观察者模式小编就给大家介绍到这里,希望对大家有所帮助!

Javascript 相关文章推荐
Prototype使用指南之array.js
Jan 10 Javascript
JavaScript 利用Cookie记录用户登录信息
Dec 08 Javascript
IE6下javasc#ipt:void(0) 无效的解决方法
Dec 23 Javascript
javascript实现左右控制无缝滚动
Dec 31 Javascript
JS实现三级折叠菜单特效,其它级可自动收缩
Aug 06 Javascript
利用JS屏蔽页面中的Enter按键提交表单的方法
Nov 25 Javascript
微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
Nov 27 Javascript
bootstrap中selectpicker下拉框使用方法实例
Mar 22 Javascript
JavaScript 九种跨域方式实现原理
Feb 11 Javascript
小程序云函数调用API接口的方法
May 17 Javascript
微信小程序wx.navigateTo中events属性实现页面间通信传值,数据同步
Jul 13 Javascript
jquery实现穿梭框功能
Jan 19 jQuery
AngularJS directive返回对象属性详解
Mar 28 #Javascript
Boostrap模态窗口的学习小结
Mar 28 #Javascript
理解javascript模块化
Mar 28 #Javascript
谈一谈jQuery核心架构设计
Mar 28 #Javascript
javascript函数自动执行常用方法汇总
Mar 28 #Javascript
JavaScript利用HTML DOM进行文档操作的方法
Mar 28 #Javascript
JavaScript常用本地对象小结
Mar 28 #Javascript
You might like
PHP中计算字符串相似度的函数代码
2012/12/29 PHP
php之Memcache学习笔记
2013/06/17 PHP
CI框架整合widget(页面格局)的方法
2016/05/17 PHP
HTML IMG标签 onload 内存溢出导致浏览器CPU占用过高
2021/03/09 Javascript
分析 JavaScript 中令人困惑的变量赋值
2007/08/13 Javascript
javascript innerHTML、outerHTML、innerText、outerText的区别
2008/11/24 Javascript
js静态方法与实例方法分析
2011/07/04 Javascript
js中document.getElementByid、document.all和document.layers区分介绍
2011/12/08 Javascript
jquery通过ajax加载一段文本内容的方法
2015/01/15 Javascript
AngularJS整合Springmvc、Spring、Mybatis搭建开发环境
2016/02/25 Javascript
以WordPress为例讲解jQuery美化页面Title的方法
2016/05/23 Javascript
前端JS面试中常见的算法问题总结
2016/12/23 Javascript
一个可复用的vue分页组件
2017/05/15 Javascript
Bootstrap Multiselect 常用组件实现代码
2017/07/09 Javascript
在 Angular 中使用Chart.js 和 ng2-charts的示例代码
2017/08/17 Javascript
Angular2+国际化方案(ngx-translate)的示例代码
2017/08/23 Javascript
vue项目中的webpack-dev-sever配置方法
2017/12/14 Javascript
vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量)
2018/04/20 Javascript
vue实现新闻展示页的步骤详解
2019/04/11 Javascript
laypage+SpringMVC实现后端分页
2019/07/27 Javascript
python中定义结构体的方法
2013/03/04 Python
Python实现冒泡,插入,选择排序简单实例
2014/08/18 Python
Python面向对象基础入门之设置对象属性
2018/12/11 Python
Pytorch 数据加载与数据预处理方式
2019/12/31 Python
python应用Axes3D绘图(批量梯度下降算法)
2020/03/25 Python
python中常见错误及解决方法
2020/06/21 Python
keras:model.compile损失函数的用法
2020/07/01 Python
英国香水店:The Perfume Shop
2017/03/27 全球购物
日本乐天官方海外转运服务:Rakuten Global Express
2018/11/30 全球购物
办公室保洁员岗位职责
2013/12/02 职场文书
幼儿园教师节活动方案
2014/02/02 职场文书
民间借贷协议书范本
2014/10/01 职场文书
赵氏孤儿观后感
2015/06/09 职场文书
中学教代会开幕词
2016/03/04 职场文书
go语言基础 seek光标位置os包的使用
2021/05/09 Golang
详解Python中的进程和线程
2021/06/23 Python