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 相关文章推荐
限制复选框的最大可选数
Jul 01 Javascript
JsEasy简介 JsEasy是什么?与下载
Mar 07 Javascript
juqery 学习之五 文档处理 包裹、替换、删除、复制
Feb 11 Javascript
js获取IP和PcName(IE)在vs中可用
Aug 02 Javascript
js中继承的几种用法总结(apply,call,prototype)
Dec 26 Javascript
使用js显示当前时间示例
Mar 02 Javascript
js选项卡的实现方法
Feb 09 Javascript
vue.js中mint-ui框架的使用方法
May 12 Javascript
vue v-on监听事件详解
May 17 Javascript
Vue调试神器vue-devtools安装方法
Dec 12 Javascript
使用JS获取SessionStorage的值
Jan 12 Javascript
p5.js临摹动态图形实现方法详解
Oct 23 Javascript
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中=赋值操作符对不同数据类型的不同行为
2011/01/02 PHP
基于php-fpm 参数的深入理解
2013/06/03 PHP
php json_encode值中大括号与花括号区别
2013/09/30 PHP
PHP批量删除、清除UTF-8文件BOM头的代码实例
2014/04/14 PHP
PHP遍历XML文档所有节点的方法
2015/03/12 PHP
laravel自定义分页效果
2017/07/23 PHP
php+javascript实现的动态显示服务器运行程序进度条功能示例
2017/08/07 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
PHP架构及原理知识点详解
2019/12/22 PHP
TNC vs RR BO3 第一场 2.14
2021/03/10 DOTA
jQuery 类twitter的文本字数限制带提示效果插件
2010/04/16 Javascript
JavaScript Sort 的一个错误用法示例
2015/03/20 Javascript
浅谈jquery选择器 :first与:first-child的区别
2016/11/20 Javascript
Vue.js计算属性computed与watch(5)
2016/12/09 Javascript
nodejs+express实现文件上传下载管理网站
2017/03/15 NodeJs
JS实现评价的星星功能
2017/08/20 Javascript
浅谈Angular2 模块懒加载的方法
2017/10/04 Javascript
node.js部署之启动后台运行forever的方法
2018/05/23 Javascript
详解Python中的__new__()方法的使用
2015/04/09 Python
Python调用命令行进度条的方法
2015/05/05 Python
python实现将文本转换成语音的方法
2015/05/28 Python
python 获取网页编码方式实现代码
2017/03/11 Python
教你一步步利用python实现贪吃蛇游戏
2019/06/27 Python
pytorch加载自定义网络权重的实现
2020/01/07 Python
python实现连连看游戏
2020/02/14 Python
Python unittest discover批量执行代码实例
2020/09/08 Python
Bose法国官网:购买耳机、扬声器、家庭影院、专业音响
2017/12/21 全球购物
安全标准化实施方案
2014/02/20 职场文书
金融保险专业求职信
2014/09/03 职场文书
2014年庆祝国庆65周年演讲稿
2014/09/21 职场文书
2014年调度员工作总结
2014/11/19 职场文书
婚庆开业庆典主持词
2015/06/30 职场文书
初一数学教学反思
2016/02/17 职场文书
2019奶茶店创业计划书范本!
2019/07/15 职场文书
十一月早安语录:把心放轻,人生就是一朵自在的云
2019/11/04 职场文书
Python用any()函数检查字符串中的字母以及如何使用all()函数
2022/04/14 Python