wordpress 4.5.1 漏洞,seo优化就业前景,香河县做网站,小程序代理须知2、观察者模式
2.1、观察者模式
2.1.1、前言
定义一种一对多的依赖关系#xff0c;当一个对象发生变化时#xff0c;所有依赖于它的对象都会自动收到通知并更新。
两个角色#xff1a;
Subject#xff08;主题/被观察者#xff09;
Observer#xff08;观察者…2、观察者模式
2.1、观察者模式
2.1.1、前言
定义一种一对多的依赖关系当一个对象发生变化时所有依赖于它的对象都会自动收到通知并更新。
两个角色
Subject主题/被观察者
Observer观察者
观察者模式一般至少有一个 Subject主题 可以有多个Observer观察者。
二者关系 Subject主题主动建立与观察者的关系。
Subject主题/被观察者至少要有三个方法——添加观察者、移除观察者、通知观察者。
2.1.2、代码 input typetext idapp oninputhandleInput(event)
script// 主题接收状态变化并通知每个观察者class Subject {constructor() {this.observers []}// 新增观察者addObserver(observer) {this.observers.push(observer)}// 通知每个观察者notify(state) {this.observers.forEach(observer {observer.update(state)})}removeObserver(observer) {const index this.observers.indexOf(observer);if (index ! -1) {this.observers.splice(index, 1);}}}// 观察者等待被通知class Observe {constructor(name) {this.name name}update(state) {console.log(${this.name} 获取到最新值${state});}}const handleInput (e) {const event e || eventconst value event.target.value// 实例化一个主题const sub new Subject()// 实例化两个观察者 一个沐歌,一个沐夏const muge new Observe(沐歌)const muxi new Observe(沐夏)// 添加观察者实例sub.addObserver(muge)sub.addObserver(muxia)// 状态改变通知所有观察者sub.notify(value)}/script
2.2、发布订阅模式
2.2.1、前言
发布订阅模式在观察者模式的基础上加入了 事件调度中心 提供更灵活的控制适用于复杂的消息交互场景。
观察者模式是经典的设计模式观察者和目标之间直接交互适合简单的一对多通知。
2.2.1、代码
/** Author: muge* Date: 2021-05-21 18:46:09* LastEditors: Please set LastEditors* LastEditTime: 2023-03-09 16:37:47*/
//仿vue-$on $emit
class Event {// 首先定义一个事件对象用来装事件数组多个订阅者handlers {};// 订阅(事件添加方法) type事件名 callback回调函数$on(type, callback) {if (!this.handlers[type]) {// 没有则初始化this.handlers[type] [];}// 存入该事件this.handlers[type].push(callback);}// 触发事件 type事件名 params参数$emit(type, params) {// 若没有注册该事件则抛出错误if (!this.handlers[type]) return new Error(未注册该事件);// 事件触发this.handlers[type].forEach((callback) callback(params));}// 取消订阅 type事件名 callback回调函数$unsubscribe(type, callback) {// 无效事件抛出异常if (!this.handlers[type]) return new Error(未注册该事件);// 执行回调callbackcallback()// 删除事件delete this.handlers[type];}
}
// 创建一个event实例
const sub new Event();
// 订阅事件changeInputValue onLaod
sub.$on(changeInputValue, (params) {console.log(params, params);
});
sub.$on(onLaod, (params) {console.log(params, params);});
console.log(当前的事件列表,sub.handlers);
// 事件触发
sub.$emit(changeInputValue, 最新的值是1);
sub.$unsubscribe(changeInputValue,(){console.log(取消订阅执行的回调);
})
console.log(changeInputValue-事件取消,sub.handlers);
DOM事件也是发布订阅模式。订阅window的onload事件当window加载完毕时会向订阅者发布消息执行相应的回调函数。
window.addEventListener(onload, function () {console.log(loaded!)
})
