首页 > 代码库 > javascript面向对象--观察者模式(为对象添加事件监听功能)
javascript面向对象--观察者模式(为对象添加事件监听功能)
正文开始之前,有这么一个需求:
>背景:宁静的夜晚,一天晚上,狗蛋(主人)睡得正香,侠盗高飞(小偷)突然造访。
>事件:高飞正准备下手的时候,不料被旺财(狗)发现了,于是旺财叫了起来,狗蛋醒了,高飞逃走了。
分析需求后,可以发现有三个对象:
- 高飞(小偷)
- 旺财(狗)
- 狗蛋(主人)
创建对象的构造函数以及原型方法
//人的构造函数 function Person(name){ this.name=name; //首次创建实例时,为Person的原型添加共有的方法 if(!Person.prototype.sleep){ //人共有的方法 Person.prototype.sleep=function(){ console.log(this.name+‘睡着了‘); } Person.prototype.wake=function(){ console.log(this.name+‘惊醒了‘); } } } //小偷的构造函数 function Thief(name){ this.name=name; //首次创建实例时,为Thief的原型添加共有的方法 if(!Thief.prototype.steal){ Thief.prototype.steal=function(){ console.log(this.name+‘在偷东西‘); } Thief.prototype.escape=function(){ console.log(this.name+‘逃跑了‘); } } } //狗的构造函数 function Dog(name){ this.name=name; //首次创建实例时,为Dog的原型添加共有的方法 if(!Dog.prototype.wow){ Dog.prototype.wow=function(){ console.log(this.name+‘汪!汪!汪!‘); } } }
进一步分析需求,可以发现每个对象的动作是通过某种事件驱动的,比如:高飞偷东西-->旺财叫了
自然地想到了:在Thief.prototype.steal()方法中传入回调函数
//创建一个变量将来存储回调函数的引用 var callback=null; //小偷的构造函数 function Thief(name){ this.name=name; //首次创建实例时,为Thief的原型添加共有的方法 if(!Thief.prototype.steal){ Thief.prototype.steal=function(){ console.log(this.name+‘在偷东西‘); //添加了回调函数 if(callback){ callback(); } } Thief.prototype.escape=function(){ console.log(this.name+‘逃跑了‘); } } } var gaofei=new Thief(‘高飞‘); callback=function(){ console.log(‘旺财叫了‘); } gaofei.steal(); //控制台结果: 高飞在偷东西 旺财叫了
上面的代码实现了:高飞偷东西 --触发--> 旺财叫了
上述方案存在的问题:
- 设置回调函数时似乎太暴力了,我们可以将这一过程封装成高飞的方法;
- callback暴露在全局作用域中对全局变量造成污染;
- callback被所有实例共享,而合理的做法是让每个实例应该拥有自己独有的callback变量;
于是自然地想到闭包解决这个问题:
function Thief(name){ var callback=null; return (function(){ this.name=name; //首次创建实例时,为Thief的原型添加共有的方法 if(!Thief.prototype.steal){ Thief.prototype.steal=function(){ console.log(this.name+‘在偷东西‘); //添加了回调函数 if(callback){ callback(); } } Thief.prototype.escape=function(){ console.log(this.name+‘逃跑了‘); } //添加事件监听的方法 Thief.prototype.eventListener=function(fn){ callback=fn; } } }).call(this); } var gaofei=new Thief(‘高飞‘); gaofei.eventListener(function(){ console.log(‘旺财叫了‘); }) gaofei.steal(); var difei=new Thief(‘低飞‘); difei.eventListener(function(){ console.log(‘大黄叫了‘); }) difei.steal(); //控制台结果: 高飞在偷东西 旺财叫了 // 低飞在偷东西 大黄叫了 可以看到上面两个实例拥有了自己独有的callback变量 但是还有缺陷: callback是一个变量,只能存储一个函数地址,所以最多只能绑定一个回调函数,正常的需求是能够绑定多个函数; 解决方案: 将callback定义为一个数组 function Thief(name){ var callback=[]; return (function(){ this.name=name; //首次创建实例时,为Thief的原型添加共有的方法 if(!Thief.prototype.steal){ Thief.prototype.steal=function(){ console.log(this.name+‘在偷东西‘); //添加了回调函数 callback.forEach(function(fn,index){ fn(); }) } Thief.prototype.escape=function(){ console.log(this.name+‘逃跑了‘); } //添加事件监听的方法 Thief.prototype.eventListener=function(fn){ callback.push(fn); } } }).call(this); } var gaofei=new Thief(‘高飞‘); gaofei.eventListener(function(){ console.log(‘旺财叫了‘); }); gaofei.eventListener(function(){ console.log(‘大黄也叫了‘); }) gaofei.steal(); //控制台结果:高飞在偷东西 // 旺财叫了 // 大黄也叫了
上面的代码实现了事件触发多个回调函数的功能
但是事件监听方法eventListener只能监听gaifei.steal(),正常情况下我们可能还需要监听gaofei.escape()或者其他方法。
改进方案:
- 改造eventListener方法,使之能够通过参数指定需要监控事件;
- 将callback变量定义为一个对象,用不同的属性存储不同事件的回调函数。
function Thief(name){ var callback={}; return (function(){ this.name=name; //首次创建实例时,为Thief的原型添加共有的方法 if(!Thief.prototype.steal){ Thief.prototype.steal=function(){ console.log(this.name+‘在偷东西‘); //如果callback.steal存在,则执行里面的回调函数 if(callback.steal){ callback.steal.forEach(function(fn,index){ fn(); }) } } Thief.prototype.escape=function(){ console.log(this.name+‘逃跑了‘); //如果callback.escape存在,则执行里面的回调函数 if(callback.escape){ callback.escape.forEach(function(fn,index){ fn(); }) } } //添加事件监听的方法 Thief.prototype.eventListener=function(eventType,fn){ //如果对象callback中不存在eventType属性,则初始化一个eventType属性; callback[eventType]=callback[eventType]?callback[eventType]:[]; //推入回调函数 callback[eventType].push(fn); } } }).call(this); } var gaofei=new Thief(‘高飞‘); gaofei.eventListener(‘steal‘,function(){ console.log(‘旺财叫了‘); }); gaofei.eventListener(‘escape‘,function(){ console.log(‘要跑就要跑快点!‘); }) gaofei.steal();// 高飞在偷东西-->旺财叫了 gaofei.escape();// 高飞逃跑了-->要跑就要跑快点!
这样,对象的事件监听功能基本上完善了,回到最初的需求,我们为 狗蛋 旺财 也增加事件监听方法:
//小偷的构造函数 function Thief(name){ var callback={}; return (function(){ this.name=name; //首次创建实例时,为Thief的原型添加共有的方法 if(!Thief.prototype.steal){ Thief.prototype.steal=function(){ console.log(this.name+‘在偷东西‘); //如果callback.steal存在,则执行里面的回调函数 if(callback.steal){ callback.steal.forEach(function(fn,index){ fn(); }) } } Thief.prototype.escape=function(){ console.log(this.name+‘逃跑了‘); //如果callback.escape存在,则执行里面的回调函数 if(callback.escape){ callback.escape.forEach(function(fn,index){ fn(); }) } } //添加事件监听的方法 Thief.prototype.eventListener=function(eventType,fn){ //如果对象callback中不存在eventType属性,则初始化一个eventType属性; callback[eventType]=callback[eventType]?callback[eventType]:[]; //推入回调函数 callback[eventType].push(fn); } } }).call(this); } //狗的构造函数 function Dog(name){ var callback={}; return (function(){ this.name=name; //首次创建实例时,为Dog的原型添加共有的方法 if(!Dog.prototype.wow){ Dog.prototype.wow=function(){ console.log(this.name+‘汪!汪!汪!‘); if(callback.wow){ callback.wow.forEach(function(fn,index){ fn(); }) } } Dog.prototype.eventListener=function(eventType,fn){ //如果对象callback中不存在eventType属性,则初始化一个eventType属性; callback[eventType]=callback[eventType]?callback[eventType]:[]; //推入回调函数 callback[eventType].push(fn); } } }).call(this); } //人的构造函数 function Person(name){ var callback={}; return (function(){ this.name=name; //首次创建实例时,为Person的原型添加共有的方法 if(!Person.prototype.sleep){ //人共有的方法 Person.prototype.sleep=function(){ console.log(this.name+‘睡着了‘); if(callback.sleep){ callback.sleep.forEach(function(fn,index){ fn(); }) } } Person.prototype.wake=function(){ console.log(this.name+‘惊醒了‘); if(callback.wake){ callback.wake.forEach(function(fn,index){ fn(); }) } } Person.prototype.eventListener=function(eventType,fn){ //如果对象callback中不存在eventType属性,则初始化一个eventType属性; callback[eventType]=callback[eventType]?callback[eventType]:[]; //推入回调函数 callback[eventType].push(fn); } } }).call(this); } var gaofei = new Thief(‘高飞‘); var goudan = new Person(‘狗蛋‘); var wangcai = new Dog(‘旺财‘); goudan.eventListener(‘sleep‘, gaofei.steal.bind(gaofei));//将gaofei.steal中的this强制绑定到gaofei上 gaofei.eventListener(‘steal‘, wangcai.wow.bind(wangcai));//同理 wangcai.eventListener(‘wow‘, goudan.wake.bind(goudan));//同理 wangcai.eventListener(‘wow‘, gaofei.escape.bind(gaofei));//同理 goudan.sleep(); //控制台结果: /** 狗蛋睡着了--> * 高飞在偷东西--> * 旺财汪!汪!汪!--> * 狗蛋惊醒了--> * 高飞逃跑了--> **/
至此,需求已经实现了,上述为对象构建事件监听功能采用的模式就是面向对象中的 “观察者模式”。
javascript面向对象--观察者模式(为对象添加事件监听功能)
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。