您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
本篇文章给大家分享的是有关使用JavaScript怎么实现一个观察者模式,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
一、定义观察者类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怎么实现一个观察者模式,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。