网站建设与维护兼职,网页设计作品 简单,百度站长平台如何添加网站,金融网站策划观察者模式
定义#xff1a;
观察者模式是一种行为型设计模式#xff0c;定义对象间的一种一对多的依赖关系#xff0c;当一个对象的状态发生改变时#xff0c;所有依赖于它的对象都得到通知并被自动更新。
结构图#xff1a; ES6简易代码实现#xff1a;
//ts环境下…观察者模式
定义
观察者模式是一种行为型设计模式定义对象间的一种一对多的依赖关系当一个对象的状态发生改变时所有依赖于它的对象都得到通知并被自动更新。
结构图 ES6简易代码实现
//ts环境下的es6类模拟已去掉ts下的类型检查和定义
/*** 观察者Observer观察者是接收主题通知的对象。观察者需要实现一个更新方法当收到主题的通知时调用该方法进行更新操作。*/
class Observe {constructor(name) {this.name name;}update(payload) {console.log(${this.name}观察的数据发生了变化${payload});}
}
class Subject {constructor() {this.observeList [];}addObserve(observe) {this.observeList.push(observe);}removeObserve(observe) {this.observeList this.observeList.filter((item) item ! observe);}notify(payload) {this.observeList.forEach((item) item.update(payload));}
}
ES简易代码实现
var Observe /** class */ (function () {function Observe(name) {this.name name;}Observe.prototype.update function (payload) {console.log(.concat(this.name, \u89C2\u5BDF\u7684\u6570\u636E\u53D1\u751F\u4E86\u53D8\u5316\uFF1A).concat(payload));};return Observe;
}());
var Subject /** class */ (function () {function Subject() {this.observeList [];}Subject.prototype.addObserve function (observe) {this.observeList.push(observe);};Subject.prototype.removeObserve function (observe) {this.observeList this.observeList.filter(function (item) { return item ! observe; });};Subject.prototype.notify function (payload) {this.observeList.forEach(function (item) { return item.update(payload); });};return Subject;
}());
var subject new Subject();
var observe new Observe(xx);
var observe1 new Observe(yy);
subject.addObserve(observe);
subject.addObserve(observe1);
subject.notify(zzz);
输出 观察者模式通过将主题和观察者解耦实现了对象之间的松耦合。当主题的状态发生改变时所有依赖于它的观察者都会收到通知并进行相应的更新。
发布订阅模式
定义
发布-订阅模式其实是一种对象间一对多的依赖关系当一个对象的状态发送改变时所有依赖于它的对象都将得到状态改变的通知。与观察者模式的定义相似其最大的特点是发布方与订阅方互不相知双方都发送自己的消息内容到第三方由第三方来处理。
订阅者Subscriber把自己想订阅的事件注册Subscribe到调度中心Event Channel当发布者Publisher发布该事件Publish Event到调度中心也就是该事件触发时由调度中心统一调度Fire Event订阅者注册到调度中心的处理代码。
结构图 观察者模式与发布订阅模式差异 在观察者模式中观察者是知道 Subject 的Subject 一直保持对观察者进行记录。然而在发布订阅模式中发布者和订阅者不知道对方的存在。它们只有通过消息代理进行通信。 在发布订阅模式中组件是松散耦合的正好和观察者模式相反。 观察者模式大多数时候是同步的比如当事件触发Subject 就会去调用观察者的方法。而发布-订阅模式大多数时候是异步的使用消息队列。 观察者模式需要在单个应用程序地址空间中实现而发布-订阅更像交叉应用模式。
图示 ES6简易代码实现
//ts环境下的es6类模拟已去掉ts下的类型检查和定义
class EventEmitter {constructor() {//事件列表对象this.eventList {};}//订阅on(eventName, fn) {//如果对象eventName不存在先创建一个空数组if (!this.eventList[eventName]) {this.eventList[eventName] [];}//如果事件存在把fn添加到对应eventList[eventName]列表里面this.eventList[eventName].push(fn);}//取消订阅off(eventName, fn) {let callbacks this.eventList[eventName];if (!callbacks) return false;if (!fn) return callbacks (callbacks.length 0);//遍历this.eventList[eventName]事件for (let i 0; i callbacks.length; i) {console.log(callbacks[i].fn, off------callbacks[i].fn);console.log(callbacks[i], off-callbacks[i]);//判断那个事件fn相同则删除if (callbacks[i] fn || callbacks[i].fn fn) {callbacks.splice(i, 1);break;}}}//监听一次once(eventName, fn) {// this箭头函数表达式是正则函数表达式的语法紧凑替代方案// 它没有自己的this、arguments、super或new.target关键字绑定。let on (...args) {this.off(eventName, on);//args代替argumentsfn.apply(this, args);};//存储fn,确保单独使用off删除传入的fn时可以被删除掉on.fn fn;console.log(on.fn, once---on.fn);console.log(on, once-on);this.on(eventName, on);}//发布emit(eventName, data) {const callbacks this.eventList[eventName];if (!callbacks) return;callbacks.forEach((element) {element(data);});}
}let events new EventEmitter();
function test(data) {console.log(test is on: data);
}
function test1(data) {console.log(test1: data);
}
function test2(data) {console.log(test2: data);
}源码once方法里面的on.fn fn的作用
once订阅注册的订阅事件名均为on
考虑以下场景还未发布时订阅者需要取消订阅某个once事件由于once注册事件函数名均为onoff中cb是无法判断的因此需要添加on.fn用来标识区分所以才有off中判断条件为cb||cb.fn
上面的解释不仅说明了once方法里面 on.fn fn的作用也说明了off方法里面for循环中if判断的后半句callbacks[i].fn fn。
下面从代码打印中我们来看没有经过发布订阅者就取消订阅的once事件
输出语句如下
events.once(example, test2);
events.off(example, test2);
输出内容 ES5简易代码实现
//tsc编译js文件
var EventEmitter /** class */ (function () {function EventEmitter() {//事件列表对象this.eventList {};}//订阅EventEmitter.prototype.on function (eventName, fn) {//如果对象eventName不存在先创建一个空数组if (!this.eventList[eventName]) {this.eventList[eventName] [];}//如果事件存在把fn添加到对应eventList[eventName]列表里面this.eventList[eventName].push(fn);};//取消订阅EventEmitter.prototype.off function (eventName, fn) {var callbacks this.eventList[eventName];if (!callbacks) return false;if (!fn) return callbacks (callbacks.length 0);//遍历this.eventList[eventName]事件for (var i 0; i callbacks.length; i) {//判断那个事件fn相同则删除if (callbacks[i] fn || callbacks[i].fn fn) {callbacks.splice(i, 1);break;}}};//监听一次EventEmitter.prototype.once function (eventName, fn) {var _this this;var on function () {var args [];for (var _i 0; _i arguments.length; _i) {args[_i] arguments[_i];}_this.off(eventName, on);//args代替argumentsfn.apply(_this, args);};//存储fn,确保单独使用off删除传入的fn时可以被删除掉on.fn fn;this.on(eventName, on);};// 发布EventEmitter.prototype.emit function (eventName, data) {var callbacks this.eventList[eventName];if (!callbacks) return;callbacks.forEach(function (element) {element(data);});};return EventEmitter;
})();
var events new EventEmitter();
function test(data) {console.log(test is on: data);
}
function test1(data) {console.log(test1: data);
}
function test2(data) {console.log(test2: data);
}
//1
events.on(example, test);
events.emit(example, dddddd);
//2
events.once(example, test1);
events.emit(example, true);
//3
events.once(example, test2);
events.emit(example, 123);
//events.off(example, test2);输出
参考
JavaScript 发布-订阅模式 - 掘金
