Javascript设计模式之观察者模式(推荐)
2016-03-29 09:33
711 查看
推荐阅读: 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中发布/订阅模式的简单实例
- js 发布订阅模式的实例讲解
- node.js 发布订阅模式的实例
- JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例
- JavaScript观察者模式(经典)
- JavaScript观察者模式(publish/subscribe)原理与实现方法
- JavaScript设计模式之观察者模式(发布者-订阅者模式)
- 深入理解Javascript中的观察者模式
- JavaScript原生实现观察者模式的示例
- JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解
- JavaScript事件发布/订阅模式原理与用法分析
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 设计模式之行为型模式 - 调用行为的传递问题
- 最后一次说说闭包
- Ajax
- 2019年开发人员应该学习的8个JavaScript框架
- 架构纵横谈之二 ---- 架构的模式与要点
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制:7 行代码学会 co 模块
- ES6 走马观花(ECMAScript2015 新特性)
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法
- Redux系列02:一个炒鸡简单的react+redux例子