txt网站推荐,做暧网站,一键建站系统源码,同个网站可以做多个外链吗文章目录 前言介绍实现优缺点应用场景后言 前言 hello world欢迎来到前端的新世界 #x1f61c;当前文章系列专栏#xff1a;前端设计模式 #x1f431;#x1f453;博主在前端领域还有很多知识和技术需要掌握#xff0c;正在不断努力填补技术短板。(如果出现错误#… 文章目录 前言介绍实现优缺点应用场景后言 前言 hello world欢迎来到前端的新世界 当前文章系列专栏前端设计模式 博主在前端领域还有很多知识和技术需要掌握正在不断努力填补技术短板。(如果出现错误感谢大家指出) 感谢大家支持您的观看就是作者创作的动力 介绍 观察者模式又称发布-订阅模式Publish/Subscribe Pattern是我们经常接触到的设计模式日常生活中的应用也比比皆是比如你订阅了某个博主的频道当有内容更新时会收到推送又比如JavaScript中的事件订阅响应机制。观察者模式的思想用一句话描述就是被观察对象subject维护一组观察者observer当被观察对象状态改变时通过调用观察者的某个方法将这些变化通知到观察者。 实现
观察者模式中Subject对象一般需要实现以下API
subscribe(): 接收一个观察者observer对象使其订阅自己unsubscribe(): 接收一个观察者observer对象使其取消订阅自己fire(): 触发事件通知到所有观察者
// 被观察者
function Subject() {this.observers [];
}Subject.prototype {// 订阅subscribe: function (observer) {this.observers.push(observer);},// 取消订阅在这里插入代码片unsubscribe: function (observerToRemove) {this.observers this.observers.filter(observer {return observer ! observerToRemove;})},// 事件触发fire: function () {this.observers.forEach(observer {observer.call();});}
}验证是否订阅成功
const subject new Subject();function observer1() {console.log(Observer 1 Firing!);
}function observer2() {console.log(Observer 2 Firing!);
}subject.subscribe(observer1);
subject.subscribe(observer2);
subject.fire();//输出
Observer 1 Firing!
Observer 2 Firing!验证一下取消订阅是否成功
subject.unsubscribe(observer2);
subject.fire();//输出
Observer 1 Firing!优缺点
优点
支持简单的广播通信自动通知所有已经订阅过的对象目标对象与观察者之间的抽象耦合关系能单独扩展以及重用增加了灵活性观察者模式所做的工作就是在解耦让耦合的双方都依赖于抽象而不是依赖于具体。从而使得各自的变化都不会影响到另一边的变化。
缺点 过度使用会导致对象与对象之间的联系弱化会导致程序难以跟踪维护和理解 应用场景
DOM事件
document.body.addEventListener(click, function() {console.log(hello world!);
});
document.body.click()后言 创作不易要是本文章对广大读者有那么一点点帮助 不妨三连支持一下您的鼓励就是博主创作的动力
