观察者模式有时也称为发布 -- 订阅模式,在观察者模式中,有一个观察者可以管理所有的目标,等到有状态发生改变的时候发出通知
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
推荐阅读: {aa0aa}
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 设计模式之观察者模式小编就给大家介绍到这里,希望对大家有所帮助!
来源: http://www.phperz.com/article/17/0221/266529.html