使用JavaScript怎么实现一个观察者模式
本篇文章给大家分享的是有关使用JavaScript怎么实现一个观察者模式,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
创新互联是一家专注于成都网站设计、网站制作与策划设计,莲花网站建设哪家好?创新互联做网站,专注于网站建设10年,网设计领域的专业建站公司;建站业务涵盖:莲花等地区。莲花做网站价格咨询:18980820575
一、定义观察者类Pubsub
/* Pubsub */ function Pubsub(){ //存放事件和对应的处理方法 this.handles = {}; }
二、实现事件订阅on
//传入事件类型type和事件处理handle on: function (type, handle) { if(!this.handles[type]){ this.handles[type] = []; } this.handles[type].push(handle); }
三、实现事件发布emit
emit: function () { //通过传入参数获取事件类型 var type = Array.prototype.shift.call(arguments); if(!this.handles[type]){ return false; } for (var i = 0; i < this.handles[type].length; i++) { var handle = this.handles[type][i]; //执行事件 handle.apply(this, arguments); } }
需要说明的是Array.prototype.shift.call(arguments)这句代码,arguments对象是function的内置对象,可以获取到调用该方法时传入的实参数组。
shift方法取出数组中的第一个参数,就是type类型。
四、实现事件取消订阅off
off: function (type, handle) { handles = this.handles[type]; if(handles){ if(!handle){ handles.length = 0;//清空数组 }else{ for (var i = 0; i < handles.length; i++) { var _handle = handles[i]; if(_handle === handle){ handles.splice(i,1); } } } } }
完整代码:
/* Pubsub */ function Pubsub(){ //存放事件和对应的处理方法 this.handles = {}; } Pubsub.prototype={ //传入事件类型type和事件处理handle on: function (type, handle) { if(!this.handles[type]){ this.handles[type] = []; } this.handles[type].push(handle); }, emit: function () { //通过传入参数获取事件类型 var type = Array.prototype.shift.call(arguments); if(!this.handles[type]){ return false; } for (var i = 0; i < this.handles[type].length; i++) { var handle = this.handles[type][i]; //执行事件 handle.apply(this, arguments); } }, off: function (type, handle) { handles = this.handles[type]; if(handles){ if(!handle){ handles.length = 0;//清空数组 }else{ for (var i = 0; i < handles.length; i++) { var _handle = handles[i]; if(_handle === handle){ handles.splice(i,1); } } } } } }
五、测试
var p1 = new Pubsub(); p1.on('mm', function (name) { console.log('mm: '+ name); }); p1.emit('mm','哈哈哈哈'); console.log('==============='); var p2 = new Pubsub(); var fn = function (name) { console.log('mm2: '+ name); }; var fn2 = function (name) { console.log('mm222: '+ name); }; p2.on('mm2', fn); p2.on('mm2', fn2); p2.emit('mm2','哈2哈2哈2哈2'); console.log('-------------'); p2.off('mm2', fn); p2.emit('mm2','哈2哈2哈2哈2'); console.log('-------------'); p2.off('mm2'); p2.emit('mm2','哈2哈2哈2哈2'); console.log('-------------');
以上就是使用JavaScript怎么实现一个观察者模式,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。
新闻标题:使用JavaScript怎么实现一个观察者模式
分享路径:http://scyanting.com/article/ijsejj.html