首页 > 代码库 > JS实现观察者模式(订阅/发布模式)
JS实现观察者模式(订阅/发布模式)
实现
/* * js 观察者模式 又称 订阅/发布模式 * 通过创建“可观察”对象,当发生一个感兴趣的事件时可将该事件通告给 * 所有观察者,从而形成松耦合 */ // 通用的发布者 EventPublisher = Base.extend({ publish: function(data, type) { EventPublisher.publish(data, type); } }, { subscribers : { any : [] // 事件类型: 订阅者 }, // 将订阅者提供的调用方法添加到subscribers 订阅的事件数组中 subscribe : function(subscriber) { var type = subscriber.type || ‘any‘; if (typeof this.subscribers[type] === ‘undefined‘) { this.subscribers[type] = []; } this.subscribers[type].push(subscriber.handleEvent); }, // 删除订阅者 unsubscribe : function(fn, type) { this.visitSubscribers(‘unsubscribe‘, fn, type); }, // 循环遍历subscribers中每个元素,并调用他们所提供的方法 publish : function(publication, type) { this.visitSubscribers(‘publish‘, publication, type); }, // helper visitSubscribers: function (action, arg, type) { var pubtype = type || ‘any‘, subscribers = this.subscribers[pubtype], i, max = subscribers.length; for (i = 0; i < max; i += 1) { if (action === ‘publish‘) { // 调用订阅者订阅该事件所提供的方法 subscribers[i](arg); } else { // 找到当前订阅事件中提供的方法,并删除 if (subscribers[i] === arg) { subscribers.splice(i, 1); } } } } });
测试
// 实现paper 对象,他所做的就是发布日刊和月刊 Paper = EventPublisher.extend({ daily : function() { this.publish(‘今个有重要新闻‘, ‘paper-daily‘); }, monthly : function() { this.publish(‘每月调查‘, ‘paper-monthly‘); }, readWeibo: function(info) { console.log(‘重大新闻[‘ + info + ‘]‘); } }); // 订阅者对象joe,该对象有2个方法 Person = EventPublisher.extend({ name: null, constructor: function(config) { this.name = config.name; }, drinkCoffee : function(paper) { console.log(this.name + ‘开始阅读[‘ + paper + ‘]‘); }, sundayPreNap : function(monthly) { console.log(this.name + ‘开始阅读[‘ + monthly + ‘]‘); }, weibo: function(msg) { this.publish(msg, ‘person-weibo‘); } }); var paper = new Paper(); var darkness = new Person({ name: ‘darkness‘ }); EventPublisher.subscribe({ type: ‘paper-monthly‘, handleEvent: function(data) { darkness.sundayPreNap(data); } }); EventPublisher.subscribe({ type: ‘paper-daily‘, handleEvent: function(data) { darkness.drinkCoffee(data); } }); EventPublisher.subscribe({ type: ‘person-weibo‘, handleEvent: function(data) { paper.readWeibo(data); } }); // paper开始发布日刊 和 月刊 paper.daily(); paper.monthly(); // darkness发布微博信息 darkness.weibo(‘今日头条,2015年啦!‘);
参考
一个javascript继承的基础类Base.js
JS实现观察者模式(订阅/发布模式)
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。