Javascript设计模式之观察者模式(推荐)
更新时间：2016年03月29日 09:33:01 作者：cangowu
观察者模式有时也称为发布--订阅模式，在观察者模式中，有一个观察者可以管理所有的目标，等到有状态发生改变的时候发出通知
推荐阅读： 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设计模式之观察者模式小编就给大家介绍到这里，希望对大家有所帮助！
相关文章
这篇文章主要介绍了JS 获取浏览器和屏幕宽高等信息的具体实现,需要的朋友可以参考下2014-03-03
这篇文章主要为大家详细介绍了微信小程序代码上传、审核发布小程序，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-05-05
这篇文章主要介绍了JS实现的自定义右键菜单,以两则实例形式分析了javascript自定义右键菜单效果的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-09-09
ES6中Array.copyWithin()函数的用法实例详解
ES6为Array增加了copyWithin函数，用于操作当前数组自身，用来把某些个位置的元素复制并覆盖到其他位置上去。下面重点给大家介绍ES6中Array.copyWithin()函数的用法，需要的朋友参考下2017-09-09![[js高手之路]单例模式实现模态框的示例](//img.jbzj.com/images/xgimg/bcimg4.png)
下面小编就为大家带来一篇[js高手之路]单例模式实现模态框的示例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要为大家详细介绍了微信小程序自定义模态框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
下面小编就为大家带来一篇深入剖析javascript中的exec与match方法。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
这篇文章主要介绍了Js实现简单的小球运动特效的相关资料,需要的朋友可以参考下2016-02-02
本文章来给大家介绍一个javascript中向左滚动文字效果。有需要使用的朋友可参考，这里面我们需要注意下面的css必须强制white-space:nowrap;overflow:hidden;不换行才行哦2013-08-08
不同的浏览器中的事件监听机制是不同的，以onKeyPress事件为例。2009-10-10
![[js高手之路]单例模式实现模态框的示例](http://img.jbzj.com/images/xgimg/bcimg4.png)
最新评论